javascript实现深浅拷贝

深浅拷贝通常是对于引用数据类型进行的（数据类型为:对象(Object)、数组(Array)、函数(Function)）

浅拷贝：

let obj = {id: 1, name: 2};
let newObj = obj;

setTimeout(() => {
    newObj.id = 2;
    console.log(obj,newObj)
},1000);

// 输出如下
// { id: 2, name: 2 } { id: 2, name: 2 }

我们发现，随着newObj的变化，obj也随之变化，这明显不是我们想要的，数组也同样如此，那么就需要进行深拷贝了。

深拷贝：

方法1（封装函数）

// 构造一个深拷贝函数
function deepClone(obj) {
    var result = Array.isArray(obj) ? [] : {}; // 判断当前传进来的是对象还是数组
    for(var key in obj) {
        if (obj.hasOwnProperty(key)) { // 该key是否存在
            if (typeof obj[key] === 'object' && obj[key] !== null) { // obj[key]如果为object,递归调用该方法，obj[key] = arr || obj[key] = {}都为'object'
                result[key] = deepClone(obj[key]);
            } else {
                result[key] = obj[key];
            }
        }
    }
    return result;
}

let arr1 = [1,2,3,4,5];
let arr2 = deepClone(arr1);
arr2[0] = 'hello';
arr2[4] = 'world';
console.log(arr1); // [ 1, 2, 3, 4, 5 ]
console.log(arr2); // [ 'hello', 2, 3, 4, 'world' ]

let obj1 = {id: 1, name: 1, love: [1,2,3,4], test: {id: 1, name: 1}};
let obj2 = deepClone(obj1);
obj2.love[0] = 'ecmascript';
obj2.test.id = 2;
console.log(obj1);
// { id: 1, name: 1, love: [ 1, 2, 3, 4 ], test: { id: 1, name: 1 } }
console.log(obj2);
// { id: 1,name: 1,love: [ 'ecmascript', 2, 3, 4 ],test: { id: 2, name: 1 } }

方法2（JSON.parse和JSON.stringify）

let obj1 = {
    id: 1,
    name: 1
};
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.id = 2;
obj2.name = 2;
console.log(obj1,obj2);
// { id: 1, name: 1 }
// { id: 2, name: 2 }

方法3（在nodeJS项目中，有一个lodash模块，我们可以利用它提供的方法来实现深度克隆，或者将其下载到本地，引入它对应的js文件也可如下）

lodash中文网 https://www.lodashjs.com/docs/latest

// npm install lodash -S

const cloneDeep = require('lodash/cloneDeep')
let arr3 = [1,2,3,4];
let arr4 = cloneDeep(arr3);
arr4[1] = 'hello';
console.log(arr3,arr4);

// [ 1, 2, 3, 4 ]
// [ 1, 'hello', 3, 4 ]