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

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

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

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

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

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

我們知道，如下情況：

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

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

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

通過實(shí)驗(yàn)可見，state2屬性的修改并沒有影響到state，所以這是一份拷貝，那么問題又來了，這個(gè)拷貝是只有一層的淺拷貝，還是遞歸進(jìn)去的深拷貝呢，我直覺地認(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í)證明我的直覺錯(cuò)了，解構(gòu)復(fù)制到全新對象里只是淺拷貝，對象里屬性的屬性還是對原來對象里屬性的屬性的一個(gè)引用,因?yàn)榻鈽?gòu)賦值可以生成一份淺拷貝，其實(shí)我們針對已知結(jié)構(gòu)的對象也可以全部使用這個(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ù)嗎對象解構(gòu) 解構(gòu)函數(shù)

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/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)值才會生效。這樣的層層判斷非常麻煩，因此現(xiàn)在有一個(gè)提案，引入了傳導(dǎo)運(yùn)算符，簡化上面的寫法。變量的解構(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 評論0 收藏0
ES6學(xué)習(xí)（二）之解構(gòu)賦值及其原理

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

chunquedong 2019-08-23 16:19 評論0 收藏0
JS 里的類型

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

calx 2019-08-23 10:41 評論0 收藏0
ES6（中）

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

dreamGong 2019-08-26 10:48 評論0 收藏0
深淺拷貝

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

yck 2019-08-21 17:42 評論0 收藏0