ES6解构赋值（数组解构赋值、对象解构赋值）

1.数组解构赋值定义

ES6 允许按照一定模式，从数组中提取值，对变量进行赋值，这被称为解构赋值

解构赋值可以方便地将一组参数与变量名对应起来。

（可以很方便的提取我们数组中的值）

2.数组解构赋值模式匹配

• 只要等号两边的模式相同，左边的变量就会被赋予对应的值
• 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错
• 如果解构不成功，变量的值就等于undefined。如果扩展运算符结构不成功值为空数组 []
• 可以将字符串转为真正的数组；
• 定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组；没有定义的会报错

2.1只要等号两边的模式相同，左边的变量就会被赋予对应的值

        let [foo, [[bar], baz]] = [1, [[2], 3]];
        console.log(foo,bar,baz);//1 2 3

        let [, , third] = ["foo", "bar", "baz"];
        console.log(third);// "baz"
        
        let [x, , y] = [1, 2, 3];
        console.log(x,y);

2.2 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

        // 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错
        let [head, ...tail] = [1, 2, 3, 4];
        console.log(head,tail);//3, [2, 3, 4]
        let [...tail, head] = [1, 2, 3, 4];//Uncaught SyntaxError: Rest element must be last element

2.3 如果解构不成功，变量的值就等于undefined。如果扩展运算符结构不成功值为空数组 []

        let [x, y, ...z] = ['a'];
        console.log(x,y,z);//a undefined []

2.4 可以将字符串转为真正的数组

        let arr = [...'hello']
        console.log(arr);//['h', 'e', 'l', 'l', 'o']

2.5 对象转数组

• 定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组
• 如果对没有 Iterator 接口的对象，使用扩展运算符，将会报错

        let nodeList = document.querySelectorAll('div');
        let array = [...nodeList];

        let map = new Map([
            [1, 'one'],
            [2, 'two'],
            [3, 'three'],
        ]);

        let arr = [...map.keys()]; // [1, 2, 3]
        console.log(array,map,arr);//Map(3), {1 => 'one', 2 => 'two', 3 => 'three'} ,(3) [1, 2, 3]

        const obj = {a: 1, b: 2};
let arr = [...obj]; //Uncaught TypeError: obj is not iterable

3.对象解构赋值定义

对象解构赋值允许你使用对象字面量的语法将对象的属性赋给各种变量。

作用：解构赋值可以方便地将一组参数与变量名对应起来。可以很方便的提取我们对象中的值

let person = {
  name:'张三',
  age:12
}
let {name,age} = person;
console.log(name);
console.log(age);

3.1对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };

3.2如果解构失败，变量的值等于undefined。

3.3注意对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz);//aaa
console.log(foo);//myIndex.html:50 Uncaught ReferenceError: foo is not defined

3.4与数组一样，解构也可以用于嵌套结构的对象。

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]};
  let { p: [x, { y }] } = obj;
//   注意这里真正被赋值的事x,y，所有获取p会报错
  console.log(x,y);
  console.log(p);

3.5对象的解构赋值可以取到继承的属性。Object.setPrototypeof(obj1,obj2)/ obj1.__proto__ = obj2;

const obj1 = {};
const obj2 = { foo: 'bar' };

// Object.setPrototypeOf方法用来设置一个对象的原型对象
// Object.setPrototypeOf(obj1,obj2);
// 通过原型链，将obj1指向obj2，相当与obj1.prototype = obj2,则obj1就可以获取obj2上的属性
obj1.__proto__ = obj2;
console.log(obj1,obj2);

//打印obj1为 {}但是可以获取obj1.foo为bar，实际获取的是obj2的原型上的属性
console.log(obj1,obj2);
console.log(obj1.foo);

3.6指定默认值：对象的解构也可以指定默认值

var {x = 3} = {}; 
console.log(x); // 3

var {x, y = 5} = {x: 1};
console.log(x,y); //1,5

var {x: y = 3} = {};
console.log(y);//3

var {x: y = 3} = {x: 5};
console.log(x,y);

var { message: msg = 'Something went wrong' } = {};
console.log(msg);// "Something went wrong"

3.7默认值生效的条件是，对象的属性值严格等于undefined。(没有设置属性及属性值)

// 默认值生效的条件是，对象的属性值严格等于undefined。(没有设置属性及属性值)
var {x = 3} = {x: undefined};
console.log(x);//3

var {x = 3} = {x: null};
console.log(x);
// 上面代码中，属性x等于null，因为null与undefined不严格相等，所以是个有效的赋值，导致默认值3不会生效。