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

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

// 數(shù)據(jù)對象person 
var person = {
    name: "john",
    age: 22
}

// ES5的方式：
var name = person.name,
    age = person.age;
    
// ES6解構(gòu)賦值方式
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：表示數(shù)據(jù)源對象

key1：表示需要從數(shù)據(jù)源對象中取值的屬性名稱，如果和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);

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

假設(shè)有個對象dad:

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

現(xiàn)在要把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)

對應(yīng)的簡寫格式：

// 格式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"

在上面的語法結(jié)構(gòu)中

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

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

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

解構(gòu)賦值表達式是賦值表達式的語法糖。

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

// 語法格式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]

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

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

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

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

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

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

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

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

注意： 復(fù)雜的嵌套降低了可讀性，需要權(quán)衡下是否要使用

數(shù)組本身也是對象，數(shù)組的賦值解構(gòu)也可以通過對象解構(gòu)賦值的方式表示：

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

這樣寫確實麻煩哈，數(shù)組解構(gòu)賦值是對數(shù)組對象解構(gòu)賦值的的簡化。他們的賦值匹配模式本質(zhì)上是一樣的。

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

JS對這些基本類型數(shù)字，字符串，boolean都定義了對應(yīng)的對象類型，在對這些類型的數(shù)據(jù)進行解構(gòu)賦值操作時，會轉(zhuǎn)成對應(yīng)的對象類型。但是null, undefined卻沒有對應(yīng)的對象類型，所有在運行時會報類型錯誤。

總結(jié)一句話： 只要是發(fā)生賦值操作的場景都可以使用解構(gòu)賦值表達式。

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

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

要使用ES5實現(xiàn)上面的功能，大致如：

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"})

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

可以對集合元素進行解構(gòu)操作，更方便循環(huán)體內(nèi)取值。

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