美文网首页让前端飞Web前端之路技术干货
ES6数组,对象的解构赋值详解

ES6数组,对象的解构赋值详解

作者: Youthwithoutfai | 来源:发表于2019-05-27 22:15 被阅读0次

数组的解构赋值

情景一:声明多个变量,等于一个数组,相应的值会与数组里面的项对应起来,这里变量c有一个默认值5,如果数组中有对应的项,则会重新给C赋值,没有就返回默认值(注意:在没有给变量C默认值,数组中又没有对应的值的时候,将会返undefined)

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

情景二:运用...展开符给变量赋值,这里如果数组中有多余的项的时候,可以用...展开符后截取数组多余的项,如果不需要数组某个项,可以用逗号代替

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

应用场景:
函数里面返回一个数组,如果没有es6的解构赋值,将需要用一个变量接受函数返回的值,再用索引来取,就显得比较麻烦,这里有了解构赋值就特别方便

 function fn() {
      return [2, 15, 20, 30]
    }
    let a, b;
    [a, ...b] = fn()
    console.log(a, b); //2  [15, 20, 30]

对象的解构赋值

简单理解,就是将对象的键作为变量的名字,然后得到对象属性相应的值

{
    let { a, b } = { a: 3, b: 56 }
    console.log(a, b); //3 56
  }

应用场景:
后台返回的数据

 {
    let { statusCode: code, result: { title: b } } = {
      result: {
        title: '中国情'
      },
      statusCode: '200'
    }
    console.log(code, b); //200 中国情
  }

使用对象的解构赋值,简单处理一下是不是方便了很多呢
~~第一次写文章,如有不对之处,请多多指教!

相关文章

网友评论

    本文标题:ES6数组,对象的解构赋值详解

    本文链接:https://www.haomeiwen.com/subject/hxxltctx.html