JS深拷貝的實(shí)現(xiàn)

xinhaip 發(fā)布于2019-08-23 15:36 / 638人閱讀

摘要：深拷貝和淺拷貝的區(qū)別深拷貝在于引用類型的時候，淺拷貝只復(fù)制地址值，實(shí)際上還是指向同一堆內(nèi)存中的數(shù)據(jù)，深拷貝則是重新創(chuàng)建了一個相同的數(shù)據(jù)，二者指向的堆內(nèi)存的地址值是不同的。深拷貝的實(shí)現(xiàn)通過遞歸方式實(shí)現(xiàn)深拷貝通過的方式實(shí)現(xiàn)通過實(shí)現(xiàn)

基本類型和引用類型

學(xué)習(xí)js的深拷貝和淺拷貝首先要了解js的基本類型和引用類型。

基本類型

基本類型的數(shù)據(jù)存放在棧內(nèi)存中，復(fù)制的時候是值傳遞，直接把5賦值給了number2

var number1 = 5;
var number2 = number1;

引用類型

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

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

深拷貝和淺拷貝的區(qū)別

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

深拷貝的實(shí)現(xiàn)

通過遞歸方式實(shí)現(xiàn)深拷貝

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的方式實(shí)現(xiàn)

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

通過Object.create()實(shí)現(xiàn)

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}

云服務(wù)器 GPU云服務(wù)器深拷貝深拷貝和淺拷貝 javascript深拷貝 java實(shí)現(xiàn)文件拷貝

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102316.html

相關(guān)文章

一篇文章徹底說清JS的深拷貝/淺拷貝

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

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

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

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

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

big_cat 2019-08-29 14:12 評論0 收藏0
JS每日一題：深拷貝與淺拷貝的區(qū)別？如何實(shí)現(xiàn)一個深拷貝

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

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

摘要：接下來就讓我們更細(xì)致的探究中的深淺拷貝?？偨Y(jié)以上對深拷貝和淺拷貝做了簡單的介紹，在深拷貝的實(shí)現(xiàn)上也只介紹了最簡單的實(shí)現(xiàn)形式，并未考慮復(fù)雜情況以及相應(yīng)優(yōu)化，想要對深拷貝有更深入的了解，需要大家花時間去深入研究，或者可以關(guān)注我后續(xù)文章的動態(tài)。對象和數(shù)組的拷貝對我來說一直都是一個比較模糊的概念，一直有點(diǎn)一知半解，但是在實(shí)際工作中又偶爾會涉及到，有時候還會一不小心掉坑里，不知道大家有沒有同樣...

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

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

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