深浅拷贝理解记录

javascript总结：深拷贝与浅拷贝的实现

浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用

深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”。

我们希望在改变新的数组（对象）的时候，不改变原数组（对）时需要使用深拷贝。

浅拷贝实现(对象)

const obj = {
    siteName:"zhouyajing",
	    info:{
	        age:18,
	        props:["11","22"]
    }
}
// 1. ...实现
let copy1 = {...obj};
console.log(copy1 === obj); // false
console.log(copy1.info === obj.info); // true
console.log(copy1.siteName); // zhouyajing

// 2. Object.assign实现
let copy2 = Object.assign({},obj);
console.log(copy2 === obj);// false
console.log(copy2.info === obj.info);// true
console.log(copy2.siteName);// zhouyajing

// 3、for in 实现
let copy3 = {};
for(let key in obj){
    copy3[key] = obj[key];
}
console.log(copy2 === obj);// false
console.log(copy2.info === obj.info);// true
console.log(copy2.siteName);// zhouyajing

浅拷贝实现(数组)

const arr =[{
    siteName:"zhouyajing",
    info:{
        age:18,
        props:["11","22"]
    }
}]
// 1. ...实现
let copy1 = {...arr};
console.log(copy1 === arr); // false
console.log(copy1[0].info === arr[0].info); // true
console.log(copy1[0].siteName); // zhouyajing

// 2. Array.from实现
let copy2 = Array.from(arr);
console.log(copy2 === arr); // false
console.log(copy2[0].info === arr[0].info); // true
console.log(copy2[0].siteName); // zhouyajing

// 3、forEach实现
let copy3 = [];
arr.forEach(v=>copy3.push(v));
copy3 = Array.from(arr);
console.log(copy3 === arr); // false
console.log(copy3[0].info === arr[0].info); // true
console.log(copy3[0].siteName); // zhouyajing

// 4、map实现
let copy4 = arr.map(v=>v);
console.log(copy4 === arr); // false
console.log(copy4[0].info === arr[0].info); // true
console.log(copy4[0].siteName); // zhouyajing

深拷贝实现(1) JOSN.stringify()/JSON.parse()

const obj = {
    siteName:"zhouyajing",
    info:{
        age:18,
        props:["11","22"]
    }
}
const copy1 = JSON.parse(JSON.stringify(obj));
console.log(copy1 === obj); // false
console.log(copy1.info === obj.info); // false
console.log(copy1.info.props === obj.info.props); // false
console.log(copy1.siteName); // zhouyajing

深拷贝实现(2.递归拷贝)

function deepClone(obj) {
    // 判断是否数组或对象，确定初始值
    let copy = obj instanceof Array ? [] : {}
    for (let i in obj) {
        if (obj.hasOwnProperty(i)) {
            copy[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
        }
    }
    return copy
}
const obj = {
    siteName:"zhouyajing",
    info:{
        age:18,
        props:["11","22"]
    }
}
const copy1 = deepClone(obj);
console.log(copy1 === obj); // false
console.log(copy1.info === obj.info); // false
console.log(copy1.info.props === obj.info.props); // false
console.log(copy1.siteName); // zhouyajing