摘要：這種模式相當(dāng)于數(shù)組結(jié)構(gòu)適用于具有接口的數(shù)據(jù)哪里可以用到解構(gòu)賦值聲明變量賦值參數(shù)定義還可以在的循環(huán)過程中使用背景構(gòu)造數(shù)據(jù)和解析數(shù)據(jù)通過一些操作來新建一個(gè)對(duì)象同時(shí)通過其他的一些操作來解析這個(gè)數(shù)據(jù)我們可以通過對(duì)象字面量去新建一個(gè)對(duì)象在中，解構(gòu)允

    const obj = {first: "jane", last: "Doe"};
    const {first: f, last: l} = obj;
    
    // f = "jane" l = "Doe"
    
    // {prop}這種模式相當(dāng)于 {prop: prop}
    const {first, last} = obj;
    // first = "jane"  last = "Doe"

數(shù)組結(jié)構(gòu)適用于具有Iterator接口的數(shù)據(jù)：

    const iterable = ["a", "b"];
    const [x, y] = iterable;
    // x = "a"; y = "b"

    //聲明變量
    const [x] = ["a"];
    let [x] = ["a"];
    var [x] = ["a"];
    
    //賦值
    [x] = ["a"];
    
    //參數(shù)定義
    function f([x]) {...}
    f(["a"]);

還可以在for-of的循環(huán)過程中使用

    const arr1 = ["a", "b"];
    for(const [index, element] of arr1.entries()) {
        console.log(index, element);
    }
    //0 a
    //1 b
    
    const arr2 = [
        {name: "Jane", age: 41},
        {name: "John", age: 40}
    ];
    for(const {name, age} of arr2) {
        console.log(name, age);
    }
    //Jane 41
    //John 40

js通過一些操作來新建一個(gè)對(duì)象

    const obj = {};
    obj.first = "Jane";
    obj.last = "Doe";

同時(shí)通過其他的一些操作來解析這個(gè)數(shù)據(jù)

    const f = obj.first;
    const l = obj.last;

我們可以通過對(duì)象字面量去新建一個(gè)對(duì)象:

    const obj = {first: "Jane", last: "Doe"};

在ES6中，解構(gòu)允許使用相同的語(yǔ)法形式去獲取數(shù)據(jù)，這種方式被稱為對(duì)象模式

    const {first: f, last: l} = obj;

就像使用對(duì)象字面量創(chuàng)建一個(gè)有多個(gè)屬性的對(duì)象那樣，對(duì)象模式允許我們?nèi)カ@取對(duì)象的不同的屬性。

需要被解構(gòu)的目標(biāo)可以是以下三種中的一種:

給目標(biāo)對(duì)象進(jìn)行賦值

對(duì)象 {first: pattern, last: pattern}

數(shù)組模式 [pattern, pattern]

如下:

    const obj = {a: [{foo: 123, bar: "abc"}, {}], b: true};
    const {a: [{foo: f}]} = obj;

    //f = 123

當(dāng)然你可以解構(gòu)你所需要的屬性值,例如:

    const {x: x} = {x: 7, y: 3};
    //x = 7
    
    const [x, y] = ["a", "b", "c"];
    //x = "a" , y = "b"

在一次賦值過程中 pattern = someValue, pattern是如何獲取到someValue內(nèi)部的值的？

    const {length: len} = "abc";  // th = 3
    const {toString: s} = 123;    //s = Number.prototype.toString          

但是將需要被解構(gòu)的值轉(zhuǎn)化為object(對(duì)象)所調(diào)用的方法并非Object(); 而是內(nèi)置方法ToObject;而這個(gè)內(nèi)置的方法去轉(zhuǎn)化undefined和null時(shí)或拋出TypeError的錯(cuò)誤.因此當(dāng)被解構(gòu)的對(duì)象是undefined或null時(shí)，在發(fā)生解構(gòu)前就會(huì)拋出錯(cuò)誤。

默認(rèn)值是模式的一個(gè)特性： 如果對(duì)象的一個(gè)屬性或者數(shù)組的一個(gè)元素沒有在需要被結(jié)構(gòu)的值中找到對(duì)應(yīng)的屬性或值，那么最后這個(gè)屬性或者數(shù)組的元素的值將可能會(huì)是：

默認(rèn)值(如果進(jìn)行設(shè)置過)

undefiend(沒有設(shè)置默認(rèn)值)

來看下下面的例子：

    const [x = 3, y] = [];   //x = 3, y = undefined
    const {foo: x = 3, y} = {};     //x = 3, y = undefined

undefined將會(huì)觸發(fā)默認(rèn)值.例如：

    const [x = 1] = [undefined];   //x = 1
    const {prop: y = 2} = {prop: undefined};    //y = 2 

默認(rèn)值可以在需要的情況進(jìn)行計(jì)算后賦值，例如：

    const {prop: y = someFunc()} = someValue;

它事實(shí)上就相當(dāng)于:

    let y;
    if(someValue.prop === undefined) {
        y = someFunc();
    } else {
        y = someValue.prop;
    }

默認(rèn)值還可以通過任意的變量去設(shè)定:

    const [x = 3, y = x] = [];   //x = 3; y = 3
    const [x = 3, y = x] = [7];  //x = 7; y = 7
    const [x = 3, y = x] = [7, 2];  // x = 7, y = 2

但是要注意聲明的順序，

    const [x = y, y = 3] = [];   //ReferenceError

這種情況下是還未聲明變量y，就將變量y賦值給變量x。