15 ES6 陣列的解構賦值

2021-08-13 04:27:35 字數 2452 閱讀 7636

陣列的解構賦值

基本用法es6允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構(destructuring)。以前,為變數賦值,只能直接指定值。

//es5

var a=1;

var b=2;

var c=3;

es6允許寫成下面這樣。

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

console.log(a);  //1

console.log(b);  //2

console.log(c);  //3

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

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

如果解構不成功,變數的值就等於†‡ˆ‹‡†undefined 。

var [foo]=;

var [bar,foo]=[1];

以上兩種情況都屬於解構不成功,ˆ『『 foo的值都會等於undefined†‡ˆ‹‡† 。

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

let [x,y]=[1,2,3];

console.log(x); //1

console.log(y);  //2

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

console.log(a); //1

console.log(b); //2

console.log(c); //4

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

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

//報錯

let [foo]=1;

let [foo]=false;

let [foo]=nan;

let [foo]=undefined;

let [foo]=null;

let [foo]={};

上面的表示式都會報錯,因為等號右邊的值,要麼轉為物件以後不具備iterator介面(前五個表示式),要麼本身就不具備iterator介面(最後乙個表示式)。

解構賦值不僅適用於var命令,也適用於let和const命令。

var [v1,v2,...vn]=array;

let [v1,v2,...vn]=array;

const [v1,v2,...vn]=array;

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

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

console.log(x); //a

console.log(y);  //b

console.log(z);  //c

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

function* fibs()

}var [first,second,third,fourth,fifth,sixth]=fibs();

console.log(sixth);  //5

上面**中, fibs是乙個generator函式,原生具有iterator介面。解構賦值會依次從這個介面獲取值。

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

注意,es6內部使用嚴格相等運算子(=== ),判斷乙個位置是否有值。所以,如果乙個陣列成員不嚴格等於†‡ˆ‹‡† undefined,預設值是不會生效的。

上面**中,如果乙個陣列成員是nullžž ,預設值就不會生效,因為žž null 不嚴格等於†‡ˆ‹‡†undefined 。如果預設值是乙個表示式,那麼這個表示式是惰性求值的,即只有在用到的時候,才會求值。ˆ

function f()

let [x=f()]=[1];

console.log(x);  //1

上面**中,因為š x 能取到值,所以函式ˆ f 根本不會執行。上面的**其實等價於下面的**。

let x;

if([1][0]===undefined)else

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

let [x=1,y=x]=;

console.log(x); //1

console.log(y); //1

let [x=1,y=x]=[2];

console.log(x); //2

console.log(y); //2

let [x=1,y=x]=[1,2];

console.log(x);  //1

console.log(y);  //2

let [x=y,y=1]=;

console.log(x);  //undefined

console.log(y);  //1

上面最後乙個表示式x之所以是未定義,是因為š 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 合併陣列的值 陣列...