JS中的深拷貝與淺拷貝

ARGUS 發(fā)布于2019-08-26 12:13 / 1865人閱讀

摘要：中的深拷貝與淺拷貝說(shuō)到深淺拷貝的時(shí)候就不得不說(shuō)一下中的變量類型了基本類型按值存放在棧內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段可以直接訪問(wèn)引用類型存放在堆內(nèi)存中的對(duì)象變量保存的是一個(gè)指向存放數(shù)據(jù)位置的指針訪問(wèn)引用類型的值時(shí)首先從棧中獲取到存放該數(shù)據(jù)位置的指針然后再

JS中的深拷貝與淺拷貝

說(shuō)到深淺拷貝的時(shí)候就不得不說(shuō)一下JS中的變量類型了:

基本類型: undefined、null、boolean、number、string, 按值存放在棧內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段, 可以直接訪問(wèn).

引用類型: 存放在堆內(nèi)存中的對(duì)象, 變量保存的是一個(gè)指向存放數(shù)據(jù)位置的指針. 訪問(wèn)引用類型(object, array)的值時(shí), 首先從棧中獲取到存放該數(shù)據(jù)位置的指針, 然后再?gòu)亩阎腥〉脭?shù)據(jù).

__淺拷貝__: 淺拷貝是拷貝引用, 拷貝后的引用都是指向同一個(gè)存放數(shù)據(jù)位置的指針, 無(wú)論操作哪一個(gè)都是在操作指向在堆中的那一個(gè)數(shù)據(jù), 所以雙方都會(huì)有影響.

__深拷貝__: 在堆中重新分配內(nèi)存, 將源對(duì)象的各個(gè)屬性復(fù)制進(jìn)去. 對(duì)拷貝對(duì)象和源對(duì)象各自操作互不影響.

淺拷貝

淺拷貝分兩種情況, 拷貝源對(duì)象的引用和源對(duì)象拷貝實(shí)例, 但其屬性拷貝引用.
拷貝源的引用
eg:

let obj1 = {
    a: 1
};
let obj2 = obj1;

console.log(obj1 === obj2); // true

obj1.a = 2;

console.log(obj2.a); // 2

源對(duì)象拷貝實(shí)例, 其屬性對(duì)象拷貝引用
外層源對(duì)象是拷貝實(shí)例, 但是如果源對(duì)象的屬性元素為復(fù)雜數(shù)據(jù)類型時(shí), 內(nèi)層元素拷貝引用. 對(duì)源對(duì)象操作時(shí)不影響拷貝對(duì)象. 但對(duì)其屬性操作時(shí), 會(huì)改變拷貝對(duì)象屬性的值. 常用方法: Array.prototype.slice(), Array.prototype.concat(), jQuery的$.extend({}, obj), Object.assign()等. eg:

let obj1 = {
    a: 1,
    b: [1, 2, 3],
    c: {
        c1: 1
    }
};

let obj2 = Object.assign({}, obj1);
obj2.a = 2;
obj2.b[0] = 2;
obj2.c.c1 = 10
console.log(obj1);
/**
輸出結(jié)果:
{
    a: 1, 
    b: [2, 2, 3],
    c: {
        c1: 10
    }
}
**/

這上面的例子中obj1為源對(duì)象, obj2為拷貝對(duì)象. 拷貝后修改拷貝對(duì)象的屬性a沒(méi)有影響到源對(duì)象, 修改拷貝對(duì)象的復(fù)雜數(shù)據(jù)類型屬性b, c后影響到源對(duì)象.

深拷貝

深拷貝過(guò)后, 源對(duì)象、拷貝對(duì)象包括其內(nèi)部元素(包括復(fù)雜類型元素)都不互相干擾. 常見方法有JSON.parse(JSON.stringify(obj)), jQuery的$.extend(true, {}, obj), lodash的_.cloneDeep和_clone(value, true). eg:

let obj1 = {
    a: 1,
    b: [1, 2, 3],
    c: {
        c1: 1
    }
};

let obj2 = JSON.parse(JSON.stringify(obj1));

obj2.a = 2;
obj2.b[0] = 2;
obj2.c.c1 = 10
console.log(obj1);
/**
輸出結(jié)果:
{
    a: 1, 
    b: [1, 2, 3],
    c: {
        c1: 1
    }
}
**/

最后輸出源對(duì)象(obj1) 得到結(jié)果是源對(duì)象未變化.
深拷貝就是增加一個(gè)指針(棧內(nèi)存)申請(qǐng)一個(gè)新的堆內(nèi)存, 并讓這個(gè)指針指向這個(gè)堆內(nèi)存. 當(dāng)我們需要復(fù)制源對(duì)象而又不能修改源對(duì)象的時(shí)候, 深拷貝就是你想要的.

那么是時(shí)候自己實(shí)現(xiàn)一個(gè)深拷貝方法了:

function deepclone(sObj, cObj) {
    cObj = cObj || (Array.isArray(sObj) ? [] : {});

    for(let i in sObj) {
        if(typeof sObj[i] === "object") {
            cObj[i] = Array.isArray(sObj[i]) ? [] : {};
            deepclone(sObj[i], cObj[i])
        } else {
            cObj[i] = sObj[i]
        }
    };

    return cObj;
}

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ARGUS

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

大部分程序員都記不住的注解，Idea 云筆記卻能輕松記住

閱讀 3570·2021-11-15 11:38
ForwardWeb：美國(guó)/新加坡VPS限時(shí)五折優(yōu)惠，低至$12美元/年起

閱讀 910·2021-11-08 13:27
Linux CentOS 6.8一鍵快速安裝vncserver服務(wù)配置遠(yuǎn)程桌面

閱讀 2337·2021-07-29 14:50
編碼規(guī)范-css.md

閱讀 3050·2019-08-29 13:06
CSS篇之inline-block

閱讀 894·2019-08-29 11:22
document.write知多少

閱讀 2469·2019-08-29 11:04
CSS 單位

閱讀 3571·2019-08-28 18:23
jQuery源碼解析之width()

閱讀 963·2019-08-26 13:46

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JS中的深拷貝與淺拷貝

相關(guān)文章