es6---desctructing

Object desctructing

    const obj = {first: 'jane', last: 'Doe'};
    const {first: f, last: l} = obj;
    
    // f = 'jane' l = 'Doe'
    
    // {prop}这种模式相当于 {prop: prop}
    const {first, last} = obj;
    // first = 'jane'  last = 'Doe'

Array desctructing

数组结构适用于具有Iterator接口的数据：

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

哪里可以用到解构赋值？

    //声明变量
    const [x] = ['a'];
    let [x] = ['a'];
    var [x] = ['a'];
    
    //赋值
    [x] = ['a'];
    
    //参数定义
    function f([x]) {...}
    f(['a']);

还可以在for-of的循环过程中使用

    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通过一些操作来新建一个对象

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

同时通过其他的一些操作来解析这个数据

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

我们可以通过对象字面量去新建一个对象:

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

在ES6中，解构允许使用相同的语法形式去获取数据，这种方式被称为对象模式

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

就像使用对象字面量创建一个有多个属性的对象那样，对象模式允许我们去获取对象的不同的属性。

模式

需要被解构的目标可以是以下三种中的一种:

• 给目标对象进行赋值

• 对象 {first: pattern, last: pattern}

• 数组模式 [pattern, pattern]

如下:

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

    //f = 123

当然你可以解构你所需要的属性值,例如:

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

模式是如何获取内部的值？

在一次赋值过程中 pattern = someValue, pattern是如何获取到someValue内部的值的？

对象模式强制将需要被解构的值转化为object(对象)

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

但是将需要被解构的值转化为object(对象)所调用的方法并非Object(); 而是内置方法ToObject;而这个内置的方法去转化undefined和null时或抛出TypeError的错误.因此当被解构的对象是undefined或null时，在发生解构前就会抛出错误。

数组模式

默认值

默认值是模式的一个特性： 如果对象的一个属性或者数组的一个元素没有在需要被结构的值中找到对应的属性或值，那么最后这个属性或者数组的元素的值将可能会是：

• 默认值(如果进行设置过)

• undefiend(没有设置默认值)

来看下下面的例子：

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

undefined将会触发默认值.例如：

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

默认值可以在需要的情况进行计算后赋值，例如：

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

它事实上就相当于:

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

默认值还可以通过任意的变量去设定:

    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。