ES6中的变量的解构赋值

目录

1. 数组的解构赋值：

2. 对象的解构赋值

 3. 复杂对象的解构赋值

4.  实际应用：

---

1. 数组的解构赋值：

例如：   

var [a,b,c] = [1,2,3];
    console.log(a,b,c);

结果输出：

              

数组的解构赋值：可以给变量添加默认值：a=1

2. 对象的解构赋值

  let {bar, foo} = {bar:"lili",foo:100};
    console.log(bar,foo);

                              

完整版本：

 let{bar:bar,foo:foo} = {bar:"lili",foo:100};
    console.log(bar,foo);
    

复杂的对象：

 let obj = {
        p:['hello',{y:'world'}]
    }
// 目标获取hello 与 world
    let{p:[x,{y:y}]} = obj;
    console.log(x,y);

结果输出：

                                    

 3. 复杂对象的解构赋值

 //字符串做数组
    let [a,b,c] = "var";
    console.log(a,b,c);

 输出结果为：

                       

4.  实际应用：

（1）. 交换2个变量的值：

  // 交换2个变量的值
    let a = 100;
    let b = 200;
    [a,b] = [b,a];
    console.log([a,b]);

 输出结果为：

                     

（2）.  提取json中的数据：

  // 提取json中的数据
    let jsonData = {
        id:1,
        status: "okokok",
        data:[1,2,3,4,5]
    }
    let {id, status, data} = jsonData;
    console.log({id, status, data});

 输出结果为：

                   

（3）. 用函数参数默认值

 // 用函数参数默认值
    function fn({id,name = '张三'}){
        console.log(id,name);
    }
   
    fn({id:4});

 函数执行结果为：