ES6 陣列的解構賦值 簡單易懂

2021-10-23 11:25:16 字數 3093 閱讀 4426

基本用法

es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（destructuring）。

以前，為變數賦值，只能直接指定值。

let a =1;


let b =2;


let c =


3;
es6 允許寫成下面這樣。

let


[a, b, c]=[


1,2,


3];
上面**表示，可以從陣列中提取值，按照對應位置，對變數賦值。

本質上，這種寫法屬於「模式匹配」，只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。下面是一些使用巢狀陣列進行解構的例子。

let


[foo,


[[bar]


, baz]]=


[1,[


[2],


3]];


foo // 1


bar // 2


baz // 3


let[


,, third]=[


"foo"


,"bar"


,"baz"];


third // "baz"


let[x,


, y]=[


1,2,


3];x // 1


y // 3


let[head,


...tail]=[


1,2,


3,4]


;head // 1


tail // [2, 3, 4]


let[x, y,


...z]=[


'a']


;x // "a"


y // undefined


z //
如果解構不成功，變數的值就等於undefined。

let


[foo]=[


];let[bar, foo]=[


1];
以上兩種情況都屬於解構不成功，foo的值都會等於undefined。

另一種情況是不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的陣列。這種情況下，解構依然可以成功。

let


[x, y]=[


1,2,


3];x // 1


y // 2


let[a,


[b], d]=[


1,[2


,3],


4];a // 1


b // 2


d // 4
上面兩個例子，都屬於不完全解構，但是可以成功。

如果等號的右邊不是陣列（或者嚴格地說，不是可遍歷的結構，參見《iterator》一章），那麼將會報錯。

// 報錯


let[foo]=1


;let


[foo]


=false


;let


[foo]


=nan


;let


[foo]


= undefined;


let[foo]


=null


;let


[foo]


=;
上面的語句都會報錯，因為等號右邊的值，要麼轉為物件以後不具備 iterator 介面（前五個表示式），要麼本身就不具備 iterator 介面（最後乙個表示式）。

對於 set 結構，也可以使用陣列的解構賦值。

let


[x, y, z]


=new


set(


['a'


,'b'


,'c'])


;x // "a"
事實上，只要某種資料結構具有 iterator 介面，都可以採用陣列形式的解構賦值。

預設值解構賦值允許指定預設值。

let


[foo =


true]=


;foo // true


let[x, y =


'b']=[


'a']


;// x='a', y='b'


let[x, y =


'b']=[


'a', undefined]


;// x='a', y='b'
注意，es6 內部使用嚴格相等運算子（===），判斷乙個位置是否有值。所以，只有當乙個陣列成員嚴格等於undefined，預設值才會生效。

let


[x =1]


=[undefined]


;x // 1


let[x =1]


=[null];


x // null
上面**中，如果乙個陣列成員是null，預設值就不會生效，因為null不嚴格等於undefined。

如果預設值是乙個表示式，那麼這個表示式是惰性求值的，即只有在用到的時候，才會求值。

functionf(


)let


[x =f(


)]=[


1];
上面**中，因為x能取到值，所以函式f根本不會執行。

預設值可以引用解構賦值的其他變數，但該變數必須已經宣告。

let


[x =


1, y = x]=[


];// x=1; y=1


let[x =


1, y = x]=[


2];// x=2; y=2


let[x =


1, y = x]=[


1,2]


;// x=1; y=2


let[x = y, y =1]


=;// referenceerror: y is not defined
上面最後乙個表示式之所以會報錯，是因為x用y做預設值時，y還沒有宣告。

ES6陣列的解構賦值

解構 destructuring 是指在 es6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，在解構出現之前為變數賦值，只能直接指定值。var a 1 var b 2 var c 3 es6可以寫成這樣 var a,b,c 1,2,3 這樣表示從 1,2,3 這個陣列中提取值，會按照對應的...

ES6 陣列的解構賦值

陣列的解構賦值 es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構 destructuring 以前，為變數賦值，只能直接指定值。let a 1 let b 2 let c 3 es6 允許寫成下面這樣。let a,b,c 1,2,3 console.log a 1 con...

ES6 陣列的解構賦值

陣列的解構賦值 將陣列的值，或者物件的屬性，提取到不同的變數中 更複雜的匹配規則 擴充套件運算子 let arr1 1,2 let arr2 3,4 let arr3 5,6 let arr4 arr1,arr2,arr3 三個陣列 let arr5 arr1,arr2,arr3 合併陣列的值 陣列...