JS实现深拷贝

起因

用echarts绘制图形时遇到一个问题，前台js用数组或对象处理后台的数据时，每次都要先还原到初始的状态再接收更新数据，因此需要深拷贝，避免初始数据污染。

实现方法

递归的方式

//使用递归的方式实现数组、对象的深拷贝
function deepClone(obj) {
    //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
    var objClone = Array.isArray(obj) ? [] : {};
    //进行深拷贝的不能为空，并且是对象或者是
    if (obj && typeof obj === "object") {
        for (key in obj) {
            if (obj.hasOwnProperty(key)) {
                if (obj[key] && typeof obj[key] === "object") {
                    objClone[key] = deepClone(obj[key]);
                } else {
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}

JSON 对象实现

//通过js的内置对象JSON来进行数组对象的深拷贝
objClone = JSON.parse(JSON.stringify(obj));

注意事项

注：JSON无法实现对对象中方法的深拷贝

1.如果obj里面有时间对象，则通过JSON拷贝后，时间将只是字符串的形式，而不是时间对象

var obj = {
    name: 'a',
    date: new Date(),
};
objClone = JSON.parse(JSON.stringify(obj))
console.log(objClone)

2.如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象

obj = {
    name: 'xxx',
    age: new Error('my error'),
    date: new RegExp('\\w+'),
};
objClone = JSON.parse(JSON.stringify(obj));
obj.name = 'test'
console.log(obj, objClone)

3.如果obj里有函数，undefined，则序列化的结果会把结果丢失

obj = {
    name: 'xxx',
    age: undefined,
    date: function fuc() {
        console.log('abc')
    },
};
objClone = JSON.parse(JSON.stringify(obj));
console.log(obj, objClone)

4.如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null

obj = {
    name: NaN,
    age: Infinity,
    money: -Infinity
};
objClone = JSON.parse(JSON.stringify(obj));
console.log(obj, objClone)

5.JSON.stringify()只能序列化对象的可枚举的自有属性，
例如：如果obj中的对象是有构造函数生成的， 则使用JSON深拷贝后，会丢弃对象的constructor

function Person(name) {
    this.name = name;
    console.log(name)
}
obj = {
    name: 'a',
    date: new Person('tom')
};
objClone = JSON.parse(JSON.stringify(obj));
obj.name = 'test'
console.log(obj, objClone)

6.如果对象中存在循环引用的情况也无法正确实现深拷贝

jQuery的extend方法实现

var newArr = $.extend(true, [], arr);
var newObj = $.extend(true, {}, obj);

注：.extend(Boolean,m,n)
true表示合并时保留m中的名称不同于n的属性，追加拷贝
false表示合并时不保留m中的名称不同于n的属性，完全拷贝

Object.assign()

objClone = Object.assign(obj)

当obj中只有一级属性，没有二级属性的时候，此方法为深拷贝
但obj中有对象的时候，此方法是浅拷贝。