摘要：一概念對象是屬性的集合，從對象里取值，只能逐個取，而解構賦值表達式可以實現批量取值，賦值。賦值操作符等號兩邊的解構要一致才能正確賦值解構賦值表達式是賦值表達式的語法糖。三數組解構賦值數組的屬性名稱叫索引，表示的是位置。

對象是屬性的集合，從對象里取值，ES3/5只能逐個取，而解構賦值表達式可以實現批量取值，賦值。

// 數據對象person 
var person = {
    name: "john",
    age: 22
}

// ES5的方式：
var name = person.name,
    age = person.age;
    
// ES6解構賦值方式
var {name, age} = person;

// 格式1：聲明即賦值
var {key1: valName1=defaultVal1, key2: valName2=defaultVal2, ..., keyN: valNameN=defaultValN} = obj;

// 格式2, 先聲明，后賦值。此時必須使用括號包裹整個賦值表達式
var valName1,valName2, ..., valNameN;
({key1: valName1=defaultVal1, key2: valName2=defaultVal2, ..., keyN: valNameN=defaultValN} = obj);

obj：表示數據源對象

key1：表示需要從數據源對象中取值的屬性名稱，如果和valName1同名，可以省略不寫；

valName1：表示需要把獲取的屬性值賦值給的模板變量，即valNam1=obj[key1]；

defaultVal1：表示obj對象不包含屬性key1時指定的默認值，可選的。

所以用ES5的表示方式相當于：

var valName1 = obj[key1],
    valName2 = obj[key2],
    valNameN = obj[keyN];

如果key和valName的相同，可以簡寫為：

// 格式1：聲明即賦值
var {valName1=defaultVal1, valName2=defaultVal2, ..., valNameN=defaultValN} = obj;

// 格式2, 先聲明，后賦值。此時括號是必須的
var valName1,valName2, ..., valNameN;
({valName1=defaultVal1, valName2=defaultVal2, ..., valNameN=defaultValN} = obj);

大部分場景都是使用簡寫的方式。

假設有個對象dad:

// Object
var dad = {
    name: "john",
    age: 30,
    children: [
        {
            name: "Tom",
            age: 2
        },
        {
            name: "Jim",
            age: 1
        }
    ]
}

現在要把dad屬性分別保存到變量name, age, children里：

// 格式1: 聲明即賦值
var {name:name, age:age, children:children} = dad;
console.log(name); // john
console.log(age); // 30
console.log(children.length); // 2

// 格式2, 先聲明，后賦值。此時括號是必須的，否則報語法錯誤
var name, age, children;
({name:name, age:age, children:children} = dad)

對應的簡寫格式：

// 格式1
var {name, age, children} = dad;
// 格式2
var name, age, children;
({name, age, children} = dad)

對于沒有匹配到 或者匹配到的屬性值為undefined的變量可以指定默認值。

dad.name = void 0; // dad定義見上例，
var { weight = "66kg", name="new name"} = dad; // dad沒有定義weight屬性
console.log(weight, name); // weight="66kg", name="new name"

在上面的語法結構中

var {key1: valName1, key2: valName2, ..., keyN: valNameN} = obj;

其中key1，key2...keyN還可以是個變量，為了標識他們是變量而不是字面量，則需用用中括號包裹：

var key = "name";
var {[key]:val } = dad;
console.log(val); // "john"
key = "age";
({[key]:val } = dad);
console.log(val); // 30

解構賦值的前提是同構，即左右兩邊的對象解構要一致；

對象解構賦值在綁定值時根據屬性key（key的名稱和結構位置）進行匹配的。賦值操作符（等號）兩邊的解構要一致才能正確賦值；

解構賦值表達式是賦值表達式的語法糖。

數組的屬性名稱叫索引，表示的是位置。所以跟對象的解構賦值相比語法上有些不同：

// 語法格式1： 聲明即賦值
var arr = [1, 2, 3, 4, 5, 6];
var [f, s, t] = arr;
// 語法格式2： 先聲明，后賦值
var a, b, c;
[a, b, c] = arr;

console.log([f, s, t]) // [1, 2, 3]
console.log([a, b, c]) // [1, 2, 3]

數組解構賦值在綁定值時根據屬性下標和進行匹配的。賦值操作符（等號）兩邊的解構要一致才能正確賦值，如果匹配不成功則取值為undefined。

var arr = [1, 2, 3];
var [,f,s] = arr; // f=2, s=3

通過rest操作符(...)修飾變量可以實現獲取數組剩下的元素：

var arr = [3, 4, 5, 6];
var [a, ...b] = arr;
console.log(b); // [4,5,6]

變量b獲取數組arr剩余的元素，此時注意變量b必須放在最后，否則語法錯誤。如果沒有剩余的元素，則為空數組，

var arr = [3];
var [a, b, ...c] = arr;
console.log(a) // 3
console.log(b) // undefined
console.log(c) // []

// 獲取二維數組的元素
var [[a00=1], [,a11]] = [[1, 2], [3, 4]];
console.log(`a00=${a00}, a11=${a11}`)

// 繼續上面的例子，現在的需求是把dad對象里第2個孩子的屬性保存到name,age變量里(這個寫法就復雜了，結合了數組解構賦值和對象解構賦值)：
var {children: [,{name, age}]} = dad;
console.log([name, age])

注意： 復雜的嵌套降低了可讀性，需要權衡下是否要使用

數組本身也是對象，數組的賦值解構也可以通過對象解構賦值的方式表示：

var arr = [1, 2, 3];
var {0:f, 1:s, 2:t} = arr; // 等價 var [f, s, t] = arr;
console.log([f, s, t]) // f=1, s=2, t=3

這樣寫確實麻煩哈，數組解構賦值是對數組對象解構賦值的的簡化。他們的賦值匹配模式本質上是一樣的。

var {a } = 1, // undefined
    {b} = true, // undefined
    {c} = "a", // undefined
    rjzdjxl = null, // 類型錯誤
    {e} = undefined; // 類型錯誤

JS對這些基本類型數字，字符串，boolean都定義了對應的對象類型，在對這些類型的數據進行解構賦值操作時，會轉成對應的對象類型。但是null, undefined卻沒有對應的對象類型，所有在運行時會報類型錯誤。

總結一句話： 只要是發生賦值操作的場景都可以使用解構賦值表達式。

function log({title: tag = "Debug", message}) {
    console.log(`${tag}: ${message}`);
}

log({title: "Info", message: "This is a log message"})

要使用ES5實現上面的功能，大致如：

function log(option) {
    if(!option) option= {};
    var tag = option.title || "Debug",
        message = option.message;
    console.log(`${tag}: ${message}`);
}
log({title: "Info", message: "This is a log message"})

解構賦值用作函數的形參使得參數更加直觀明了，并且可以賦值默認值。ES5的寫法得讀代碼才能看到具體需要什么參數。

可以對集合元素進行解構操作，更方便循環體內取值。

for(var {name, age} of dad.children) {
    console.log(`name: ${name}, age: ${age}`)
}

// 方便正則取值
var url = "https://developer.mozilla.org/en-US/Web/JavaScript";
var parsedURL = /^(w+)://([^/]+)/(.*)$/.exec(url);
console.log(parsedURL); 
var [, protocol, fullhost, fullpath] = parsedURL;
console.log(protocol); // "https"

MDN Destructuring assignment

ES6 In Depth: Destructuring