ECMAScript 6 陣列的解構賦值

2022-05-09 05:18:07 字數 4369 閱讀 6392

模式匹配:只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。

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 //
不完全解構：等號左邊的模式，只匹配一部分的等號右邊的陣列。

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 介面，都可以採用陣列形式的解構賦值：

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>document


title


>


head


>


<


body


>


<


script


>


function


*fibs() 


}let [first, second, third, fourth, fifth, sixth] 


=fibs();


alert(sixth);


script


>


body


>


html


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

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>document


title


>


head


>


<


body


>


<


script


>


let  =;


console.log(foo);


console.log(bar);


script


>


body


>


html


>
結果：aaa,bbb

簡寫：

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>document


title


>


head


>


<


body


>


<


script


>


let obj =;


let  


=obj;


console.log(f);


console.log(l);


script


>


body


>


html


>
結果：hello

world

陣列本質是特殊的物件，因此可以對陣列進行物件屬性的解構。

如下

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>document


title


>


head


>


<


body


>


<


script


>


let arr =[


1, 2, 


3];let  


=arr;


console.log(first); //1


console.log(last);  //3


script


>


body


>


html


>
結果為：

字串也可以解構賦值。這是因為此時，字串被轉換成了乙個類似陣列的物件。

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>document


title


>


head


>


<


body


>


<


script


>


const [a, b, c, d, e] ='


hello';


a //


"h"b 


//"e"


c //


"l"d 


//"l"


e //


"o"console.log(a);


console.log(b);


console.log(c);


console.log(d);


console.log(e);


script


>


body


>


html


>
解構賦值時，如果等號右邊是數值和布林值，則會先轉為物件。

let  = 123;


s === number.prototype.tostring // true


let  = true;


s === boolean.prototype.tostring // true



doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>document


title


>


head


>


<


body


>


<


script


>


function


move( 


={}) 


console.log(move());


console.log(move());


console.log(move({}));


console.log(move());


script


>


body


>


html


>
結果：

EcmaScript 6 箭頭函式

es5 var total values.reduce function a,b 0 es6 var total values.reduce a,b a b,0 箭頭即乙個函式的簡化 es5 confetti btn click function event es6 confetti btn cli...

ECMAScript6掃盲筆記 一

ecma組織推出的ecmascript是乙個標準 協議 js是協議的實現。ecmascript簡稱ecma或es。目前使用最多的是es5.1，es6正式推出是在2015年。就醬 es6 es2015 相容性 es6 es2015 支援 ie10 chrome firefox 移動端 nodejs。和...

ECMAScript6 常用解構賦值

一 解構賦值按照一定模式，從陣列和物件中提取值，對變數進行賦值 1.陣列解構let arr 1 2,3 現在要求取出陣列的每一項 傳統的方式 let a arr 0 let b arr 1 let c arr 2 console.log a,b,c 1,2,3 在es6中提供了解構的語法 可以得到陣...