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

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

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

基本類(lèi)型和引用類(lèi)型

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

基本類(lèi)型

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

var number1 = 5;
var number2 = number1;

引用類(lèi)型

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

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

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

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

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

通過(guò)遞歸方式實(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;
}

通過(guò)json的方式實(shí)現(xiàn)

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

通過(guò)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}

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102316.html

相關(guān)文章

一篇文章徹底說(shuō)清JS的深拷貝/淺拷貝

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

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

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

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

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

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

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

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

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

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

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

JackJiang 2019-08-23 14:31 評(píng)論0 收藏0