ES6 解构数据

  /**
         * 解构: 使数据访问更健康
         *
         * 对象和数组字面量是Javascript中最为常见的数据结构，由于JSON数据格式的普及
         *
         *  一、为何使用解构功能：
         *     开发者早期为了从对象和数组中获得特定的数据并赋值给变量，编写了很多同质化的代码
         */
        let options = {
            repeat: true,
            save: false
        };

        // 从对象中提取数据
        let repeat = options.repeat, save = options.save;
        // 如果想要获得更多变量，若其中还包含嵌套结构，只能依靠遍历，必须要深挖整个数据结构才能找到所需的数据

        // 对象解构
        let json = {
            age: 1,
            address: "上海"
        };

        let {age, address} = json; // age 和 name都是局部声明的变量，也是用来从 json对象读取相应属性名称
        console.log(age);      // 1
        console.log(address);  // 上海

        // 我们已经将对象解构使用到了变量的声明中, 同样也可以在赋值时使用解构语法
        // 2. 解构赋值
        let node = {
                type: 1,
                name: "张三"
            },
            type = 2,
            name = "李四";

        console.log(type); // 2
        console.log(name); // 李四

        // 使用解构为多个变量赋值, 从node对象读取相应的值重新为这两个变量赋值。请注意一定要使用一对（）包裹解构语句
        ({type, name} = node);

        console.log(type); // 1
        console.log(name); // 张三

        let data = {
            age: 10
        };

        // NOTE 解构赋值表达式（=右侧的表达式）如果为null 或者 为 undefined会使得程序抛出错误
        ({age} = data);

        var songAge = age;
        console.log(songAge); // 10

        data.address = null;

        ({age, address, name} = data);
        console.log(age + " >> " + address); //  10 >> null
        console.log(age + name); // NaN

        // 解构使用默认值
        let jack = {
            age: 21,
            name: "song"
        };
        ({age, name, address = '上海'} = jack);
        console.log(name + " >> " + age + " >> " + address); // song >> 21 >> 上海

        /*
        *  在目前的解构赋值使用的都是与对象属性同名的局部变量，例如 node.type的值存储在了type,
        *  如果你希望使用非同名的局部变量来存储对象属性的值，ECMAScript6的一个扩展语法可以满足需求
        * */
        // 3. 为非同名局部变量赋值
        let tom = {
            num: 1,
            sex: "男"
        };
        let {num: num, sex: typeFlag = 1} = tom;
        console.log(num); // 1
        console.log(typeFlag); // 男

        // 3. 嵌套对象解构
        let nodeInfo = {
            type: "html",
            name: "foo",
            loc: {
                start: {
                    line: 1,
                    column: 2
                },
                end: {
                    line: 2,
                    column: 1,
                    children: {
                        id: 1,
                        name: "song"
                    }
                }
            }
        };

        let {loc: song} = nodeInfo;
        console.log(song.start); // {line: 1, column: 2}
        console.log(song.start.line); // 1

        let {loc: {start}} = nodeInfo;
        console.log(start.line);   // 1
        console.log(start.column); // 2

        // 解构模式中使用了花括号，其含义是应当继续深入查找某个属性
        let {loc: {end: {children: resData}}} = nodeInfo;
        console.log("id: " + resData.id + ", name: " + resData.name); // id: 1, name: song

        // 与对象解构的语法的相比，数组解构就简单了，它使用的数组字面量且解构操作全部在数组内完成

        // 4. 数组解构
        let colors = ['red', 'green', 'blue'];
        let [firstColor, secondColor] = colors;
        // 在数组解构语法中，我们使用位置来进行选取
        console.log(firstColor, secondColor); // red, green
        // 如果只想取第三个值
        let [, , thirdColor] = colors;
        console.log(thirdColor) // blue
        console.log(colors[2]); // blue

        // 解构赋值
        let bgColors = ['red', 'blue', 'blue'];
        // 默认值
        [first, two = 'pink'] = bgColors;
        console.log(first + ">>" + two); // red >> blue

        // ES5中变量交换
        let a = 1, b = 2, tmp;

        tmp = a;
        a = b;
        b = tmp;
        console.log("a:" + a + ", b: " + b); // a: 2, b:1

        // ES6中变量交换
        [a, b] = [b, a]; // 右侧是一个为交换过程创建的临时数组字面量, 再进行数组解构赋值
        console.log("a:" + a + ", b: " + b); // a: 1, b:2

        // 5.数组嵌套结构
        colors = ["blue", "pink", ["red", "black"]];
        let [,,[colorRed]] = colors;
        console.log(colorRed); // red

        // 不定参数
        let [firstValue, ...otherData] = colors;
        console.log(firstValue); // blue
        console.log(otherData); // ["pink", ["red", "black"]]