JS 解構賦值

感謝原文作者：小火柴的藍色理想
原文鏈接：https://www.cnblogs.com/xiaohuochai/p/7243166.html

介紹

解構賦值語法是一種 Javascript ES6引入的表達式。通過解構賦值, 可以將屬性/值從對象/數組中取出,賦值給其他變量。解構。解構是一種打破數據結構，將其拆分為更小部分的過程。

對象解構

基礎語法

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

向已聲明的變量賦值

let node = {
    type: "Identifier",
    name: "foo"
},
type = "Literal",
name = 5;
// 使用解構來分配不同的值
({ type, name } = node);
console.log(type); // "Identifier"
console.log(name); // "foo"

注意：一定要用一對小括號包裹解構賦值語句，JS引擎將一對開放的花括號視為一個代碼塊。語法規定，代碼塊語句不允許出現在賦值語句左側，添加小括號后可以將塊語句轉化為一個表達式，從而實現整個解構賦值過程。

任何可以使用值的地方都可以使用解構賦值表達式

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

設置默認值

注意：解構賦值表達式(也就是=右側的表達式)如果為null或undefined會導致程序拋出錯誤。也就是說，任何嘗試讀取null或undefined的屬性的行為都會觸發運行時錯誤

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

為變量value設置了默認值true，只有當node上沒有該屬性或者該屬性值為undefined時該值才生效。此處沒有node.value屬性，因為value使用了預設的默認值

為非同名局部變量賦值

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

為非同名局部變量賦值並設置默認值

當使用其他變量名進行賦值時也可以添加默認值，只需在變量名后添加等號和默認值即可

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

嵌套對象解構

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

在上面的解構示例中，所有冒號前的標識符都代表在對象中的檢索位置，其右側為被賦值的變量名；如果冒號后是花括號，則意味着要賦予的最終值嵌套在對象內部更深的層級中。
也可以使用一個與對象屬性名不同的局部變量名

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

數組結構

與對象解構的語法相比，數組解構就簡單多了，它使用的是數組字面量，且解構操作全部在數組內完成，而不是像對象字面量語法一樣使用對象的命名屬性

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"

向已聲明的變量賦值（設置默認值與對象解構一樣）

數組解構也可用於賦值上下文，但不需要用小括號包裹表達式，這一點與對象解構不同

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

變量交換

// 在 ES6 中互換值
let a = 1,
    b = 2;
[ a, b ] = [ b, a ];
console.log(a); // 2
console.log(b); // 1

嵌套數組解構

嵌套數組解構與嵌套對象解構的語法類似，在原有的數組模式中插入另一個數組模式，即可將解構過程深入到下一個層級

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
// 隨后
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"

數組復制

在ES5中，開發者們經常使用concat()方法來克隆數組

// 在 ES5 中克隆數組
var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

在ES6中，可以通過不定元素的語法來實現相同的目標

// 在 ES6 中克隆數組
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"

混合解構

具體還請查閱原文。

其他解構

字符串解構

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

const [a, b, c, d, e] = 'hello';
console.log(a);//"h"
console.log(b);//"e"
console.log(c);//"l"
console.log(d);//"l"
console.log(e);//"o"

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

const {length} = 'hello';
console.log(length);//5

數值和布爾值解構

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

let {toString:s1} = 123;
console.log(s1 === Number.prototype.toString);//true
let {toString:s2} = true;
console.log(s2 === Boolean.prototype.toString);//true

解構賦值的規則是，只要等號右邊的值不是對象或數組，就先將其轉為對象。由於undefined和null無法轉為對象，所以對它們進行解構賦值，都會報錯

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