JavaScript JSON对象深拷贝的5中方法

应用场景

JavaScript中，Object是引用类型，把对象objA赋值给objB之后，改变objB的值，objA会跟着改变。这是因为默认执行浅拷贝，也就是在内存中只复制了一个指针给了objB，内存中的数据本身并没有被复制。

如果我们需要一个深拷贝，也就是执行 objB = objA 之后，让 objB 和 objA 再也没有直接关联，该如何操作？

方法一

ES6新特性

const clone = {...original}

示例：

let a = {key1: 1}
let b = {...a}
b.key1 = 2
console.log(a) // {key1: 1}

注意: 这种方式只能用于单层json对象，也就是对象中的每个value都是基本类型，没有嵌套。

方法二

ES6新特性

const clone = Object.assign({}, original)

示例：

var a = { key1: 1 };
var b = Object.assign({}, a);
b.a-=key1 = 2
console.log(a) // {key1: 1}

注意: 这种方式只能用于单层json对象，也就是对象中的每个value都是基本类型，没有嵌套。

方法三

const clone = JSON.parse(JSON.stringify(original));

这个是可以对多层json对象进行拷贝的

示例：

var a = { 
          key1: {
            subKey: 1
          }
        };
var b = JSON.parse(JSON.stringify(a));
b.key1.subKey = 2
console.log(a)

//打印结果
{
  key1: {
          subKey: 1
        }
}

注意: 使用这个方法，对象中不能有Date, functions, undefined, Infinity, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays这些数据类型。

方法四

自定义深拷贝函数。

function deepClone(o1, o2) {
    for (let k in o2) {
        if (typeof o2[k] === 'object') {
            o1[k] = {};
            deepClone(o1[k], o2[k]);
        } else {
            o1[k] = o2[k];
        }
    }
}

方法五

使用第三方库

例如：

• lodash.clonedeep

• angular.copy

• jQuery.extend()

参考链接

https://stackoverflow.com/questions/39736397/is-this-a-good-way-to-clone-an-object-in-es6

https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript/122704#122704

https://juejin.im/post/5bc44a71e51d450e935caa11