谈谈深拷贝、浅拷贝 |
您所在的位置：网站首页 › 什么是浅拷贝和深拷贝 › 谈谈深拷贝、浅拷贝 |
谈谈深拷贝、浅拷贝
|
前提: 假设您已经知道为什么在JavaScript中需要深拷贝和浅拷贝了。
举两个例子： const a = [1, 2, { key: 20 }] const b = [...a] b[2].key = 30 console.log(a[2] === b[2]) console.log(a === b) // true const o = { k1: { kk1: 50} } const o1 = { ...o } o1.k1.bb = { bb: 30 } console.log(o1.k1 === o.k1) // true在上面数组和对象中分别改变了 b[2] 和 o1.k1，但是最后结果的得到和原来的值保持一致。 在JavaScript中分为2大类(原始值类型和对象类型)7中数据类型(Boolean, Null, Undefined, Number, String, Symbol),原始值类型标识对这个数据的任何操作都会返回一个新的数据，也就是说一旦申明一个原始值类型的数据则该数据不可变。如果申明一个对象类型例如: {}, new Map(), new Set(), new Regex(), new Date() 等等。再进一步来说：
我们一般说的深拷贝和浅拷贝主要是对数组和对象来进行的，下面也主要对数组和对象进行实践操作: 浅拷贝浅拷贝可以当成是单层拷贝，何为单层拷贝，就是复制的对象深度只有一。 数组 Array.concat如下操作: const arr = [1, 2, 3] const newArr = [].concat(arr) // arr === newArr false上面这个方式就直接把把arr合并到新的数组中，并把新的数组返回回来，达到拷贝的目的。 Array.slice数组的复制操作: const arr = [1, 2, 3] const newArr = arr.slice() // arr === newArr false上面从0 -> arr.length - 1 进行拷贝复制，返回一个新的数组. Array.from数组的创建方式，通过给定一个不定参数，然后创建一个数组 const arr = [1, 2, 3] const newArr = Array.from(arr) // newArr === arr false通过原有数组创建新数组，得到拷贝目的。 总结上面三种方式都可以简单进行数组的浅拷贝，如果数组内嵌套有其他数据呢？这个数据是没有处理过呢，如何做呢？且看下文 Object Object.assign对象合并方法: const o = {a: 1, b: 2} const no = Object.assign({}, o) // o === no1 false通过一个新对象和原有对象合并，得到新的对象 ES6 扩展运算符(...)扩展符号如下: const o = { a: 1, b: 1 } const o1 = {...o } // o === o1 false通过一个新的对象申明，并把原有对象属性通过 ... 复制下来，达到拷贝目的。 深拷贝上文中都是单层数据拷贝，在内存堆栈来说，就是在栈内重新重新开辟的空间，但是实际上，这个对象对应的二层对象并没有进行任何处理，依旧还是原有只想，浅拷贝实现的示意图如下: 红色部分是新进行申明的变量以及新的在堆中的内容，绿色部分总是没有被复制。如何始终让绿色可以被拷贝，被复制呢？下面就说一下这个 普通深拷贝 JSON.parse 和 JSON.stringify通过v8提供的JSON序列化和反序列的的方法，首先把json转换成字符串，在js中，所有Primitive 值都是不可变的，一旦修改就是新的数据。然后通过反序列的方式，直接将JSON.parse 转换回来了即可。 const a = { ... } const deepCloneA = JSON.parse(JSON.stringify(a))JSON 序列化和反序列化局限: undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。 所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。 Date日期调用了toJSON()将其转换为了string字符串（同Date.toISOString()），因此会被当做字符串处理。 NaN和Infinity格式的数值及null都会被当做null。 其他类型的对象，包括Map/Set/weakMap/weakSet，仅会序列化可枚举的属性。 https://developer.mozilla.org...局限也是 JSON.stringify的局限。 那么总结一下，如果我们要进行深拷贝，需要考虑的问题是那些呢？ 对象循环拷贝，解决对象内部嵌套对象问题 falsy 的数据，函数，symbol可以被拷贝， date对象能够 循环引用的解决 解决遗留问题 对象循环拷贝见如下代码: function deepCopy(o) { if (typeof o !== 'object') return o; const object = {}; for (const key in o) { if (o.hasOwnProperty(key)) { const element = o[key]; if (typeof element === 'object' && element !== null) deepCopy(element); else object[key] = element; } } return object }测试代码: const o = { a: 2, b: '2', c: { say: 'hello world' }, d: null, e: undefined, f: function() { console.log('Good') }, symbol: Symbol('hello') } console.log(o) const o1 = deepCopy(o) console.log(o1);输出如下: { a: 2, b: '2', c: { say: 'hello world' }, d: null, e: undefined, f: [Function: f], symbol: Symbol(hello) } { a: 2, b: '2', d: null, e: undefined, f: [Function: f], symbol: Symbol(hello) } false在代码里面，我们使用递归，实现了基本数据的复制。上面的情况基本能够解决我们大部分 特殊数据处理
在上述的图中，如果我们的数据结构变成这样，结果是怎么样的呢？需要对一些特别的数据进行处理, 例如Date, Map 等。这里以Date和Map为例子，其他类似: 最后得到两个值都是空值，所以需要对写类型的数据进行特别处理. 这里增加一种工具类： const objectTag = '[object Object]'; const arrayTag = '[object Array]'; const dateTag = '[object Date]'; const mapTag = '[object Map]'; const getTag = (o) => Object.prototype.toString.call(o)开始真正的表演: function deepCopy(o) { if (typeof o !== 'object') return o; const object = {}; for (const key in o) { const element = o[key]; if (element && typeof element === 'object') { const tag = getTag(element); const Ctor = element.constructor switch (tag) { case arrayTag: case objectTag: object[key] = deepCopy(element); break case dateTag: object[key] = new Ctor(+element) break case mapTag: const map = new Ctor element.forEach((subValue, key) => { map.set(key, deepCopy(subValue)) }) object[key] = map default: break; } } else object[key] = element; } return object; }运行相同的测试代码，输出如下： { a: 2, b: '2', c: { say: 'hello world' }, d: null, e: undefined, f: [Function: f], g: Infinity, symbol: Symbol(hello), dd: 2019-10-22T12:54:57.976Z, cc: Map { 'a' => 2 } } { a: 2, b: '2', c: { say: 'hello world' }, d: null, e: undefined, f: [Function: f], g: Infinity, symbol: Symbol(hello), dd: 2019-10-22T12:54:57.976Z, cc: Map { 'a' => 2 } } false false这里就处理好了一些特殊数据的问题。 从上面也可以得到，一个数据的要想支持深拷贝，必须要对对应深拷贝的数据进行处理, 上面也是lodash深拷贝实现思路。 循环引用特殊数据也处理完成后，若我们有下面数据: 直接运行看情况： 这里需要对代码进行一些处理，我们需要判断代码是否存在循环引用呢？我们在递归时候，不断把当前父级(currentParent)，当然的复制的数据(object), 还有最原始的数据(o)传入，是不是可以通过循环判断是否存在递归, 下面实现一下: const objectTag = '[object Object]'; const arrayTag = '[object Array]'; const dateTag = '[object Date]'; const mapTag = '[object Map]'; const getTag = (o) => Object.prototype.toString.call(o); function deepCopy(o, parent = null) { if (typeof o !== 'object') return o; const object = {}; let _parent = parent while(_parent) { if (_parent.originParent === o) { return _parent.currentParent } _parent = _parent.parent } for (const key in o) { const element = o[key]; if (element && typeof element === 'object') { const tag = getTag(element); const Ctor = element.constructor; switch (tag) { case arrayTag: case objectTag: object[key] = deepCopy(element, { parent, currentParent: object, originParent: o }); break; case dateTag: object[key] = new Ctor(+element); break; case mapTag: const map = new Ctor(); element.forEach((subValue, key) => { map.set(key, deepCopy(subValue, { parent, currentParent: object, originParent: o })); }); object[key] = map; default: break; } } else object[key] = element; } return object; }我们在入口时候判断，如果是递归的话，就把当前复制的结果给返回即可。查看如下示例: const o = { a: 2, b: '2', c: { say: 'hello world' }, c1: { say: 'good idea' }, d: null, e: undefined, f: function() { console.log('Good'); }, g: Infinity, symbol: Symbol('hello'), dd: new Date(), cc: new Map([['a', 2]]), }; o.ff = o; o.cc.set('cir', o) o.c.bb = o.c1输出结果: { a: 2, b: '2', c: { say: 'hello world', bb: { say: 'good idea' } }, c1: { say: 'good idea' }, d: null, e: undefined, f: [Function: f], g: Infinity, symbol: Symbol(hello), dd: 2019-10-24T05:17:09.550Z, cc: Map { 'a' => 2, 'cir' => [Circular] }, ff: [Circular] } { a: 2, b: '2', c: { say: 'hello world', bb: { say: 'good idea' } }, c1: { say: 'good idea' }, d: null, e: undefined, f: [Function: f], g: Infinity, symbol: Symbol(hello), dd: 2019-10-24T05:17:09.550Z, cc: Map { 'a' => 2, 'cir' => [Circular] }, ff: [Circular] } false false false这样就保证递归的正确性了。 闲谈或许这里递归方式并不是解决重复引用的最好方法，也有方式采用 WeakMap 方式来解决，每次递归的时候都用WeakMap存下即可。 最后深浅拷贝涉及JS的数据类型的存储机制，所以对深浅拷贝可以明确区分在JS中 原始类型(Primitive) 或者 对象类型(Object) 存储的区分。 如有问题，欢迎交流。源码地址: https://github.com/zsirfs/content-scripts/blob/master/deep-copy.js原文链接:https://segmentfault.com/a/1190000020787451 |
(网图，侵删)
【本文地址】