JS深拷貝的實現

xinhaip 發布于2019-08-23 15:36 / 626人閱讀

摘要：深拷貝和淺拷貝的區別深拷貝在于引用類型的時候，淺拷貝只復制地址值，實際上還是指向同一堆內存中的數據，深拷貝則是重新創建了一個相同的數據，二者指向的堆內存的地址值是不同的。深拷貝的實現通過遞歸方式實現深拷貝通過的方式實現通過實現

基本類型和引用類型

學習js的深拷貝和淺拷貝首先要了解js的基本類型和引用類型。

基本類型

基本類型的數據存放在棧內存中，復制的時候是值傳遞，直接把5賦值給了number2

var number1 = 5;
var number2 = number1;

引用類型

引用類型的數據存放在堆內存中，棧內存中只存放具體的地址值，把object1賦值給object2的時候是把object1的地址值賦值給了object2，這個時候兩個對象同時指向堆內存中的同一數據。

var object1 = new Object();
var object2 = object1;

深拷貝和淺拷貝的區別

深拷貝在于引用類型的時候，淺拷貝只復制地址值，實際上還是指向同一堆內存中的數據，深拷貝則是重新創建了一個相同的數據，二者指向的堆內存的地址值是不同的。這個時候修改賦值前的變量數據不會影響賦值后的變量。

深拷貝的實現

通過遞歸方式實現深拷貝

function deepClone(obj) {
    var target = {};
    for(var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            if (typeof obj[key] === "object") {
                target[key] = deepClone(obj[key]); 
            } else {
                target[key] = obj[key];
            }
        }
    }
    return target;
}

通過json的方式實現

function (obj) {
    let tmp = JSON.stringify(obj); 
    let result = JSON.parse(tmp); 
    return result;
}

通過Object.create()實現

function deepCopy(obj) {
  var copy = Object.create(Object.getPrototypeOf(obj));
  var propNames = Object.getOwnPropertyNames(obj);
  
  propNames.forEach(function(name) {
    var desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  });
  
  return copy;
}

var obj1 = { a: 1, b: {bc: 50, dc: 100, be: {bea: 1}} };
var obj2 = deepCopy(obj1);
console.log(obj2)
obj1.a = 20;
console.log(obj1)
console.log(obj2)
//Object {a: 1, b: Object}
//Object {a: 20, b: Object}
//Object {a: 1, b: Object}

云服務器 GPU云服務器深拷貝深拷貝和淺拷貝 javascript深拷貝 java實現文件拷貝

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

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

一篇文章徹底說清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每日一題：深拷貝與淺拷貝的區別？如何實現一個深拷貝

摘要：期深拷貝與淺拷貝的區別如何實現一個深拷貝在回答這個問題前，我們先來回顧一下中兩大數據類型基本類型引用類型基本類型基本類型就是值類型存放在棧內存中的簡單數據段，數據大小確定，內存空間大小可以分配引用類型引用類型存放在堆內存中的對象，變量實際保 20190311期深拷貝與淺拷貝的區別？如何實現一個深拷貝在回答這個問題前，我們先來回顧一下ＪＳ中兩大數據類型基本類型 Undefined...

MiracleWong 2019-08-26 13:37 評論0 收藏0
淺探js深拷貝和淺拷貝

摘要：接下來就讓我們更細致的探究中的深淺拷貝。總結以上對深拷貝和淺拷貝做了簡單的介紹，在深拷貝的實現上也只介紹了最簡單的實現形式，并未考慮復雜情況以及相應優化，想要對深拷貝有更深入的了解，需要大家花時間去深入研究，或者可以關注我后續文章的動態。對象和數組的拷貝對我來說一直都是一個比較模糊的概念，一直有點一知半解，但是在實際工作中又偶爾會涉及到，有時候還會一不小心掉坑里，不知道大家有沒有同樣...

habren 2019-08-23 13:01 評論0 收藏0
深入理解JS深淺拷貝

摘要：深拷貝相比于淺拷貝速度較慢并且花銷較大。所以在賦值完成后，在棧內存就有兩個指針指向堆內存同一個數據。結果如下擴展運算符只能對一層進行深拷貝如果拷貝的層數超過了一層的話，那么就會進行淺拷貝那么我們可以看到和展開原算符對于深淺拷貝的結果是一樣。 JS中數據類型基本數據類型： undefined、null、Boolean、Number、String和Symbol(ES6) 引用數據類型：...

JackJiang 2019-08-23 14:31 評論0 收藏0