js中的賦值淺拷貝和深拷貝詳細(xì)

更新時間：2021年09月28日 16:29:26 作者：用戶bPcUQ3V

js數(shù)據(jù)類型主要分基本數(shù)據(jù)類型和引用數(shù)據(jù)類型。前者包括Number,String等，后者主要是Object,因此以下會針對不同的數(shù)據(jù)類型來分析,需要的朋友可以參考一下

1、js內(nèi)存

js內(nèi)存，或者說大部分語言的內(nèi)存都分為棧和堆?；緮?shù)據(jù)類型的變量值分配在棧上，引用數(shù)據(jù)類型的變量值分配在堆上，棧中只是存儲具體堆中對象的地址。

2、賦值

對于基本數(shù)據(jù)類型，賦值操作是拷貝，即新舊變量不會相互影響。

var a = 1;
var b = a;
b = 2;
console.log(b); // 2

對于引用數(shù)據(jù)類型，賦值操作只是在棧中新增一個指向堆中對象的變量，即復(fù)制引用地址。新舊變量之間會互相影響，即在新變量上改變對象值，舊變量對應(yīng)值也會改變。

var a = {
    name: "mike"
};
var b = a;
b.name = "jack";
console.log(a); // {name: "jack"}

3、淺拷貝

對于基本數(shù)據(jù)類型和不具有嵌套對象的數(shù)據(jù)，均是拷貝操作，新舊變量之間不會相互影響。

var a = {
    name: "mike"
};
var b = {};
b.name = a.name;
b.name = "jack";
console.log(a) // {name: "mike"}

但是對于具有嵌套對象的數(shù)據(jù)，淺拷貝只拷貝第一層對象，深層次的值仍然是復(fù)制引用地址。

var a = {
    name: "mike",
    language: {
        first: "english",
        second: "chinese"
    }
};
var b = {};
b.name = a.name;
b.name = "jack";
b.language = a.language;
b.language.first = "japanese"
console.log(a) // { language : {first: "japanese", second: "chinese"}}

js實(shí)現(xiàn)淺拷貝，思想：遍歷target的每個屬性，將起屬性名和值賦值給新變量。
如果你明白了賦值的含義，那么在代碼的第四行，當(dāng)此時的target[key]的值是對象的時候，通過賦值賦予新變量，本質(zhì)上是復(fù)制引用數(shù)據(jù)類型在堆中的地址，就不難理解為什么淺拷貝對于是否是嵌套對象的有不同結(jié)果了。

function shallowCopy(target) {
    let result = {};
    for (const key in target) {
        result[key] = target[key];
    }
    return result;
}

4、深拷貝

深拷貝是完完全全的拷貝，新舊變量之間不會相互影響。
對于參數(shù)是否是對象有不同的處理方法，如果是對象，對于對象的每個屬性和值賦值然后遞歸處理; 否則直接返回。

function clone(target) {
    if (typeof target === "object") {
        //判斷是否是數(shù)組
        let result = Array.isArray(target)? [] : {};
        for (const key in target) {
            result[key] = clone(target[key]);
        }
        return  result;
    } else {
        return target;
    }
}

到此這篇關(guān)于js中的賦值淺拷貝和深拷貝詳細(xì)的文章就介紹到這了,更多相關(guān)js中的賦值淺拷貝和深拷貝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: