手擼一個JS深拷貝函數

EscapedDog 發布于2019-08-26 18:36 / 1239人閱讀

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

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

例子

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}

因為JS對于對象的賦值使用的是淺拷貝，其中一個實例變量的賦值會影響到所有指向該對象的變量

解決方案

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

Object.assign，缺點：只有第一級深拷貝，子級對象依舊是淺拷貝，例子如下：

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"}}

　手動實現原理

遍歷待拷貝對象

判斷當前值類型，如果是object類型且不是null(null也是object)，則遞歸調用拷貝函數

如果當前值類型時null或者非object類型，直接return，退出本次遞歸

編碼實現

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;
}

驗證一下：

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"}}

更多精彩內容盡在我的博客一鍵直達

GPU云服務器云服務器 js如何清除一個函數深拷貝深拷貝和淺拷貝 javascript深拷貝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110283.html

2019前端基礎面試秘籍（更新于5.13）

摘要：防抖函數分為非立即執行版和立即執行版。返回值如果有元素被刪除返回包含被刪除項目的新數組。返回值的新長度。顛倒數組中元素的順序語法參數無返回值顛倒后的新數組。如果為負值，表示倒數。停止填充位置默認為返回值返回當前數組。77777777777777777777777777777777777777777777777777777777777777777777777777 showImg(https:...

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

摘要：一篇文章徹底說清的深拷貝淺拷貝這篇文章的受眾第一類業務需要急需知道如何深拷貝對象的開發者。這篇文章分享的目的更多還是希望用一篇文章整理清楚深淺拷貝的含義遞歸實現思路以及小伙伴們如果使用了這種黑科技一定要清楚這樣寫的優缺點。一篇文章徹底說清JS的深拷貝and淺拷貝這篇文章的受眾第一類,業務需要,急需知道如何深拷貝JS對象的開發者。第二類,希望扎實JS基礎,將來好去面試官前秀操作...

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

摘要：一篇文章徹底說清的深拷貝淺拷貝這篇文章的受眾第一類業務需要急需知道如何深拷貝對象的開發者。這篇文章分享的目的更多還是希望用一篇文章整理清楚深淺拷貝的含義遞歸實現思路以及小伙伴們如果使用了這種黑科技一定要清楚這樣寫的優缺點。一篇文章徹底說清JS的深拷貝and淺拷貝這篇文章的受眾第一類,業務需要,急需知道如何深拷貝JS對象的開發者。第二類,希望扎實JS基礎,將來好去面試官前秀操作...

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

摘要：一篇文章徹底說清的深拷貝淺拷貝這篇文章的受眾第一類業務需要急需知道如何深拷貝對象的開發者。這篇文章分享的目的更多還是希望用一篇文章整理清楚深淺拷貝的含義遞歸實現思路以及小伙伴們如果使用了這種黑科技一定要清楚這樣寫的優缺點。一篇文章徹底說清JS的深拷貝and淺拷貝這篇文章的受眾第一類,業務需要,急需知道如何深拷貝JS對象的開發者。第二類,希望扎實JS基礎,將來好去面試官前秀操作...

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

摘要：舉個例子來說明一下什么是淺拷貝什么是深拷貝淺拷貝得出的結果可以看出是淺拷貝非對象的屬性值一個改變不影響另一個的值對象屬性是引用賦值所以一個改變會影響另一個的改變出現這種情況的本質是對象是按引用賦值的深拷貝指的是拷貝一個對象，改變一個值不影響舉個例子來說明一下什么是淺拷貝什么是深拷貝淺拷貝 var x = { a: 1, b: {f: { g: 1 ...

lastSeries 2019-08-21 16:43 評論0 收藏0