解構(gòu)賦值是深拷貝嗎？

William_Sang 發(fā)布于2019-08-23 17:00 / 759人閱讀

摘要：最近在使用想到一個(gè)問(wèn)題，里常用的一種語(yǔ)法是這樣的通過(guò)解構(gòu)賦值保留了里未修改的部分，并覆蓋修改的部分，那么現(xiàn)在問(wèn)題來(lái)了，這里的新對(duì)象通過(guò)解構(gòu)得來(lái)的，是否是原來(lái)屬性的引用賦值呢我們知道，如下情況這里是的一個(gè)引用賦值。比如上例中希望可以幫助大家。

最近在使用Redux想到一個(gè)問(wèn)題，Redux里常用的一種語(yǔ)法是這樣的：

setSth(state, { payload }) {
    const { newthing} = payload;
    return {
        ...state,
        newthing
    }
}

Redux通過(guò)解構(gòu)賦值...state,保留了state里未修改的部分，并覆蓋修改的部分，那么現(xiàn)在問(wèn)題來(lái)了，這里的新對(duì)象通過(guò)解構(gòu)得來(lái)的...state，是否是原來(lái)屬性的引用賦值呢？

我們知道，如下情況：

let state = {a: 1, b: 2}
let state2 = state;
state2.a = 5;
// state.a === 5 => true

這里state2是state的一個(gè)引用賦值。
那么使用解構(gòu)賦值生成一個(gè)新對(duì)象會(huì)如何呢？

let state = {a: 1, b: 2}
let state2 = { ...state }
state2.a = 5;
// state.a === 1 => true

通過(guò)實(shí)驗(yàn)可見(jiàn)，state2屬性的修改并沒(méi)有影響到state，所以這是一份拷貝，那么問(wèn)題又來(lái)了，這個(gè)拷貝是只有一層的淺拷貝，還是遞歸進(jìn)去的深拷貝呢，我直覺(jué)地認(rèn)為是深拷貝，于是又做了一個(gè)實(shí)驗(yàn)：

let state = {a: {a1: 1, a2: 2}, b: 2}
let state2 = { ...state }
state2.a.a1 = 5;
// state.a.a1 === 5 => true

事實(shí)證明我的直覺(jué)錯(cuò)了，解構(gòu)復(fù)制到全新對(duì)象里只是淺拷貝，對(duì)象里屬性的屬性還是對(duì)原來(lái)對(duì)象里屬性的屬性的一個(gè)引用,因?yàn)榻鈽?gòu)賦值可以生成一份淺拷貝，其實(shí)我們針對(duì)已知結(jié)構(gòu)的對(duì)象也可以全部使用這個(gè)方法實(shí)現(xiàn)自己想要的拷貝。比如上例中：

let state = {a: {a1: 1, a2: 2}, b: 2}
let state2 = { ...state, a: { ...state.a } }

希望可以幫助大家。

云服務(wù)器 GPU云服務(wù)器解構(gòu)賦值 linux 拷貝usb數(shù)據(jù)嗎對(duì)象解構(gòu) 解構(gòu)函數(shù)

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

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

相關(guān)文章

es6中容易忽視的細(xì)節(jié)（二）

摘要：變量的解構(gòu)賦值結(jié)構(gòu)賦值允許使用默認(rèn)值內(nèi)部使用嚴(yán)格相等運(yùn)算符，判斷一個(gè)位置是否有值。所以，只有當(dāng)一個(gè)數(shù)組成員嚴(yán)格等于，默認(rèn)值才會(huì)生效。這樣的層層判斷非常麻煩，因此現(xiàn)在有一個(gè)提案，引入了傳導(dǎo)運(yùn)算符，簡(jiǎn)化上面的寫(xiě)法。變量的解構(gòu)賦值結(jié)構(gòu)賦值允許使用默認(rèn)值 let [foo = true] = []; foo // true ES6 內(nèi)部使用嚴(yán)格相等運(yùn)算符（===），判斷一個(gè)位置是否...

RayKr 2019-08-21 18:44 評(píng)論0 收藏0
ES6學(xué)習(xí)（二）之解構(gòu)賦值及其原理

摘要：基本原理解構(gòu)是提供的語(yǔ)法糖，其實(shí)內(nèi)在是針對(duì)可迭代對(duì)象的接口，通過(guò)遍歷器按順序獲取對(duì)應(yīng)的值進(jìn)行賦值。屬性值返回一個(gè)對(duì)象的無(wú)參函數(shù)，被返回對(duì)象符合迭代器協(xié)議。迭代器協(xié)議定義了標(biāo)準(zhǔn)的方式來(lái)產(chǎn)生一個(gè)有限或無(wú)限序列值。更多系列文章請(qǐng)看 1、基本語(yǔ)法 1.1、數(shù)組 // 基礎(chǔ)類(lèi)型解構(gòu) let [a, b, c] = [1, 2, 3] console.log(a, b, c) // 1, 2, ...

chunquedong 2019-08-23 16:19 評(píng)論0 收藏0
JS 里的類(lèi)型

摘要：中是確定的，是的引用后面，變成的引用，但中的是確定的，所以在中又加上了深拷貝方法方法一如果這樣寫(xiě)，對(duì)象中的簡(jiǎn)單類(lèi)型是深拷貝，而復(fù)雜類(lèi)型是簡(jiǎn)單拷貝方法二循環(huán)引用垃圾回收如果一個(gè)對(duì)象沒(méi)有被引用，它就是垃圾，將被引用被賦值后，這個(gè)函數(shù)不是垃圾 JS 里的類(lèi)型 number類(lèi)型轉(zhuǎn) `string`：`toString`、String()全局函數(shù)、加上空字符串 `boolean：Boolean(...

calx 2019-08-23 10:41 評(píng)論0 收藏0
ES6（中）

摘要：它用來(lái)比較兩個(gè)值是否嚴(yán)格相等，與嚴(yán)格比較運(yùn)算符的行為基本一致。兩個(gè)對(duì)象的地址不一樣與嚴(yán)格比較運(yùn)算符的不同之處只有兩個(gè)一是不等于，二是等于自身基本用法方法用于對(duì)象的合并，將源對(duì)象的所有可枚舉屬性，賦值到目標(biāo)對(duì)象。這是ES6的入門(mén)篇教程的筆記，網(wǎng)址：鏈接描述，以下內(nèi)容中粗體+斜體表示大標(biāo)題，粗體是小標(biāo)題，還有一些重點(diǎn)；斜體表示對(duì)于自身，還需要下功夫?qū)W習(xí)的內(nèi)容。這里面有一些自己的見(jiàn)解，所以...

dreamGong 2019-08-26 10:48 評(píng)論0 收藏0
深淺拷貝

摘要：好像栗子不是那么好吃，那我們來(lái)看看下面的解釋吧深淺拷貝深拷貝和淺拷貝只針對(duì)像這樣的引用類(lèi)型數(shù)據(jù)。深拷貝則是開(kāi)啟一個(gè)新的棧，兩個(gè)對(duì)象對(duì)應(yīng)兩個(gè)不同的引用地址，修改一個(gè)對(duì)象的屬性，不會(huì)改變另一個(gè)對(duì)象的屬性。拷貝顧名思義就是復(fù)制，但是它并不簡(jiǎn)單哦，拷貝分為深淺拷貝，那么啥是深拷貝啥是淺拷貝呢，讓我們來(lái)舉個(gè)栗子，淺拷貝就是當(dāng)你拷貝別人的U盤(pán)里東西時(shí)，卻沒(méi)有新建文件存放在自己的電腦里，直接在里面...

yck 2019-08-21 17:42 評(píng)論0 收藏0