谈谈深拷贝浅拷贝

14次阅读

共计 5777 个字符，预计需要花费 15 分钟才能阅读完成。

前提: 假设您已经知道为什么在 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() 等等。再进一步来说：


(网图，侵删)

不同的类别的数据保存的数据结构, 数据申明保存在栈数据结构中，而对象应用则分配在堆中，即用一大块非结构化的内存区域
参考: https://developer.mozilla.org…

我们一般说的深拷贝和浅拷贝主要是对数组和对象来进行的，下面也主要对数组和对象进行实践操作:

浅拷贝

浅拷贝可以当成是单层拷贝，何为单层拷贝，就是复制的对象深度只有一。

数组

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 序列化和反序列化局限:

  1. undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。
  2. 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
  3. 所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。
  4. Date 日期调用了 toJSON()将其转换为了 string 字符串（同 Date.toISOString()），因此会被当做字符串处理。
  5. NaN 和 Infinity 格式的数值及 null 都会被当做 null。
  6. 其他类型的对象，包括 Map/Set/weakMap/weakSet，仅会序列化可枚举的属性。

https://developer.mozilla.org…

局限也是 JSON.stringify的局限。

那么总结一下，如果我们要进行深拷贝，需要考虑的问题是那些呢？

  1. 对象循环拷贝，解决对象内部嵌套对象问题
  2. falsy 的数据，函数，symbol 可以被拷贝，date 对象能够
  3. 循环引用的解决

解决遗留问题

对象循环拷贝

见如下代码:

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

正文完
javascript专题系列
发表至： javascript
2019-10-24
 0
React-初学者需要知道的一些知识
关于javascript:凹凸技术揭秘618-大促解析
关于javascript:Js-异步处理演进CallbackPromiseObserver
儿童节-让你在我的世界添码行空