《ES6深入淺出》學習筆記 三

2021-07-25 00:27:26 字數 1485 閱讀 5750

解構 destructuring

通常來說,你很可能這樣訪問陣列中的前三個元素:

var first = somearray[0];

var second = somearray[1];

var third = somearray[2];

如果使用解構賦值的特性,將會使等效的**變得更加簡潔並且可讀性更高:

陣列與迭代器的解構

以上是陣列解構賦值的乙個簡單示例,其語法的一般形式為:

[ variable1, variable2, ..., variablen ] = array;
這將為variable1到variablen的變數賦予陣列中相應元素項的值。如果你想在賦值的同時宣告變數,可在賦值語句前加入var、let或const關鍵字,例如:

var [ variable1, variable2, ..., variablen ] = array;

let [ variable1, variable2, ..., variablen ] = array;

const [ variable1, variable2, ..., variablen ] = array;

事實上,用變數來描述並不恰當,因為你可以對任意深度的巢狀陣列進行解構:

var [foo, [[bar], baz]] = [1, [[2], 3]];

console.log(foo);

// 1

console.log(bar);

// 2

console.log(baz);

// 3

此外,你可以在對應位留空來跳過被解構陣列中的某些元素:

var [,,third] = ["foo", "bar", "baz"];

console.log(third);

// "baz"

而且你還可以通過「不定引數」模式捕獲陣列中的所有尾隨元素:

var [head, ...tail] = [1, 2, 3, 4];

console.log(tail);

// [2, 3, 4]

當訪問空陣列或越界訪問陣列時,對其解構與對其索引的行為一致,最終得到的結果都是:unde console.log([0]);

// undefined

var [missing] = ;

console.log(missing);

// undefined,陣列解構賦值的模式同樣適用於任意迭代器:

function* fibs

() }

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

console.log(sixth);

// 5

ES6深入淺出 Generator

一步,一步前進 一步 es6深入淺出之generator生成器。本人對生成器的印象是語法難以理解,又沒有什麼實際的應用場景。為啥要學習一下呢?可能未來某些高階的業務會用到,還有萬一面試官問的話,我得能侃幾句,顯得我牛。定義generator 是為非同步而生,正常的函式是一進入就必須執行完成的,而 g...

深入淺出es6(箭頭函式)

是function的簡寫形式,支援expression和statement兩種形式。同時一點很重要的時是他擁有詞法作用域this值,幫助你很好的解決this的指向問題,這是乙個很酷的方式,可以幫助你減少一些 的編寫,先來看看它的語法。var arr 1,2,3 arr.map item item 1...

深入淺出ES6之let和const命令

let和const宣告的變數只在 塊內有效 a referenceerror a is not defined.b 1 不存在變數提公升 變數一定要在宣告後使用,否則報錯 var tmp 123 if true 不允許重複宣告 報錯 function 塊級作用域 function f functio...