JS 数组、对象的深拷贝

JavaScript 程序中，对于简单的数字、字符串可以通过 = 赋值拷贝

但是对于数组、对象、对象数组的拷贝，就有浅拷贝和深拷贝之分

浅拷贝就是当改变了拷贝后的数据，原数据也会相应改变

来说说深拷贝

数组深拷贝

遍历赋值

不推荐此方法

let a = [1, 2, 3]

let b = []

for (let val of a) {

  b.push(val)

}

b.push(4)

a // [1, 2, 3]

b // [1, 2, 3, 4]

slice()

数组方法 slice() 可从已有的数组中返回选定的元素

那么设置为 0，就是返回整个数组

let a = [1, 2, 3]

let b = a.slice(0)

b.push(4)

a // [1, 2, 3]

b // [1, 2, 3, 4]

concat()

数组方法 concat() 连接一个或多个数组，并返回一个副本

那么不设置参数，就返回本数组

let a = [1, 2, 3]

let b = a.concat()

b.push(4)

a // [1, 2, 3]

b // [1, 2, 3, 4]

ES6 方法

let a = [1, 2, 3]

let b = [...a]

b.push(4)

a // [1, 2, 3]

b // [1, 2, 3, 4]

let a = [1, 2, 3]

let b = Array.from(a)

b.push(4)

a // [1, 2, 3]

b // [1, 2, 3, 4]

对象深拷贝

Object.assign()

Object.assign(target, obj)

let a = { name: 'krry' }

let b = Object.assign({}, a)

b.name = 'lily'

a // { name: 'krry' }

b // { name: 'lily' }

注意使用 assign() 有如下特点：

不会拷贝对象继承的属性、不可枚举的属性、属性的数据属性/访问器属性
可以拷贝 Symbol 类型

扩展运算符

let a = { name: 'krry' }

let b = { ...a }

b.name = 'lily'

a // { name: 'krry' }

b // { name: 'lily' }

以上是简单数组、对象的深拷贝方法，但是对于二维数组、对象数组、对象里包含对象，以上方法均达不到深拷贝方法

以上只能达到数组、对象的第一层的深拷贝，对于里面的数组或对象属性则是浅拷贝，因为里面的内存地址只是拷贝了一份，但都是指向同一个地址

所以当改变数组、对象里的数组元素或对象，原数据依然会改变

二维数组、对象数组、多层对象的深拷贝

最常用的 JSON 序列化与反序列化

使用 JSON.parse(JSON.stringify(obj))

let a = [1, [2, {aa: 2}, [4]], {aa: 5, cc: { dd: 6 }}]

let b = JSON.parse(JSON.stringify(a)) // 完美

通过 JSON.stringify 实现深拷贝有几点要注意

拷贝的对象的值中如果有函数、undefined、symbol，则经过 JSON.stringify() 序列化后的 JSON 字符串中这个键值对会消失
无法拷贝不可枚举的属性，无法拷贝对象的原型链
拷贝 Date 引用类型会变成字符串
拷贝 RegExp 引用类型会变成空对象
对象中含有 NaN、Infinity 和 -Infinity，则序列化的结果会变成 null
无法拷贝对象的循环应用（即 obj[key] = obj）

自己实现深拷贝方法

function deepCopy(obj) {

  let result = Array.isArray(obj) ? [] : {};

  for (let key in obj) {

    if (obj.hasOwnProperty(key)) {

      if (typeof obj[key] === 'object') {

        result[key] = deepCopy(obj[key]);   // 递归复制

      } else {

        result[key] = obj[key];

      }

    }

  }

  return result;

}

lodash 的深拷贝 cloneDeep

使用 lodash 插件的深拷贝方法

// 官方例子

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);

console.log(deep[0] === objects[0]);

// => false

传送门：https://www.lodashjs.com/docs/4.17.5.html#cloneDeep

博客地址：https://ainyi.com/72

秒客网