es6-2 解构赋值

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

数组解构赋值

{
    let a, b, rest
    [a, b] = [1, 2]
    console.log(a, b) // 1 2
}

结构赋值展开符特性

{
    let a, b, rest
    [a, b, ...rest] = [1, 2, 3, 4, 5, 6]
    console.log(a, b, rest) // 1 2 [3, 4, 5, 6]
}

结构赋值可以设置默认值, 并且如果左右匹配数量不对, 未匹配到的变量值为 undefined

{
    let a, b, rest
    [a, b, rest = 3] = [1, 2]
    console.log(a, b, rest) // 1 2 3
}
{
    let a, b, rest
    [a, b, rest] = [1, 2]
    console.log(a, b, rest) // 1 2 undefined
}

解构赋值使用场景--变量值交换

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

函数多个返回值的接收

{
    function test() {
        return [1, 2]
    }
    let a, b
    [a, b] = test()
    console.log(a, b) // 1 2
}

选择性接收值

{
    function test() {
        return [1, 2, 3, 4]
    }
    let a, b
    [a, , b] = test()
    console.log(a, b) // 1 3
}

不知道返回值返回几个, 只要第一个, 剩余的可以接收数组形式

{
    function test() {
        return [1, 2, 3, 4]
    }
    let a, b
    [a, ...b] = test()
    console.log(a, b) // 1 [2, 3, 4]
}

对象解构赋值

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

对象结构赋值默认值

{
    let {a = 10, b = 5} = {a: 3}
    console.log(a, b) // 3 5
}

使用场景, 服务端返回数据

{
    let metaDate = {
        title: 'title',
        test: [
            {
                title: 'test',
                desc: 'description'
            }
        ]
    }
    let {title: esTitle, test: [{title: cnTitle}]} = metaDate
    console.log(esTitle, cnTitle) // title test
}

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

使用场景, 对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

let { log, sin, cos } = Math;

上面代码将Math对象的对数、正弦、余弦三个方法，赋值到对应的变量上，使用起来就会方便很多。

字符串解构赋值

{
    let a, b, c, d
    [a, b, c, d] = '中华曲库'
    console.log(a, b, c, d) // 中 华 曲 库

    let {length : len} = 'hello';
    console.log(len) // 5
}

变量解构赋值的用途：

1. 交换变量的值。[x,y]=[y,x];
2. 从函数返回多个值。函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
3. 函数参数的定义。解构赋值可以方便地将一组参数与变量名对应起来。
4. 提取JSON数据
5. 函数参数的默认值
6. 遍历Map结构
7. 输入模块的指定方法