理解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}]
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。