手?jǐn)]一個(gè)JS深拷貝函數(shù)

EscapedDog 發(fā)布于2019-08-26 18:36 / 1290人閱讀

摘要：深拷貝概念并不新鮮，但是真正要真正理解原理還是有點(diǎn)難度的。這也是語(yǔ)言精粹之一吧。

JS深拷貝概念并不新鮮，但是真正要真正理解原理還是有點(diǎn)難度的。這也是JS語(yǔ)言精粹之一吧。

例子

let a = {
    name: "demo",
    age: 18
};

let b = a;
b.name = "demo1";

console.log(a); // 輸出 {name: "demo1", age: 18}
console.log(b); // 輸出 {name: "demo1", age: 18}

因?yàn)镴S對(duì)于對(duì)象的賦值使用的是淺拷貝，其中一個(gè)實(shí)例變量的賦值會(huì)影響到所有指向該對(duì)象的變量

解決方案

粗暴好使的 JSON.parse(JSON.stringify)，缺點(diǎn): 丟失成員函數(shù)

Object.assign，缺點(diǎn)：只有第一級(jí)深拷貝，子級(jí)對(duì)象依舊是淺拷貝，例子如下：

let a = {name:{demo:"1"}};
let b = Object.assign({}, a);
console.log(a); // 輸出 {name:{demo:"1"}}
console.log(b); // 輸出 {name:{demo:"1"}}
b.name.demo = "2";
console.log(a); // 輸出 {name:{demo:"2"}}
console.log(b); // 輸出 {name:{demo:"2"}}

　手動(dòng)實(shí)現(xiàn)原理

遍歷待拷貝對(duì)象

判斷當(dāng)前值類型，如果是object類型且不是null(null也是object)，則遞歸調(diào)用拷貝函數(shù)

如果當(dāng)前值類型時(shí)null或者非object類型，直接return，退出本次遞歸

編碼實(shí)現(xiàn)

function deepCopy(obj) {
    let result = obj;
    if(typeof obj === "object" && obj !== null) {
        result = Object.prototype.toString.call(obj) === "[object Array]" ? []: {};
        for(let prop in obj) {
            result[prop] = deepCopy(obj[prop]);
        }
    }
    return result;
}

驗(yàn)證一下：

let a = {name:{demo:"1"}};
let b = deepCopy(a);
console.log(a); // 輸出 {name:{demo:"1"}}
console.log(b); // 輸出 {name:{demo:"1"}}
b.name.demo = "2";
console.log(a); // 輸出 {name:{demo:"1"}}
console.log(b); // 輸出 {name:{demo:"2"}}

更多精彩內(nèi)容盡在我的博客一鍵直達(dá)

GPU云服務(wù)器云服務(wù)器 js如何清除一個(gè)函數(shù) 深拷貝深拷貝和淺拷貝 javascript深拷貝

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/110283.html

相關(guān)文章

2019前端基礎(chǔ)面試秘籍（更新于5.13）

摘要：防抖函數(shù)分為非立即執(zhí)行版和立即執(zhí)行版。返回值如果有元素被刪除返回包含被刪除項(xiàng)目的新數(shù)組。返回值的新長(zhǎng)度。顛倒數(shù)組中元素的順序語(yǔ)法參數(shù)無(wú)返回值顛倒后的新數(shù)組。如果為負(fù)值，表示倒數(shù)。停止填充位置默認(rèn)為返回值返回當(dāng)前數(shù)組。77777777777777777777777777777777777777777777777777777777777777777777777777 showImg(https:...

levy9527 2019-05-23 17:35 評(píng)論0 收藏0
一篇文章徹底說(shuō)清JS的深拷貝/淺拷貝

摘要：一篇文章徹底說(shuō)清的深拷貝淺拷貝這篇文章的受眾第一類業(yè)務(wù)需要急需知道如何深拷貝對(duì)象的開發(fā)者。這篇文章分享的目的更多還是希望用一篇文章整理清楚深淺拷貝的含義遞歸實(shí)現(xiàn)思路以及小伙伴們?nèi)绻褂昧诉@種黑科技一定要清楚這樣寫的優(yōu)缺點(diǎn)。一篇文章徹底說(shuō)清JS的深拷貝and淺拷貝這篇文章的受眾第一類,業(yè)務(wù)需要,急需知道如何深拷貝JS對(duì)象的開發(fā)者。第二類,希望扎實(shí)JS基礎(chǔ),將來(lái)好去面試官前秀操作...

J4ck_Chan 2019-08-01 18:22 評(píng)論0 收藏0
一篇文章徹底說(shuō)清JS的深拷貝/淺拷貝

摘要：一篇文章徹底說(shuō)清的深拷貝淺拷貝這篇文章的受眾第一類業(yè)務(wù)需要急需知道如何深拷貝對(duì)象的開發(fā)者。這篇文章分享的目的更多還是希望用一篇文章整理清楚深淺拷貝的含義遞歸實(shí)現(xiàn)思路以及小伙伴們?nèi)绻褂昧诉@種黑科技一定要清楚這樣寫的優(yōu)缺點(diǎn)。一篇文章徹底說(shuō)清JS的深拷貝and淺拷貝這篇文章的受眾第一類,業(yè)務(wù)需要,急需知道如何深拷貝JS對(duì)象的開發(fā)者。第二類,希望扎實(shí)JS基礎(chǔ),將來(lái)好去面試官前秀操作...

lakeside 2019-08-22 13:48 評(píng)論0 收藏0
一篇文章徹底說(shuō)清JS的深拷貝/淺拷貝

摘要：一篇文章徹底說(shuō)清的深拷貝淺拷貝這篇文章的受眾第一類業(yè)務(wù)需要急需知道如何深拷貝對(duì)象的開發(fā)者。這篇文章分享的目的更多還是希望用一篇文章整理清楚深淺拷貝的含義遞歸實(shí)現(xiàn)思路以及小伙伴們?nèi)绻褂昧诉@種黑科技一定要清楚這樣寫的優(yōu)缺點(diǎn)。一篇文章徹底說(shuō)清JS的深拷貝and淺拷貝這篇文章的受眾第一類,業(yè)務(wù)需要,急需知道如何深拷貝JS對(duì)象的開發(fā)者。第二類,希望扎實(shí)JS基礎(chǔ),將來(lái)好去面試官前秀操作...

big_cat 2019-08-29 14:12 評(píng)論0 收藏0
js中的淺拷貝深拷貝深入理解

摘要：舉個(gè)例子來(lái)說(shuō)明一下什么是淺拷貝什么是深拷貝淺拷貝得出的結(jié)果可以看出是淺拷貝非對(duì)象的屬性值一個(gè)改變不影響另一個(gè)的值對(duì)象屬性是引用賦值所以一個(gè)改變會(huì)影響另一個(gè)的改變出現(xiàn)這種情況的本質(zhì)是對(duì)象是按引用賦值的深拷貝指的是拷貝一個(gè)對(duì)象，改變一個(gè)值不影響舉個(gè)例子來(lái)說(shuō)明一下什么是淺拷貝什么是深拷貝淺拷貝 var x = { a: 1, b: {f: { g: 1 ...

lastSeries 2019-08-21 16:43 評(píng)論0 收藏0