3、ES6笔记之解构赋值

1.基础用法

<script>
    // 原来
    var arr = [1, 2, 3];
    console.log(arr[0], arr[1], arr[2])

    //使用解构赋值1
    let [a, b, c] = [1, 2, 3];
    console.log(a, b, c)

    //使用解构赋值2
    {
        let [a, [b, c]] = [1, [2, 3]];
        console.log(a, b, c)
    }
</script>

<script>
    {
        let json = {
            name: '小仙女',
            age: '18',
            paly:'1'
        }

        let {name,age,paly} = json;   //let里的name,age,paly  要与json里的统一
        console.log(name,age,paly);

        //也可以这样写 给定义别名
        let {name:a,age:b,paly:c} = json;   //let里的name,age,paly  要与json里的统一
        console.log(a,b,c);


    }
    
</script>

2. 结构赋值设置默认值

<script>
    {
        let [a, b, c] = ['aa', 'bb',undefined];
        console.log(a, b, c); //打印结果: aa bb undefined
    }
</script>

<script>
    // 解构赋值设置默认值
    {
        let [a, b, c = 'cc'] = ['aa', 'bb'];
        console.log(a, b, c); //打印结果: aa bb cc
    }

    {
        let [a, b, c = 'cc'] = ['aa', 'bb',undefined];
        console.log(a, b, c); //打印结果: aa bb cc
    }
</script>

<script>
//这种写法也行  但是不建议使用这种先定义在使用的写法
  {
    let a;
    ([a]=[1])
    console.log(a)   //1
  }

</script>

3.解构赋值交换两个数位置

// 原来：
    {
        //利用加法换值
        let a = 1,
            b = 2;
        let c = a + b;
        a = c - a;
        b = c - b;
        console.log(a, b)
    }

    {
        //先把其中某一个值用变量保存
        let a = 1,
            b = 2;
        let c ;
        c=a;  
        a=b;
        b=c;
        console.log(a, b)
        
    }

4.函数使用结构赋值

<script>
    {
        function get() {
            return {
                left: 10,
                top: 10
            }
        }

        ({
            left,
            top
        } = get());
        let {
            left: l,
            top: t
        } = get();

        console.log(left, top) //10 Window 对象    因为Window 已经定义过top属性
        console.log(l, t) //10 10
    }
</script>


<script>
    {
        function show({
            a,
            b
        }) {
            console.log(a, b) //1,2
        }

        show({
            a: 1,
            b: 2
        })
    }
</script>


<script>
    //给默认值
    {
        function show({
            a,
            b = 2
        }) {
            console.log(a, b) //1,2
        }

        show({
            a: 1
        })
    }
</script>