es6解构赋值

Aphorism

coding changes the world , accumulating makes yourself

主要从三个方面讲述：

1. 数组式的解构赋值
2. 对象式的解构赋值
3. 函数中的解构赋值

   // preface
       // 现今的变量声明语法十分的直接：左边是一个变量名，右边可以是一个数组：[]的表达式或一个对象：{ } 的表达式，等等。解构赋值允许我们将右边的表达式看起来也像变量声明一般，然后在左边将值一一提取

       // 1. 数组解构赋值
       // 1.1 传统方法: 为数组中元素起一个 alias
        var value = [1,2,3,4,5];
        var el1 = value[0],el2 = value[1], el3 = [2];
        // 1.2 es6 方法
        let value = [1,2,3,4,5];
        let [el1,el2,el3] = value; // 对应前三个元素有了 alias
        // 1.3 两个变量交换值的时候 不再需要临时变量了
        [a,b] = [b,a] // 感觉和 python 的路线有点像
        // 1.4 解构赋值的套欠
        let [el1,el2,[el3,el4]] =  [1, 2, [3, 4, 5]];

        // 1.5 指定位置的赋值
        let [el1,,el3,,el5] = [1,2,3,4,5];
        // 1.5.1 example

        var  [,firstName, lastName] = "John Doe".match(/^(\w+) (\w+)$/);

        // 1.6 指定默认值:需要注意的是默认值只会在对undefined值起作用(也就是说默认值的时候首先会检测 右侧是否赋值 undefined)
        var [firstName = 'John', lastName = 'Joe'] = [];
        // 1.6.1 下面的值 是 null
        var [firstName = "John", lastName = "Doe"] = [null, null];

        // 1.7 rest 参数，休止符,tail 变量将会接收 数组的剩余元素(注意：tail 变量后面不能有其他变量了)

        var vlaue = [1,2,3,4,5];
        var [el1,el2,el3,...tail] = value;


        // 2. 对象的解构赋值
        // 与数组解构赋值的方式几乎完全一样
        // 可以这样理解： 数组是通过位置 序号来赋值的，plainObj 是通过键名来赋值的。（本质上数组的位置，序号也就是键名）
        // 2.1 对象的解构赋值
        var person = {firstName: 'John', lastName: 'Doe'};
        var {firstName, lastName} = person;
        // 2.2 ES6允许变量名与对应的属性名不一致。这里相当于声明了name 和 lastName 两个变量

        var person = {firstName: 'John', lastName: 'Doe'};
        var  {firstName: name,lastName} = person;


        // let person = { firstName: 'Jhon', lastName: 'Joe' };
        //     undefined
        //     let { firstName: name, lastName } = person
        //     undefined
        //     firstName
        //     VM120: 1 Uncaught ReferenceError: firstName is not defined
        //     at<anonymous>:1:1

        // 2.3 深层套欠对象赋值, 
        // note: 此时，name 变量并没有声明

        var person = {name: {firstName: 'John', lastName: 'Doe'}};
        var {name: {firstName, lastName}} = person;

        // 2.4.1 对象包裹数组
        var person = {dateOfBirth:[1,1,1980]};
        var {dataOfBirth:[day,month,year]} = person;
        // 2.4.2 array is around Object 

        var person = [{dateOfBirth: [1,1,1980]}];
        var [{dateOfBirth}] = person;

        // 2.5 obj deconstruction uses default value
        // note: 默认值使用的是 赋值符号不是 冒号
        var { firstName = "John", lastName: userLastName = 'Doe'}= {};

       // 默认值同样也只会在对undefined值起作用，下面的例子中firstName和lastName也都将是null：

            var { firstName = "John", lastName = "Doe" } = { firstName: null, lastName: null };

        // 3.0 函数参数的解构赋值
        // ES6中，函数的参数也支持解构赋值。这对于有复杂配置参数的函数十分有用。你可以结合使用数组和对象的解构赋值。
        // 3.1传统写法
        function findUser (userId, options) {
            if (options.includeProfile) {}
            if (options.includeHistory) {}
        }
        // 3.2 es6 写法(真是太简洁了)
        function findUser (userId, {includeProfile, includeHistory}) {
            if (includeHistory) {}
            if (includeProfile) {}
        }



        // supplement
        // note: 我们是对变量赋值 所以即使是对象，左边 一般也是只有键没有 value 的, 如果 对象 deconstruction 时候，value 处有值，那么 该键对应的变量是不会被声明的
        // 有了数组的解构赋值，多变量同时赋值的写法改变
        // s1.1.1 传统 
        var a = 1, b = 2, c =3;
        // s1.1.2 es6
        let [a,b,c] = [1,2,3];

        // 总结： 1. 可以同时声明多个变量 并且对多个变量进行赋值 2. 对于返回的数组或者 plainObj 可以直接一次性取值 3. 对于复杂的 对象包裹 取值也不需要不断的链式，直接字面量取值