ES6 解构赋值用途

1.交换变量的值
2.从函数返回多个值
3.函数参数的定义
4.提取json数据
5.函数参数的默认值
6.遍历Map结构
7.输入模块的指定方法

1.交换变量的值

        // es5
        console.log("es5");
        var a = 100;
        var b = 200;
        var temp;
        temp = a;
        a = b;
        b = temp;
        console.log(a, b)

        // es6
        console.log("es6")
        var x = 1000,
            y = 2000;
        [x, y] = [y, x];
        console.log(x, y)

 /* es6 解构赋值用途二  从函数返回多个值 */
        // es5 
        function fun() {
            return [1, 2, 3]; // 返回多个值必须返回一个对象或数组
            // return {
            //     x: 2,
            //     y: 3
            // }
        };
        // es6
        var [x, y, z] = fun();
        console.log(x, y, z); // 1 2 3
        // 对象
        // es5 
        function fun1() {
            return {
                id: 2,
                name: ‘zasdasd‘
            }
        };
        // es6
        var {
            id,
            name
        } = fun1();
        console.log(id, name); //2 "zasdasd"
        var {
            id: newId,
            name: newName
        } = fun1();
        console.log(newId, newName); //2 "zasdasd"

<script>
        // 参数是一组有次序的值 如数组
        function fun([x, y, z]) {
            //x=1
            //y=2
            //z=6
            console.log(x, y, z)
        };
        fun([2, 4, 6]);

        // 参数是一组无次序的值 如对象
        function bun({
            x,
            y,
            name
        }) {
            console.log(x, y, name)
        }
        bun({
            x: 200,
            name: "asd",
            y: 2
        });
    </script>

 var jsonDate = {
            id: 7,
            name: "sad",
            age: 99,
            img: {
                pic1: ‘asd‘,
                pic2: ‘sss‘
            }
        };
        console.log(jsonDate);
        let {
            id: num,
            name,
            age,
            img: xxx
        } = jsonDate
        console.log(num, name, age, xxx.pic1)