关于前端:javascript关于Array数组Object对象的浅拷贝和深拷贝

了解 Array 和 Object 的浅拷贝，深拷贝

先总结用法：

 浅拷贝：只有一层构造的，简略的 Array 和 Object 的属性、值援用的拷贝；深拷贝：多层接口嵌套的，简单的 Array 和 Object 的地址援用的拷贝；浅拷贝 Array：[].concat(arr)
    
浅拷贝 Object：Object.assign({}, obj)
    
深拷贝 Array、Object、两者多层混合：JSON.parse(JSON.stringify(arrWithObj)) // 先解析为字符串，再解析为 json 对象 

浅拷贝 Array

var copyArr = [].concat(arr);

var arr = [1, 2, 3];
var copyArr = [].concat(arr);

copyArr.push(4);

console.log(arr); // 1, 2, 3
console.log(copyArr); // 1, 2, 3, 4

浅拷贝 Object
var copyObj = Object.assign({}, obj);

var obj = {name: 'Tom', age: 12};
var copyObj = Object.assign({}, obj);

copyObj.address = 'beijing';

console.log(obj); // {name: "Tom", age: 12}
console.log(copyObj); // {name: "Tom", age: 12, address: "beijing"}

深拷贝 Array
JSON.parse(JSON.stringify(arr));

var arr = [[1, 2], [3, 4]];
var copyArr = JSON.parse(JSON.stringify(arr));

copyArr[1].push([5, 6]);

console.log(arr); // [[1, 2], [3, 4]]
console.log(copyArr); // [[1, 2], [3, 4, [5, 6]]]

深拷贝 Object
JSON.parse(JSON.stringify(obj));

var obj = {name: 'Tom', result: {chinese: 97, math: 95}};
var copyObj = JSON.parse(JSON.stringify(obj));

copyObj.result.english = 93;

console.log(obj); // {name: 'Tom', result: {chinese: 97, math: 95}}
console.log(copyObj); // {name: 'Tom', result: {chinese: 97, math: 95, english: 93}}

深拷贝两者多层混合
JSON.parse(JSON.stringify(arrWithObj));

var arr = [{key: 'Lucy', value: '10'}, {key: 'Lily', value: '20'}];
var copyArr = JSON.parse(JSON.stringify(arr));

copyArr.forEach((item) => {item.is_checked = false});

console.log(arr); // [{key: 'Lucy', value: '10'}, {key: 'Lily', value: '20'}]
console.log(copyArr); // [{key: 'Lucy', value: '10', is_checked: false}, {key: 'Lily', value: '20', is_checked: false}]