ES6变量的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这个过程称为解构赋值。
在es6之前我们给一个变量赋值，是直接指定值，而在es6中我们可以这么写。

var arr = [1, 2, 4];
[a, b, c] = arr;
console.log(a, b, c);//1,2,4

上面这段代码，从数组中提取值，按照顺序对应，给变量赋值。

解构赋值只是一种简便写法，在我看来属于那种可有可无的东西，虽然没有什么太大用处，但是该了解还是要了解一下！

数组的解构赋值

在进行数组的解构赋值时我们要注意几个点

1.在进行解构赋值时，等号两边的模式一样，就可以成功赋值

上面的例子就可以完成解构赋值的效果

2.在不完全解构的情况下，也可以解构成功

(1）变量少值多，从左到右依次赋值

 let [a, b] = [1, 2, 3];
console.log(a, b);//1,2

(2)变量多值少 后面的变量为undefined

let [a, b, c] = [1, 2];
console.log(a, b, c);//1 2 undefined

3.如果等号左右模式不匹配 等号右边的元素不能被遍历 那么就会报错

如果等号右侧是数组：正常遍历

let [x] = [8];
console.log(x);//8

模式不匹配：报错

let [y] = false;
console.log(y);// TypeError: false is not iterable

TypeError: false is not iterable
类型错误 false不能被遍历*

如果是一个对象呢？：模式不匹配就会报错

let [z] = {a: 1};
console.log(z);//TypeError: {(intermediate value)} is not iterable

TypeError: {(intermediate value)} is not iterable
类型错误 中间值不可迭代

但是: 有一个问题，es6中字符串是可以成功解构赋值的

字符串解构赋值

虽然左右模式不匹配但是解构成功

let [f] = "xdgfjn";
console.log(f); // 打印x

官方文档给出的解释是，字符串被转换成了一个类似数组的对象。类数组的对象都有一个length属性，可以对这个属性解构赋值。
我们上面不是试过数组和对象匹配报错嘛，那我们这次试试类数组对象，众所周知js中的类数组对象最常用的要数arguments了，那就用arguments来举例。

 function nnS(n, m, z) {
            let [a, b, c] = arguments;
            console.log(a, b, c);//1 2 3
            a = 12
            console.log(n, m, z);//1  2  3
        }
        nnS(1, 2, 3)

可以看到解构赋值成功了，并且不会对arg和形参的映射关系有影响 。

对象解构赋值

数组都可以解构赋值，那么对象也要有

写法：

 let {
            name,
            age
        } = {
            name: "小李",
            age: 18
        };
        console.log(name, age); //小李 18

可以更简便的获取对象的属性（相对来说，没啥用就是了）
这里说一个小问题：
上面我用的name设置的属性名，在一些实际开发中要避免这个问题！
** window有默认的name属性 尽量不要用name命名**
可以打印一下window.name是一个空字符串。

console.log(window.name);//空字符串

1.对象的属性没有次序，变量必须与属性名同名，才能取到正确的值。

对象的解构与数组有一个重要的不同，数组的元素是按次序排列的，变量的取值由他的位置决定
而对象的属性没有次序，变量必须与属性名同名，才能取到正确的值。
那么我们来个例子试试：

var obj = {
            b: 12,
            c: 34,
            d: 67
        }
        let {
            a,
            d,
            c
        } = obj;
        console.log(a, c, d); //undefined 34 67

可以看到a在第一的位置，但是并没有获取到obj.b的值
而d,c虽然位置颠倒，但还是取到了对应的值。

2.如果想使用不同名的变量，就要写成键值对的形式

如果你非要在外面使用和对象内属性名不同的变量名，那你就这样写：

 let {
            a: sh,
            b: ch
        } = {
            a: 1,
            b: 2
        }
        console.log(sh, ch);//1 2

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

let {a,b} = {a: 1,b: 2}

是下面这种的简写方式：

let {a: a,b: a} = {a: 1,b: 2}

解构赋值的拓展

1.解构赋值允许设置默认值 ，但是只有在变量的值严格等于undefined时 默认值才会生效。

        let [x = 12] = ["nn"];
        console.log(x); //nn
        let [x = 12] = [undefined];
        console.log(x); //12
        let [x = 12] = [];
        console.log(x); //12

无论你数组是写了undefined，还是与该变量相对的值没有时，都会使用默认值。

2.默认值可以引用解构赋值中其他的变量 但是这个变量必须是声明过得

        let x = 3;
        let [y = x] = [];
        console.log(y); //3
        let [z = x] = [12];
        console.log(z); //12

你也可以使用你解构变量的变量名

        let [x = 1, y = x] = [3]
        console.log(x, y); //3   3

因为x相对的数组位置有值所以得到了数组的3，而y相对的没有值，所以使用了x的值。

3.如果默认值是一个表达式，那么这个表达式是惰性求值的

        function f1() {
            console.log(111);
            return 12;
        }

        let [x = f1()] = [12];
        console.log(x);

只有x相对的数组位置为undefined时才会执行后面的函数。
（最后只打印了12）

（如果这篇文章有什么问题请及时联系我！）