★★★ - 深浅拷贝 - 图1

深拷贝

  1. function createData(deep, breadth) {
  2.     var data = {}
  3.     var temp = data
  4.     for (let i = 0; i < deep; i++) {
  5.         temp = temp['data'] = {}
  6.         for (let j = 0; j < breadth; j++) {
  7.             temp[j] = j
  8.         }
  9.     }
  10.     return data
  11. }
  1. function isObject(obj) {
  2.     return typeof obj === 'object' && obj !== null
  3. }
  1. var isType = type => value => Object.prototype.toString.call(value) === `[object ${type}]`
  2. var variableTypeDetection = {
  3.   isNumber: isType('Number'),
  4.   isString: isType('String'),
  5.   isBoolean: isType('Boolean'),
  6.   isNull: isType('Null'),
  7.   isUndefined: isType('Undefined'),
  8.   isSymbol: isType('Symbol'),
  9.   isFunction: isType('Function'),
  10.   isObject: isType('Object'),
  11.   isArray: isType('Array'),
  12.   isMap: isType('Map'),
  13.   isSet: isType('Set'),
  14.   isWeakMap: isType('WeakMap'),
  15.   isWeakSet: isType('WeakSet'),
  16.   isDate: isType('Date'),
  17.   isRegExp: isType('RegExp'),
  18.   isError: isType('Error')
  19. }
  20. variableTypeDetection.isNumber(1)
  1. function cloneJSON(source) {
  2.     return JSON.parse(JSON.stringify(source))
  3. }
  4. // console.log(cloneJSON(createData(10000, 5)))
  6. // cloneJSON 方法有循环引用检测
  7. var a = {}
  8. a.a = a
  9. cloneJSON(a)
  1. // 破解爆栈 - 递归改循环
  2. function cloneLoop(source) {
  3.     var root = {}
  4.     var loopList = [{
  5.         parent: root,
  6.         key: undefined,
  7.         data: source
  8.     }]
  10.     // 循环
  11.     while(loopList.length) {
  12.         // 深度优先
  13.         var node = loopList.pop()
  14.         var parent = node.parent
  15.         var key = node.key
  16.         var data = node.data
  18.         // 初始化赋值目标,key 为 undefined 时,则拷贝到父元素,否则拷贝到子元素
  19.         let res = parent
  20.         if(typeof key !== 'undefined') {
  21.             res = parent[key] = {}
  22.         }
  24.         for(let key in data) {
  25.             if(data.hasOwnProperty(key)) {
  26.                 if(typeof data[key] === 'object') {
  27.                     // 下次循环
  28.                     loopList.push({
  29.                         parent: res,
  30.                         key: key,
  31.                         data: data[key]
  32.                     })
  33.                 } else {
  34.                     res[key] = data[key]
  35.                 }
  36.             }
  37.         }
  38.     }
  39.     return root
  40. }
  41. console.log(cloneLoop(createData(2, 3)))
  1. function cloneDeep(obj, hash = new WeakMap()) {
  2.     if(!isObject(obj)) {
  3.         return obj
  4.     }
  5.     //
  6.     if(hash.has(obj)) {
  7.         return hash.get(obj)
  8.     }
  9.     let result = Array.isArray(obj) ? [] : {}
  10.     hash.set(obj, result)
  12.     Reflect.ownKeys(obj).forEach(item => {
  13.         if(isObject(obj[item])) {
  14.             result[item] = cloneDeep(obj[item], hash)
  15.         } else {
  16.             result[item] = obj[item]
  17.         }
  18.     })
  19.     return result
  20. }
  1. // 破解循环引用
  2. function find(arr, item) {
  3.     for(let i = 0; i < arr.length; i++) {
  4.         if (arr[i].source === item) {
  5.             return arr[i]
  6.         }
  7.     }
  8.     return null
  9. }
  10. function cloneForce(source) {
  11.     // 用来去重
  12.     var uniqueList = []
  14.     var root = {}
  15.     var loopList = [{
  16.         parent: root,
  17.         key: undefined,
  18.         data: source
  19.     }]
  21.     // 循环
  22.     while(loopList.length) {
  23.         // 深度优先
  24.         var node = loopList.pop()
  25.         var parent = node.parent
  26.         var key = node.key
  27.         var data = node.data
  29.         // 初始化赋值目标,key 为 undefined 时,则拷贝到父元素,否则拷贝到子元素
  30.         let res = parent
  31.         if(typeof key !== 'undefined') {
  32.             res = parent[key] = {}
  33.         }
  35.         // 判断类型是否已存在
  36.         let uniqueData = find(uniqueList, data)
  37.         if(uniqueData) {
  38.             parent[key] = uniqueData.target
  39.             continue
  40.         }
  41.         // 若数据不存在,保存源数据,在拷贝数据中对应的引用
  42.         uniqueList.push({
  43.             source: data,
  44.             target: res
  45.         })
  47.         for(let key in data) {
  48.             if(data.hasOwnProperty(key)) {
  49.                 if(typeof data[key] === 'object') {
  50.                     // 下次循环
  51.                     loopList.push({
  52.                         parent: res,
  53.                         key: key,
  54.                         data: data[key]
  55.                     })
  56.                 } else {
  57.                     res[key] = data[key]
  58.                 }
  59.             }
  60.         }
  61.     }
  62.     return root
  63. }
  64. console.log(cloneLoop(createData(2, 3)))
  1. function cloneDeep(obj, hash = new WeakMap()) {
  2.     if(hash.has(obj)) {
  3.         return obj
  4.     }
  5.     let result = null
  6.     var reference = [Date, RegExp, Set, Map, WeakSet, WeakMap, Error]
  7.     if(reference.includes(obj?.constructor)) {
  8.         // 学习方法
  9.         result = new obj.constructor(obj)
  10.     } else if (Array.isArray(obj)) {
  11.         result = []
  12.         obj.forEach((item, index) => {
  13.             result[index] = cloneDeep(item)
  14.         })
  15.     } else if (isObject(obj)) {
  16.         hash.set(obj)
  17.         result = {}
  18.         for(let key in obj) {
  19.             if (Object.hasOwnProperty.call(obj, key)) {
  20.                 result[key] = cloneDeep(obj[key], hash)
  21.             }
  22.         }
  23.     } else {
  24.         result = obj
  25.     }
  26.     return result
  27. }
  1. // 获取类型
  2. var Type = param => Object.prototype.toString.call(param)
  4. //获取正则标识
  5. var getRegFlags = reg => (reg + "").replace(/\/(.*)\//, "")
  7. var clone = param => {
  8.     //声明父子数组解决循环引用
  9.     var parent = []
  10.     var children = []
  11.     //判断条件过多,声明map数据结构.也可以使用对象
  12.     var map = new Map()
  13.     var _clone = param => {
  14.         var child, proto
  15.         //如果为值类型数据
  16.         if ((typeof param !== 'object' && typeof param !== 'function') || param === null) {
  17.             //如果为symbol获取symbol的值,然后重新建一个symbol(我查阅资料没找到获取symbol描述的api,因此用正则获取)
  18.             child = typeof param === 'symbol' ? (/\((.*)\)/.test(param.toString())) && Symbol(RegExp.$1) : param
  19.         }
  20.         //如果为引用数据类型
  21.         else {
  22.             //对函数进行克隆
  23.             map.set('[object Function]', () => {
  24.                 //获取函数字符串并使用eval函数将字符串当做js代码执行
  25.                 var fn = param.toString()
  26.                 child = eval(`(${fn})`)
  27.             })
  28.             //对数组进行克隆
  29.             map.set('[object Array]', () => {
  30.                 child = []
  31.             })
  32.             //对对象进行克隆
  33.             map.set('[object Object]', () => {
  34.                 //为孩子重新构造原型关系
  35.                 proto = Object.getPrototypeOf(param)
  36.                 child = Object.create(proto)
  37.             })
  38.             //对正则进行克隆
  39.             map.set('[object RegExp]', () => {
  40.                 child = new RegExp(param.source, getRegFlags(param))
  41.             })
  42.             //对日期进行克隆
  43.             map.set('[object Date]', () => {
  44.                 // Date.parse(dateString) 解析一个日期字符串，返回值是时间戳（毫秒数），等价于：new Date().getTime()
  45.                 child = new Date(Date.parse(param))
  46.             })
  47.             //对map进行克隆
  48.             map.set('[object Map]', () => {
  49.                 // child = new Map([...Array.from(param)])
  50.                 child = new Map()
  51.             })
  52.             //对set进行克隆
  53.             map.set('[object Set]', () => {
  54.                 // child = new Set([...Array.from(param)])
  55.                 child = new Set()
  56.             })
  57.         }
  58.         //如果是引用数据类型(map只加了引用数据类型) 执行函数
  59.         map.has(Type(param)) && map.get(Type(param))()
  60.         // 处理循环引用
  61.         var index = parent.indexOf(param)
  62.         // 如果前面已经引用过,直接返回此对象如下例中,引用过两次oldObj
  63.         if (index !== -1) {
  64.             console.log('有循环引用...', children[index])
  65.             return children[index]
  66.         }
  67.         parent.push(param)
  68.         children.push(child)
  70.         // 如果param对象
  71.         if (param && typeof param === 'object') {
  72.             // 如果为set
  73.             if (Type(param) === '[object Set]') {
  74.                 for (let item of param.keys()) {
  75.                     child.add(_clone(item))
  76.                 }
  77.             }
  78.             // 如果为map
  79.             else if (Type(param) === '[object Map]') {
  80.                 for (let item of param.keys()) {
  81.                     child.set(item, _clone(param.get(item)))
  82.                 }
  83.             }
  84.             else {
  85.                 Reflect.ownKeys(param).forEach(item => {
  86.                     //递归调用  
  87.                     child[item] = _clone(param[item])
  88.                 })
  89.             }
  90.         }
  91.         return child
  92.     }
  93.     return _clone(param)
  94. }
  95. // 测试各类数据
  96. function person(name) {
  97.     this.name = name;
  98. }
  100. var HuangLiHao = new person('HuangLiHao');
  102. function fn() {
  103.     console.log('3');
  104. }
  105. var xx = Symbol('xx')
  107. var obj = { y: 3 }
  109. var oldObj = {
  110.     a: fn,
  111.     zz: fn,
  112.     c: new RegExp('ab+c', 'gi'),
  113.     d: HuangLiHao,
  114.     x: new Date(),
  115.     mum: 10,
  116.     bool: true,
  117.     str: '3',
  118.     null: null,
  119.     und: undefined,
  120.     sym: Symbol(123),
  121.     [xx]: 5,
  122.     array: [1, 3, 4, [2, 4]],
  123.     set: new Set([2, 3, 43, 6546, '2'])
  124. }
  125. oldObj.b = oldObj
  126. oldObj.map = new Map([[1, oldObj]])
  127. oldObj.__proto__ = obj
  128. var newObj = clone(oldObj)
  129. console.log(newObj);
  130. // console.log(newObj.y);
  131. // var map = new Set()
  1. const isType = (type: string) => (value:any) => Object.prototype.toString.call(value) === `[object ${type}]`
  2. const validateType = {
  3.     isDate: isType('Date'),
  4.     isMap: isType('Map'),
  5.     isSet: isType('Set'),
  6.     isArray: isType('Array')
  7. }
  9. export function cloneDeep(obj: any, map = new WeakMap()): any {
  10.     if (typeof obj !== 'object' || obj === null) return obj
  12.     // 避免循环引用
  13.     if (map.has(obj)) {
  14.         return map.get(obj)
  15.     }
  17.     let target: any = {}
  18.     map.set(obj, target)
  20.     // Set
  21.     if (validateType.isSet(obj)) {
  22.         target = new Set()
  23.         obj.forEach((val: any) => {
  24.             const newVal = cloneDeep(val, map)
  25.             target.add(newVal)
  26.         });
  27.     }
  29.     // Map
  30.     if (validateType.isMap(obj)) {
  31.         target = new Map()
  32.         obj.forEach((v: any, k: any) => {
  33.             const newKey = cloneDeep(k, map)
  34.             const newVal = cloneDeep(v, map)
  35.             target.set(newKey, newVal)
  36.         });
  37.     }
  39.     // Date
  40.     if (validateType.isDate(obj)) {
  41.         target = new Date(Date.parse(obj))
  42.     }
  44.     // Array
  45.     if (validateType.isArray(obj)) {
  46.         target = obj.map((item: any) => cloneDeep(item, map))
  47.     }
  49.     // Object
  50.     for (const key in obj) {
  51.         const val = obj[key]
  52.         const val1 = cloneDeep(val, map)
  53.         target[key] = val1
  54.     }
  55.     return target
  56. }

参考文档

  1. 深拷贝的终极探索、你最少用几行代码实现深拷贝？
  2. jQuery中的extend方法源码
  3. 深拷贝的终极探索