為什么解構(gòu)很有用

ECMAScript 5以及以前的版本:

let options = {
  repeat: true,
  save: false
};
// extract data from the object
let repeat = options.repeat, 
    save = options.save;

雖然這段代碼看上去也挺簡單的,但想象一下如果你要給大量的變量賦值,你得一個一個的賦值。
或者你需要取一個嵌套結(jié)構(gòu)數(shù)據(jù)的某個值,也許你得遍歷整個結(jié)構(gòu)。
如果你能把數(shù)據(jù)解構(gòu)成一些小小的片段,那獲取信息將會更加容易。

對象的解構(gòu)

let node = {
  type: "Identifier",
  name: "foo"
};
let { type, name } = node;
console.log(type);      // "Identifier"
console.log(name);      // "foo"

注意: 必須初始化

// syntax error!
var { type, name };
// syntax error!
let { type, name };
// syntax error!
const { type, name };

解構(gòu)賦值

可以賦值給已經(jīng)定義過的變量:

let node = {
    type: "Identifier",
    name: "foo"
},
type = "Literal",
name = 5;
// assign different values using destructuring
({ type, name } = node);
console.log(type);      // "Identifier"
console.log(name);      // "foo"

默認(rèn)值

let node = {
    type: "Identifier",
    name: "foo"
};
let { type, name, value = true } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // true

給不同名本地變量賦值

let node = {
    type: "Identifier",
    name: "foo"
};
let { type: localType, name: localName } = node;
console.log(localType);     // "Identifier"
console.log(localName);     // "foo"

嵌套對象解構(gòu)

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1 
            },
        end: {
            line: 1,
            column: 4
            }
        } 
};
let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 1

數(shù)組的解構(gòu)

let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor);        // "red"
console.log(secondColor);       // "green"

只取你需要的部分

let colors = [ "red", "green", "blue" ];
let [ , , thirdColor ] = colors;
console.log(thirdColor);        // "blue"

注意: 和對象的解構(gòu)一樣,必須初始化

解構(gòu)賦值

可以賦值給已經(jīng)定義過的變量:

let colors = [ "red", "green", "blue" ],
    firstColor = "black",
    secondColor = "purple";
[ firstColor, secondColor ] = colors;
console.log(firstColor);        // "red"
console.log(secondColor);       // "green"

在ECMAScript 5 中交換變量值

let a = 1,
    b = 2, tmp;
tmp = a;
a = b;
b = tmp;
console.log(a); // 2
console.log(b); // 1

在ECMAScript 6 中交換變量值

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

默認(rèn)值

let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor);        // "red"
console.log(secondColor);       // "green"

嵌套數(shù)組解構(gòu)

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
// later
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor);        // "red"
console.log(secondColor);       // "green"

剩余的元素

let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
console.log(firstColor);        // "red"
console.log(restColors.length); // 2
console.log(restColors[0]);     // "green"
console.log(restColors[1]);     // "blue"

數(shù)組的第一個值賦給了firstColor,剩下的值組成了一個新的數(shù)組賦給了restColors。

ECMAScript 5克隆一個數(shù)組:

var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors);   // "[red,green,blue]"

ECMAScript 6克隆一個數(shù)組:

let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors);  // "[red,green,blue]"

注意: 剩余的元素必須是解構(gòu)數(shù)組的最后一個元素,后面不能有逗號。

混合解構(gòu)

對象與數(shù)組嵌套混合的解構(gòu):

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
column: 1 },
        end: {
            line: 1,
column: 4 }
},
    range: [0, 3]
};
let {
    loc: { start },
    range: [ startIndex ]
} = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0

參數(shù)解構(gòu)

function setCookie(name, value, { secure, path, domain, expires }) {
    // code to set the cookie
}
setCookie("type", "js", {
    secure: true,
    expires: 60000
});

解構(gòu)的參數(shù)是必需的

// error!
setCookie("type", "js");

它實際上是這樣運行的:

function setCookie(name, value, options) {
    let { secure, path, domain, expires } = options;
    // code to set the cookie
}

當(dāng)解構(gòu)賦值的右邊是null或者undefined,就會拋出錯誤。

如果你希望解構(gòu)參數(shù)是可選的,你可以這樣寫:

function setCookie(name, value, { secure, path, domain, expires } = {}) {
    // empty }

解構(gòu)參數(shù)的默認(rèn)值

function setCookie(name, value,
    {
        secure = false,
        path = "/",
        domain = "example.com",
        expires = new Date(Date.now() + 360000000)
} = {} ){
// empty }