ES6-解构赋值

每日一记之—ES6-解构赋值

介绍

解构赋值是对赋值运算符的一种扩展，他针对数组和对象来进行操作

优点：代码书写上简洁易读

正文

1.对对象解构

在ES5中，对这个对象进行操作需要先对它取值后面再取个变量进行赋值，举个栗子

let book = {
      type:'math',
      name:'gaodengshuxue'
    }
    let type = book.type
    let name = book.name
    console.log(type,name)

在es6中可以变得简易许多：

 let book = {
      type:'math',
      name:'gaodengshuxue'
    }
    //完全解构
    //括号中的必须是对象中的属性名
    let {type,name} = book
    console.log(type,name);

再举个栗子

let obj = {
      a:{
        name:'yoyo'
      },
      b:[],
      c:'hahah'
    }
    //不完全解构 可忽略某些属性
    let { a } = obj;
    console.log(a);

    //我们还可以用剩余运算符，把其余的属性给解构出来
    let {a,...res} = obj;
    console.log(res);

可以有默认值：

let {a,b=30} = {a:20};
//在这里，a为20，b为30

2.对数组解构

 let arr=[1,2,3];
    let [a,b,c] = arr;
    console.log(a,b,c); //得到的结果是1 2 3

可嵌套：

let [a,[b],c] = [1,[2],3];

跟解构对象差不多，也是可以完全解构和不完全解构，写法参照上边对象栗子