es6 变量解构赋值的基本用法

变量解构赋值

  ES6 变量的解构赋值本质上是“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予匹配的右边的值，如果匹配不成功变量的值就等于undefined。

数组解构赋值

  数组解构赋值的匹配方式是“下标”。

  例一：

    let [a, b, o] = ['apple', 'banana', 'orange'];
    console.log(a, b, o); //apple banana orange

  例二：

    let [a, [b, c], d] = ['aa', ['bb', 'cc']];
    console.log(a, b, c, d); //aa bb cc undefined

  例三：

    let [a, b, ...other] = [1, 2, 3, 4, 5, 6, 7];
    console.log(a, b, other); //1 2 [3, 4, 5, 6, 7]

   注意： 这里的 ... 叫做扩展运算符（spread），在上述案例中它的作用是将剩余为匹配内容归纳为一个数组。当然，它还有其他的功能，比如“拆分数组”。

对象解构赋值

  对象解构赋值的匹配方式是“键名称”。

  例一：

    let { a, b } = { a: 'apple', b: 'banana' };
    console.log(a,b); //apple banana

  例二：

    let { a, b } = { a: 'apple', c:'hehehehehe', xx: 'xxxxxx', b: 'banana' };
    console.log(a,b); //apple banana

  例三：

    let { a, xx:{ b } } = { a: 'apple', xx: { b: 'boy'}, b: 'banana' };
    console.log(a,b); //apple boy

混合解构赋值（这个概念是我自己编的）

  从上面的“栗子”我们可以知道，ES6 的解构赋值其实讲究的就是“匹配模式”，即等号两面模式一致，就会赋予相应的值，未匹配的则为undefined。那么，下面的例子就顺理成章了。

  例一：

    let [a, b, {x: {c}, d}, e] = ['aa', 'bb', {o: 'oo', x: {v: 'vv', c: 'cc'}, d: 'dd'}];
    console.log(a, b, c, d, e); //aa bb cc dd undefined

  例二：

    let [arr, [obj]] = [[1, 2, 3], [{ a:'aa', b:'bb' }]];
    console.log(arr, obj); //[1, 2, 3] {a: "aa", b: "bb"}

函数参数解构赋值

  函数参数的解构赋值其实也是一样的，本质都是“匹配模式”，只不过这里是形参与实参之间的匹配。

  例如：

{
    //es6环境下的es5+es6写法
    function fun([a, b]) {
        return a + b;
    }
    console.log(fun([100, 150])); //250
}

{
    //es6写法
    let fun = ([a, b]) => a + b;
    console.log(fun([150, 100])); //250
}

  再例如：

    let fun = ([a, b], { o }) => [a, b, o];
    let fruits = fun(['apple', 'banana'], {g: 'grap', o: 'orange'});
    console.log(fruits); //["apple", "banana", "orange"]

  作为入门，学会以上解构赋值就够用了，需要深入了解请自行百科。