destructuring assignment

Posted on Edited on In Views: Disqus:

 

destructuring assignment 的中文名稱大部份人翻成「解構賦值」。

重點是「賦值」的方式，就像是鏡子般映射到所宣告的變數。

 

一、陣列的解構賦值

1、基本用法

var [a, b] = [1, 2];
console.log(a, b);

結果為

 

2、先宣告後指定值

var a, b;
[a, b] = [1, 2];
console.log(a, b);

結果為

 

3、略過某些值

var a, b;
[a, , b] = [1, 2, 3];
console.log(a, b);

結果為

 

4、rest operator

var a, b;
[a, ...b] = [1, 2, 3];
console.log(a, b);

結果為

 

5、交換值

var a = 1, b = 9;
[a, b] = [b, a];
console.log(a, b);

結果為

 

6、字串轉字元映射

var str = "Hi";
var [a, b] = str;
console.log(a, b);

結果為

 

二、物件的解構賦值

1、基本用法

var { x: a, y: b } = { x: 1, y: 2 };
console.log(a, b);

結果為

 

2、shorthand syntax

經由上例可以理解下例

var { x: x, y: y } = { x: 1, y: 2 };
console.log(x, y);

結果為

 

上例的簡寫可等同於

var { x, y } = { x: 1, y: 2 };
console.log(x, y);

結果為

 

3、rest operator

var { x, y, ...rest } = { x: 1, y: 2, xx: 10, yy: 20 };
console.log(x, y, rest);

結果為

 

三、關於解構賦值錯誤的語法

{ a, b } = { a: 1, b: 2 };

當 curly bracket「{}」是在語句的最開頭時，在 javascript 語法裡，

其會被當作是陳述句。但該程式意圖很明顯是執行句。

 

解決的方式如下，可以在表達式的兩端加上 parentheses，

則該程式將成為執行句。

({ a, b } = { a: 1, b: 2 });
console.log(a, b);

結果為

 

四、解構賦值時的預設值

var [a = 100, b] = [, 2];
console.log(a, b);

結果為

 

var { x = 100, y = 50 } = {};
console.log(x, y);

結果為

 

五、在函式傳入參數定義中使用解構賦值

基本的函式用法如下

function sum(a, b) {
    return a + b;
}
console.log(sum(1, 2));

結果為

 

在函式傳入參數定義中使用解構賦值

function sum({ x: a, y: b }) {
    return a + b;
}
console.log(sum({ x: 1, y: 2 }));

結果為

等同於

function sum({ a, b }) {
    return a + b;
}
console.log(sum({ a: 1, b: 2 }));

結果為

 

在函式傳入參數定義中使用帶有預設值的解構賦值

function sum({ a, b }) {
    return a + b;
}
console.log(sum({ a= 1, b= 2 } = { a: 100, b: 200 }));

結果為

 

參考資料：

Destructuring assignment