js解构赋值

解构赋值中常见的报错：

        const arr = ["zhangsan",18,"c"]

        let [name,age,grade] = arr; //name:"zhangsan"   age:18  grade:"c"

        let [a,b,c,d] = arr  //a:"zhangsan"   b:18  c:"c"   d:undefined

        [a,b,c,d] = arr  

会报错如下图，报错原因是因为缺少;

 这种报错在[]、（）开头的时候会出现，主要是因为解释器为代码添加；的时候出错，解决办法是在[]、（）开头代码前添加；

;[a,b,c,d] = arr  即可

数组的解构赋值用法

（1）可以采用...的方式将参数存储在数组中

        let arr = [1,2,3,4,5];
        let [a,b, ...c] = arr
        console.log(a,b,c);//1 2   (3) [3, 4, 5]

（2）设置默认值

        let arr = [1,2];
        let [a,b, c] = arr
        console.log(a,b,c);//1 2   undefined
        [a,b, c=5] = arr
        console.log(a,b,c); //1 2 5

（3）数值交换

        //解构赋值
        let name = "zhangsan", describe="hello";
        [name, describe] = [describe, name]
        console.log(name, describe) //hello zhangsan

其中左侧[name, describe] 代表着解构赋值需要赋值的变量，右侧是一个数组，有两个元素，第一个元素值为“hello”，第二个元素值为“zhangsan”

对象的解构赋值

(1)变量标识需要跟对象的属性保持一致

        let obj = {
            name: "zhangsan",
            age: 18
        }
        let { name, age, grade } = obj ;//声明变量同时解构赋值
        console.log(name, age, grade);//zhangsan 18 undefined    没有的属性返回undefined

（2）设置别名

        let { name:a, age:b } = obj
        console.log(a,b); //zhangsan 18

（3）设置默认值

        let { name:a, age:b, grade:c="默认值" } = obj //声明变量同时解构赋值
        console.log(a,b,c); //zhangsan 18 默认值

（4）报错

        let { name:a, age:b, grade:c="默认值" } = obj;
        { name:a, age:b, grade:c="默认值" } = obj; //Uncaught SyntaxError: Unexpected token ':' 

报错的原因是因为 {} 开头，js解释器会自动把它当作是代码块，需要用括号括起来即可

        ({ name:a, age:b, grade:c="默认值" } = obj); 
        console.log(a,b,c); //zhangsan 18 默认值