javascript總結：深拷貝與淺拷貝的實現

• 淺拷貝： 將原對象或原數組的引用直接賦給新對象，新數組，新對象／數組只是原對象的一個引用

• 深拷貝： 創建一個新的對象和數組，將原對象的各項屬性的“值”（數組的所有元素）拷貝過來，是“值”而不是“引用”。

• 我們希望在改變新的數組（對象）的時候，不改變原數組（對象）時需要使用深拷貝。

1、淺拷貝實現

原對象

const obj = {
    siteName:"張培躍",
    info:{
        age:18,
        props:["陽光","帥氣"]
    }
}
// 1. ...實現
let copy1 = {...obj};
console.log(copy1 === obj);// false
console.log(copy1.info === obj.info);// true
console.log(copy1.siteName);// 張培躍

// 2. Object.assign實現
let copy2 = Object.assign({},obj);
console.log(copy2 === obj);// false
console.log(copy2.info === obj.info);// true
console.log(copy2.siteName);// 張培躍

// 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);// 張培躍

原數組

const arr =[{
    siteName:"張培躍",
    info:{
        age:18,
        props:["陽光","帥氣"]
    }
}]
// 1. ...實現
let copy1 = {...arr};
console.log(copy1 === arr);// false
console.log(copy1[0].info === arr[0].info);// true
console.log(copy1[0].siteName);// 張培躍

// 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);// 張培躍

// 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);// 張培躍

// 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);// 張培躍

2、深拷貝實現

• JOSN.stringify()/JSON.parse()

const obj = {
    siteName:"張培躍",
    info:{
        age:18,
        props:["陽光","帥氣"]
    }
}
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);// 張培躍

• 遞歸拷貝

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:"張培躍",
    info:{
        age:18,
        props:["陽光","帥氣"]
    }
}
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);// 張培躍

—————END—————
喜歡本文的朋友們，歡迎關注公衆號 張培躍，收看更多精彩內容！！！公衆號回覆 電子書 ，送你經典電子書籍！