理解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}]

珍惜眼前
7 声望2 粉丝