ES6 物件的解構賦值 簡單易懂

2021-10-08 22:09:58 字數 3207 閱讀 5452

簡介

解構不僅可以用於陣列，還可以用於物件。

let=;


foo // "aaa"


bar // "bbb"
物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的，變數的取值由它的位置決定；而物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值。

let=;


foo // "aaa"


bar // "bbb"


let=


;baz // undefined
上面**的第乙個例子，等號左邊的兩個變數的次序，與等號右邊兩個同名屬性的次序不一致，但是對取值完全沒有影響。第二個例子的變數沒有對應的同名屬性，導致取不到值，最後等於undefined。

如果解構失敗，變數的值等於undefined。

let=;


foo // undefined
上面**中，等號右邊的物件沒有foo屬性，所以變數foo取不到值，所以等於undefined。

物件的解構賦值，可以很方便地將現有物件的方法，賦值到某個變數。

// 例一


let= math;


// 例二


const


= console;


log(


'hello'


)// hello
上面**的例一將math物件的對數、正弦、余弦三個方法，賦值到對應的變數上，使用起來就會方便很多。例二將console.log賦值到log變數。

如果變數名與屬性名不一致，必須寫成下面這樣。

let=;


baz // "aaa"


let obj =


;let


= obj;


f // 'hello'


l // 'world'
這實際上說明，物件的解構賦值是下面形式的簡寫（參見《物件的擴充套件》一章）。

let


=;
也就是說，物件的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變數。真正被賦值的是後者，而不是前者。

let=;


baz // "aaa"


foo // error: foo is not defined
上面**中，foo是匹配的模式，baz才是變數。真正被賦值的是變數baz，而不是模式foo。

與陣列一樣，解構也可以用於巢狀結構的物件。

let obj =]}


;let]}


= obj;


x // "hello"


y // "world"
注意，這時p是模式，不是變數，因此不會被賦值。如果p也要作為變數賦值，可以寫成下面這樣。

let obj =]}


;let]}


= obj;


x // "hello"


y // "world"


p // ["hello", ]
下面是另乙個例子。

const node =}}


;let


, loc:}}


= node;


line // 1


loc // object 


start // object
上面**有三次解構賦值，分別是對loc、start、line三個屬性的解構賦值。注意，最後一次對line屬性的解構賦值之中，只有line是變數，loc和start都是模式，不是變數。

下面是巢狀賦值的例子。

let obj =


;let arr =


;(=)


;obj // 


arr // [true]
如果解構模式是巢狀的物件，而且子物件所在的父屬性不存在，那麼將會報錯。

// 報錯


let}


=;
上面**中，等號左邊物件的foo屬性，對應乙個子物件。該子物件的bar屬性，解構時會報錯。原因很簡單，因為foo這時等於undefined，再取子屬性就會報錯。

預設值物件的解構也可以指定預設值。

var=;


x // 3


var=


;x // 1


y // 5


var=


;y // 3


var=


;y // 5


var=


;msg // "something went wrong"
預設值生效的條件是，物件的屬性值嚴格等於undefined。

var=;


x // 3


var=


;x // null
上面**中，屬性x等於null，因為null與undefined不嚴格相等，所以是個有效的賦值，導致預設值3不會生效。

注意點（1）由於陣列本質是特殊的物件，因此可以對陣列進行物件屬性的解構。

let arr =[1


,2,3


];let= arr;


first // 1


last // 3
上面**對陣列進行物件解構。陣列arr的0鍵對應的值是1，[arr.length - 1]就是2鍵，對應的值是3。方括號這種寫法，屬於「屬性名表示式」。

ES6 物件的解構賦值

es6的解構賦值，在我看來是提供了乙個整體賦值的方案。包括陣列和物件的整體賦值。基本原則如下 let x,y 1,2 x 1 y 2 let foo aaa bar bbb 但是物件的解構賦值，允許給賦值的變數重新命名。物件的重新命名解構 我自己去的名字，便於理解 其實在給物件進行解構賦值的時候，有...

ES6 物件的解構賦值

物件的解構賦值 解構不僅可以用於陣列，還可以用於物件。let console.log foo aaa console.log bar bbb這裡的foo，bar一定要對應。物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的，變數的取值由它的位置決定 而物件的屬性沒有次序，變數必須與屬性同名，...

ES6 物件的解構賦值

解構不僅可以用於陣列，還可以用於物件。let foo aaa bar bbb 物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的，變數的取值由它的位置決定 而物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值。let foo aaa bar bbb let baz undefined ...