ES6 陣列的解構賦值

2021-09-08 05:16:21 字數 1926 閱讀 5915

陣列的解構賦值

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

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

let a = 1;


let b = 2;


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

let [a,b,c] = [1,2,3];


console.log(a); // 1


console.log(b); // 2


console.log(c); // 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
如果解構不成功，變數的值就等於undefined。

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

// 報錯


let [foo] = 1;


let [foo] = false;


let [foo] = nan;


let [foo] = undefined;


let [foo] = null;


let [foo] = {};
對於 set 結構，也可以使用陣列的解構賦值。

let [x, y, z] = new set(['a', 'b', 'c']);


console.log(x) // "a"


console.log(y) // "b"


console.log(z) // "c"
解構賦值允許指定預設值。

var [foo = true] = ;


console.log(foo) // true


var [x, y = 'b'] = ['a']; // x='a', y='b'


console.log(x);


console.log(y);


var [x, y = 'b'] = ['a', undefined]; // x='a', y='b'


console.log(x);


console.log(y);


var [x, y = 'b'] = ['a', 'c']; // x='a', y='c'


console.log(x);


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

var [x = 1] = [undefined];


console.log(x) // 1


var [x = 1] = [null];


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

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

ES6陣列的解構賦值

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

ES6 陣列的解構賦值

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

ES6 解構賦值

陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...