国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

深入理解JS深淺拷貝

JackJiang / 1806人閱讀

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

JS中數(shù)據(jù)類型

基本數(shù)據(jù)類型： undefined、null、Boolean、Number、String和Symbol(ES6)

引用數(shù)據(jù)類型： Object(Array, Date, RegExp, Function)

深淺拷貝

深淺拷貝只是針對引用類型的，因為引用類型是存放在堆內(nèi)存中，在棧地址有一個或者多個地址來指向推內(nèi)存的某一數(shù)據(jù)

淺拷貝：

被復(fù)制對象的所有變量都含有與原來的對象相同的值，而所有的對其他對象的引用仍然指向原來的對象。

淺拷貝僅僅復(fù)制所考慮的對象，而不復(fù)制它所引用的對象，如果你修改了“副本”的值，那么原來的對象也會被修改

深拷貝：

深拷貝是一個整個獨立的對象拷貝，深拷貝會拷貝所有的屬性,并拷貝屬性指向的動態(tài)分配的內(nèi)存。當(dāng)對象和它所引用的對象一起拷貝時即發(fā)生深拷貝。深拷貝相比于淺拷貝速度較慢并且花銷較大。

深拷貝把要復(fù)制的對象所引用的對象都復(fù)制了一遍。如果你修改了“副本”的值，那么原來的對象不會被修改，兩者是相互獨立的。

用例子看深淺拷貝 賦值實現(xiàn)淺拷貝 
let arr = [22, 44, 66, 88];
let co = arr;
co[0] = 11;
console.log(arr, co);

結(jié)果如圖：

我們本來想把 arr 賦值給 co ，當(dāng)我們修改co數(shù)組中第一個元素時，卻發(fā)現(xiàn)了原始數(shù)組arr發(fā)生了改變
很顯然，這就是一個淺拷貝的例子

原理：
對于引用類型，賦值操作符只是把存放在棧內(nèi)容中的指針賦值給另外一個變量。
所以在賦值完成后，在棧內(nèi)存就有兩個指針指向堆內(nèi)存同一個數(shù)據(jù)。
也就可以說兩個變量在共用著同一個數(shù)據(jù)，這就是淺拷貝。
JSON實現(xiàn)深拷貝 
let arr = [22, 44, 66, 88];
let jso = JSON.parse(JSON.stringify(arr));
jso[0] = 11;
console.log(arr, jso);

結(jié)果如圖：

對比之前賦值的結(jié)果，我們發(fā)現(xiàn)原來的數(shù)組arr并沒有被改變，可以說兩者是相互獨立的
很顯然，這就是一個深拷貝的例子

原理：
JSON.parse() 方法用于將一個 JSON 字符串轉(zhuǎn)換為對象。
JSON.stringify() 方法用于將 JavaScript 值（通常為對象或數(shù)組）轉(zhuǎn)換為 JSON 字符串。
在JSON.stringify()完成后，對象就轉(zhuǎn)為了字符串，也就可以說實實在在的復(fù)制了一個值，不存在引用之說。
再利用JSON.parse()轉(zhuǎn)為對象，這樣達到深拷貝的目的

JSON實現(xiàn)深拷貝的缺陷：
來看下面例子：

let obj = {
    nul: null,
    und: undefined,
    sym: Symbol("sym"),
    str: "str",
    bol: true,
    num: 45,
    arr: [1, 4],
    reg: /[0-9]/,
    dat: new Date(),
    fun: function() {},  
}
console.log(JSON.parse(JSON.stringify(obj)))

結(jié)果如圖：

我們可以發(fā)現(xiàn)有些屬性被忽略了：

undefined

symbol

function

可以看得出來JSON實現(xiàn)深拷貝也有不足之處

ES6新特性實現(xiàn)拷貝 Object.assign()

Object.assign方法用于對象的合并，將源對象（source）的所有可枚舉屬性，復(fù)制到目標(biāo)對象（target）。
Object.assign(target, ...sources)
target目標(biāo)對象。 sources源對象。 返回的是目標(biāo)對象

let obj = {
    a: {
        a1: "a1"
    },
    b: "b"
}
let ass = Object.assign({}, obj);
ass.a.a1 = "aaa";
aconsole.log(obj, ass);

我們看下結(jié)果：

我們可以看到a1的值被改變，而b的值沒有被改變，說明了：

Obejct.assign()只能對一層進行深拷貝 
如果拷貝的層數(shù)超過了一層的話，那么就會進行淺拷貝
展開運算符(...)

對象的擴展運算符（...）用于取出參數(shù)對象的所有可遍歷屬性，拷貝到當(dāng)前對象之中。

let obj = {
    a: {
        a1: "a1"
    },
    b: "b"
}
let ass = {...obj};
ass.a.a1 = "aaa";
ass.b = "bbb"

結(jié)果如下：

擴展運算符只能對一層進行深拷貝 
如果拷貝的層數(shù)超過了一層的話，那么就會進行淺拷貝

那么我們可以看到Object.assign(）和展開原算符對于深淺拷貝的結(jié)果是一樣。
如果拷貝的層數(shù)超過了一層的話，那么就會進行淺拷貝
所以要慎用這兩個來進行拷貝!!!

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100714.html

相關(guān)文章

  • 深入理解 Javascript 之 JS的深淺拷貝

    摘要：動手實現(xiàn)深拷貝利遞歸來實現(xiàn)對對象或數(shù)組的深拷貝。遞歸思路對屬性中所有引用類型的值進行遍歷，直到是基本類型值為止。深拷貝只對對象自有屬性進行拷貝測試數(shù)據(jù)拷貝方式其實也是一種繼承的方式，當(dāng)然繼承還是有其他方法的感謝支持 深淺拷貝 基本類型 & 引用類型 ECMAScript中的數(shù)據(jù)類型可分為兩種： 基本類型：undefined,null,Boolean,String,Number,Symb...

    Tikitoo 評論0 收藏0

  • js深淺復(fù)制

    摘要：總結(jié)綜上所述，數(shù)組的深拷貝比較簡單，方法沒有什么爭議，對象的深拷貝，比較好的方法是用的方法實現(xiàn)，或者遞歸實現(xiàn)，比較簡單的深復(fù)制可以使用實現(xiàn)參考資料知乎中的深拷貝和淺拷貝深入剖析的深復(fù)制 深淺復(fù)制對比 因為JavaScript存儲對象都是存地址的，所以淺復(fù)制會導(dǎo)致 obj 和obj1 指向同一塊內(nèi)存地址。我的理解是，這有點類似數(shù)據(jù)雙向綁定，改變了其中一方的內(nèi)容，都是在原來的內(nèi)存基礎(chǔ)上做...

    Apollo 評論0 收藏0

  • 一篇文章徹底搞懂JS深淺拷貝和const

    摘要：圖數(shù)據(jù)類型圖引用類型深淺拷貝問題不知道什么是深拷貝和淺拷貝的請先去并在調(diào)試臺自己操作一下，這篇文章只會說明為何中會有這種問題。所以有的時候我們?yōu)榱吮苊鉁\拷貝，會用一些方式實現(xiàn)深拷貝。 首先要了解的js基礎(chǔ) 基本數(shù)據(jù)類型：Object、undefined、null、Boolean、Number、String、Symbol (ES6新加) Object包括： Array 、Date 、R...

    MyFaith 評論0 收藏0

  • 復(fù)習(xí)Javascript專題（四）：js中的深淺拷貝

    摘要：基本數(shù)據(jù)類型的復(fù)制很簡單，就是賦值操作，所以深淺拷貝也是針對，這類引用類型數(shù)據(jù)。它會拋棄對象的。另外，查資料過程中還看到這么一個詞結(jié)構(gòu)化克隆算法還有這一篇資料也有參考，也寫得比較詳細了的深淺拷貝 基本數(shù)據(jù)類型的復(fù)制很簡單，就是賦值操作，所以深淺拷貝也是針對Object，Array這類引用類型數(shù)據(jù)。 淺拷貝對于字符串來說，是值的復(fù)制，而對于對象來說則是對對象地址的復(fù)制；而深拷貝的話，它不...

    MobService 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<