ES6 解構賦值詳解

解構賦值是對賦值運算符的擴展，可以將屬性/值從對象/數組中取出，賦值給其他變量。

 

一、數組的解構賦值

1、基本用法

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

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

let [a, , c] = [1, 2, 3];
a // 1
c // 3

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


let [a, b, ...c] = [1];
a // 1
b // undefined
c // []

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

 

2、默認值

解構賦值允許指定默認值。

var [a = 1] = [];
a  // 1

[a, b = 2] = [1];
a  // 1
b  // 2

[a, b = 2] = [1, undefined];
a  // 1
b  // 2

由於 ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，如果一個數組成員不嚴格等於 undefined，默認值是不會生效的。

var [a = 1] = [undefined];
a // 1


var [a = 1] = [null];
a // null

上面代碼中，如果一個數組成員是 null，默認值就不會生效，因為 null 不嚴格等於 undefined。

默認值可以引用解構賦值的其他變量，但該變量必須已經聲明。

let [a = 1, b = a] = [];
a // 1
b // 1

let [a = 1, b = a] = [2];
a // 2
b // 2

let [a = 1, b = a] = [1, 2];
a // 1
b // 2

let [a = y, b = 1] = [];
// ReferenceError

上面最后一個表達式之所以會報錯，是因為a用到默認值b時，b還沒有聲明。

 

二、對象的解構賦值

1、基本用法

解構不僅可以用於數組，還可以用於對象。

var { a, b } = { a: "aaa", b: "bbb" };
a // "aaa"
b // "bbb"

對象解構與數組結構的區別：

• 數組的元素是按次序排列的，變量的取值由它的位置決定；
• 而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

var { a, b } = { b: "bbb", a: "aaa" };
b // "bbb"
a // "aaa"


var { c } = { a: "aaa", b: "bbb" };
c // undefined

如果變量名與屬性名不一致，則需要這樣寫：

var { a: x } = { a: "aaa", b: "bbb" };
x // "aaa"


let obj = { a: "aaa", b: "bbb" };
let { a: x, b: y } = obj;
x // "aaa"
y // "bbb"

對象解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而非前者。

所以上面第二個代碼如果直接輸出a或b則會報錯：

let obj = { a: "aaa", b: "bbb" };
let { a: x, b: y } = obj;
a // error: a is not defined
b // error: b is not defined

上面代碼中，真正被賦值的是變量x和y，而非模式a和b

注意，對於 let 和 const 來說，變量不能重新聲明，所以一旦賦值的變量以前聲明過，就會報錯。

let a;
const obj = { a:"aaa" };
{a} = obj;
a // SyntaxError: Unexpected token =

解決方法：在第二行代碼加上“()”

let a;
const obj = { a:"aaa" };
({a} = obj);
a // "aaa"

上面代碼中，解析器會將起首的大括號，理解成一個代碼塊，而非賦值語句。

和數組一樣，解構也可以用於嵌套結構的對象。

var obj = {
    A: {
        a: {
            x: 1,
        }
    }
};
var { A: { a: { x }} } = obj;
A // undefined
a // undefined
x // 1

上面代碼中，只有x是變量，A和a都是模式，不會被賦值。

 

2、默認值

對象的解構也可以指定默認值。

var {a = 1} = {};
a // 1


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

var { a: x = 1 } = {};
x // 1

默認值生效的條件是，對象的屬性值嚴格等於undefined。

var {a = 1} = {a: undefined};
a // 1


var {a = 3} = {a: null};
a // null

如果將大括號寫在行首，JavaScript 會將其解釋為代碼塊。

var x;
{x} = {x: 1};
// SyntaxError: syntax error

上面代碼的寫法會報錯，因為 JavaScript 引擎會將{x}理解成一個代碼塊，從而發生語法錯誤。

//  解決方法
({x} = {x: 1});

 

三、字符串的解構賦值

字符串也可以解構賦值，因為字符串被轉換成了一個類似數組的對象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

類似數組的對象都有一個 length 屬性，因此還可以對這個屬性解構賦值。

let {length : len} = 'hello';
len // 5

 

四、數值和布爾值的解構賦值

解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象。

let {toString: s} = 123;
s === Number.prototype.toString // true


let {toString: s} = true;
s === Boolean.prototype.toString // true

上面代碼中，數值和布爾值的包裝對象都有toString屬性，因此變量s都能取到值。

解構賦值的規則是，只要等號右邊的值不是對象，就先將其轉為對象。

由於undefined和null無法轉為對象，所以對它們進行解構賦值，都會報錯。

let { prop: x } = undefined; // TypeError


let { prop: y } = null; // TypeError

 

五、函數參數的解構賦值

函數的參數也可以使用解構賦值。

function add([x, y]){
return x + y;
}
add([1, 2]); // 3

函數參數的解構也可以使用默認值。

function iPhone(a = "x", b = "A11", c = "1200"){
    console.log(a, b, c);
}
iPhone("xs","A12"); // xs A12 1200

 

六、圓括號問題

1、不能使用圓括號的情況

（ 1 ）變量聲明語句中，不能帶有圓括號。

//  全部報錯
var [(a)] = [1];
var {x: (c)} = {};
var ({x: c}) = {};
var {(x: c)} = {};
var {(x): c} = {};
var { o: ({ p: p }) } = { o: { p: 2 } };

（ 2 ）函數參數中，模式不能帶有圓括號。

//  報錯
function f([(z)]) { return z; } 

（ 3 ）賦值語句中，不能將整個模式，或嵌套模式中的一層，放在圓括號之中。

//  全部報錯
({ p: a }) = { p: 42 };
([a]) = [5];

• 上面代碼將整個模式放在圓括號之中，導致報錯。

 

2、可以使用圓括號的情況

• 可以使用圓括號的情況只有一種：賦值語句的非模式部分。

[(b)] = [3]; //  正確
({ p: (d) } = {}); //  正確
[(parseInt.prop)] = [3]; //  正確

• 上面三行語句都可以正確執行，因為首先它們都是賦值語句，而不是聲明語句；
• 其次它們的圓括號都不屬於模式的一部分。
• 第一行語句中，模式是取數組的第一個成員，跟圓括號無關；
• 第二行語句中，模式是 p ，而不是 d ；
• 第三行語句與第一行語句的性質一致.

 

七、解構賦值的應用

1、交換變量的值

[x, y] = [y, x];
// 交換變量x和y的值

 

2、從函數返回多個值

//  返回一個數組
function arr() {
　　return [1, 2, 3];
}
var [a, b, c] = arr();

//  返回一個對象
function obj() {
　　return {
　　　　a: 1,
　　　　b: 2
　　};
}
var { a, b } = obj();

 

3、函數參數的定義

//  參數是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

//  參數是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

 

4、提取 JSON 數據

var jsonData = {
　　id: 42,
　　status: "OK",
　　data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]