变量的解构赋值→数组的解构赋值

逃离我推掉我的手 2022-01-12 18:19 337阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>数组的解构赋值</title>
    </head>
    
    <body>
        <script>
            /*
            如果你想获得numbers里面的one 和 two，可以进行下面的操作
            */
            const numbers = ['one', 'two', 'three', 'four'];
            const [one, two] = numbers;
            console.log(one, two);
    
            /*
            如果你想获得numbers里面的one 和 three，可以进行下面的操作
            */
            const numbers1 = ['one', 'two', 'three', 'four'];
            const [one1, , three1] = numbers1;
            console.log(one1, three1);//one three
    
    
            /*
            如果你想获得numbers里面的one 和 其它剩余所有的元素，可以进行下面的操作.
            */
            //注意1:...others2会形成一个新的数组；
            const numbers2 = ['one', 'two', 'three', 'four'];
            const [one2, ...others2] = numbers2;
            console.log(one2, others2);//one (3) ["two", "three", "four"]
    
            //注意2:...others3必须是数组的最后一个元素，如果不是最后一个元素就会报错；
            // const numbers3 = ['one', 'two', 'three', 'four'];
            // const [one3, ...others3, tow3] = numbers3;
            // console.log(one2, others2,tow3);//报错：Uncaught SyntaxError: Rest element must be last element
            
    
    
            /*
            小例子：练手
            交换a和b的值,最后结果为：a=20，b=10
            */
              //ES5
            let a=10;
            let b=20;
    
            let c;
            c=a;
            a=b;
            b=c;
            console.log(a,b);
    
            //ES6
            a=10;
            b=20;
    
            [a,b]=[b,a];
            console.log(a,b);
    
        </script>
    </body>
    
    </html>