ES6之表示式結構（Destructuring）

使用場景

高階用法

配合其他新特性

用法：=

function
getstate
(), // …
}}const = getstate();
if(error)

用法：[ arg1, arg2 ] = [ value1, value2]

const [foo, bar] = [1, 2];
console.log(foo, bar); //1 2

如果希望跳過陣列中某些元素，可以通過空開乙個元素的方式實現：

// 用法：[ arg1, , arg2 ] = [ value1, value2, value3]
const [foo, , bar] = [1, 2, 3];
console.log(foo, bar); //1 3

如果希望能在獲取指定位置的元素以外，也可以不定項地獲取後續的元素，那麼可以用 … 語句來實現：

// 用法：[ arg1, arg2, ...rest ] = [ value1, value2, value3, value4]
const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a, b); // 1 2
console.log(rest); // [3, 4, 5]

使用陣列作為返回載體與使用物件作為返回載體的區別是：陣列需要讓被賦予的變數(或常量)名按照陣列的順序獲得值。

在文件約定完備的情況下，我們可以使用陣列作為載體，好處在於執行 promise.resolve 方法時的語法較為簡單：

function fetchdata())
}fetchdata
() .then
(([value1, value2]) => );
fetchdata
() .then
( [value1, value2] => );

需要注意的是，如果在 promise.then 方法中傳入的是乙個帶有解構引數的箭頭函式時，解構引數外必須有乙個括號包裹，否則會丟擲語法錯誤。

如果引數過多但在某個場景下並不需要全部引數，或者文件約定不完善的情況下，使用物件作為傳遞載體更佳。

function fetchdata());
})}fetchdata()
.then(() => console.log(data)); // foo bar ...

function
swap
(a, b)
let foo = 1;
let bar = 2;
// before
console.log(foo, bar); // 1 2
// swap
[foo, bar] = [bar, foo];
// after swap
console.log(foo, bar); // 2 1

如果在乙個使用了物件作為多返回值載體的函式中，我們需要獲取其中的某個返回值，但是卻不想使用其中的屬性名作為新的變數名（或常量名），那麼就可以使用別名來獲取相應的返回值，只需要在原來的返回值名稱後面加上」: x「即可，其中 x 為希望使用的變數名。

function
fetchdata()}
const = fetchdata();
console.log(data); // foo bar …

如果在模式匹配中，存在無法匹配的值（載體物件中不存在相應的值或目標引數所對應下標超出了載體陣列的下標範圍），預設情況下會獲得undefined。

// object
const = ;
console.log(foo, bar); // 1 undefined
// array
const [a, b, c] = [1, 2];
console.log(a, b, c); //1 2 undefined

為了避免這種情況發生，我們可以為無法匹配的值設定預設值。

const  = ;
console.log(foo); // 1
const [a, b = 2] = [1];
console.log(a, b); // 1 2

// object
const } = };
console.log(a, c); //1 2
// array in object
const = ;
console.log(d, f); //1 2
// object in array
const [g, ] = [1, ];
console.log(g, h); //1 2
// array in array
const [i, [j]] = [1, [2, 3]];
console.log(i, j); //1 2

const arr = ['mike', 'peter', 'ben', 'william', 'john'];
for(const [index, item] of arr.entries())
//0 "mike"
//1 "peter"
//2 "ben"
//3 "william"

foreach 無法像 for、 while 等迴圈語句一樣被 break 等控制語句終止，所以可以使用for-of 迴圈語法。

ES6之箭頭表示式

1.單行箭頭表示式 1 var foo arg1,arg2 arg1 arg2 2 上述表示式相當於 3var foo function arg1,arg2 2.多行箭頭表示式必須使用大括號 1 var foo arg1,agr2 45 以上表示式相當於 6var foo function ar...

ES6解構表示式

1 解構表示式傳參 let user function show obj show user 表示式傳值，整個表示式的值取決於右邊，所以把user傳給了obj console.log name,age ghostwu,222 解構陣列 let arr 10,20,30,40 陣列用解構 let o...

ES6 屬性名表示式

1.直接用識別符號作為屬性名 obj.fo true2.用表示式作為屬性名 obj a bc 123 相當於 obj abc 1233.es6 允許字面量定義物件時，用方法二表示式作為物件的屬性名，即把表示式放在方括號內。let key fo let obj var lastt last t v...

ES6之表示式結構（Destructuring）

ES6之箭頭表示式

ES6解構表示式

ES6 屬性名表示式

相關推薦