数组解构赋值-一一网

“这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战”

数组解构赋值原理

1.模式（结构）匹配

索引值相同的完成赋值

 <script>
        // 1.模式(结构)匹配
        // []=[1,2,3];

        // 2.索引值相同的完成赋值
        // const [a,b,c]=[1,2,3];
        // console.log(a,b,c);

        // 遵从以上原则则可以进行一对一匹配
        // 不取的，可以直接用逗号跳过
        const [a,[b,d,f],c]=[1,[1,2,3],4];
        console.log(a,b,d,f,c);
    </script>
复制代码

数组解构赋值的默认值

 数组解构赋值的默认值
        1.默认值的基本用法
        const [a,b]=[];
        相当于
        const [a,b]=[undefined,undefined];
        console.log(a,b);
        对数组解析赋值默认值就是进行初始化
        const [a=1,b=2]=[];
        console.log(a,b);

        2.默认值的生效条件
        只有当一个数组成因严格等于(===)undefined式，对应的默认值才生效
        const [a=1,b=2] = [3,0];
        const [a=1,b=2] = [3,null];
        const [a=1,b=2] = [3];
        console.log(a,b);

        3.默认值表达式
        如果默认值是表达式，默认值表达式是惰性求职的
         const func = ()=>console.log('0123456');
        // const [x=func()]=[1];
        const [x=func()]=[];
        console.log(x);

复制代码

案例演示

<script>
        const arr = ["a",["b","c",["d"],[undefined,"g",["x"],["y"]]],"h",["l"]];
        const [a,[b,c,[d],[e=5,g,[q],[y]]],h,[l]]=arr;
        console.log(e,q);
    </script>
复制代码

数组解构赋值的应用

 <p>123</p>
    <p>456</p>
    <p>789</p>
    <script>
        // 1.常见的类数组的解构赋值,没有数组相关的方法
        // arguments
        // function func(){
            // arguments是类数组，没有数组相关的方法
            // console.log(arguments);
            // console.log(arguments.push);//undefined

            // 解构
        //     const [a,b]=arguments;
        //     console.log(a,b);//1,2
        // }
        // func(1,2);


        // NodeList
        // console.log(document.querySelectorAll('p'));
        // const [p1,p2,p3]=document.querySelectorAll('p');
        // console.log(p1,p2,p3);

        // 2.函数参数的解构赋值
        // const array = [1,1];
        // const add = arr => arr[0]+arr[1];
        // 解构赋值[x,y]=[1,1]
        // const add = ([x=0,y=0])=>x+y;
        // console.log(add(array));//2
        // console.log(add([]));//NaN,因为undefined+undefined等于NaN
        // 此时可以设置默认值避免出现NaN
        // console.log(add([]))//0
        
        // 3.交换变量的值
        let x=1;
        let y=2;

        // 一般交换中间变量
        // let temp=x;
        // x=y;
        // y=temp;
        // console.log(x,y);//2,1

        // 通过解构赋值进行交换
        [y,x]=[x,y];//相当于[y,x]=[1,2];
        console.log(x,y);//2,1
    </script>
复制代码