es6 - 解构赋值

一 咱们为何要使用解构

在学习ES6新的特性解构赋值以前，咱们先来看看为何要使用解构，之前若是咱们须要获取对象或者数组里面的数据，而且把它们存入数组，须要写不少代码。以下

const person = {
  name: 'little bear',
  age: 18,
  sex: '男'
}
let age = person.age
let name = person.name
let sex = person.sex

能够看到，咱们仅仅想从简单对象中获取相应的数据，对须要写不少重复的代码，若是咱们仅仅只是想从更复杂的数据结构中获取某一个数据的话，那么可能会须要大量的遍历操做才可以完成。
基于此，es6为咱们推出了解构赋值这个特性。咱们能够更简单的获取对象或者数组中的数据。

二 什么是解构

解构赋值语法是一个Javascript表达式，这使得能够将数据从数组或对象提取到不一样的变量中(这段话是mdn中关于解构赋值的定义，注意这里的定义，能够看出解构主要用在数组和对象上)。
仍是上面这个需求，若是咱们使用解构赋值的方法，那么书写方式以下

const person = {
  name: 'little bear',
  age: 18,
  sex: '男'
}
let { name,age,sex } = person

对比es6以前的语法，发现获取对象中的数据并存储在变量中是否是变得更简洁了呢？

三 数组的解构

咱们在平常开发中，一般会碰到须要提取数组中的某一项，并把它放在变量中这种需求，那么如何用解构赋值来实现呢？

let nbaStars=['yaoming','kobe','james','paul']
let [chinaStar,...usaStar] = nbaStars
let [,,,myidol] = nbaStars
console.log(usaStar,chinaStar,myidol)
//output yaoming ['kobe','james','paul'] paul

还有一种用法，能够交换变量的值，仍是上面的例子，若是我想让paul成为中国球星，而姚明变成我最喜欢的球星的话，之前我须要设置一个临时变量，而后经过临时变量让他们交换值，如今能够直接经过解构赋值来交换

[chinaStar,myidol] = [myidol,chinaStar]
console.log(chinaStar,myidol)
// paul,yaoming

从上面的例子中，咱们基本上就能看出解构数组的用法，解构数组能够省略参数，可使用剩余参数。能够经过解构赋值来交换两个变量，是一种很是好的从数组中提取数据的方法。

四 对象的解构

对象的解构和数组的解构相似，下面举一个例子来看看对象解构和函数解构都用到的状况

const rocketsTeam = {
    name:rockets,
    players:[
      {
         name:'james harden',
         age: 18,
         role: 'sg'
      },
      {
         name:'yao ming',
         age: 12,
         role: 'c'
      }
    ],
    city:'houston'
}

若是咱们要把姚明的角色找出来并存在变量中怎么办呢？es6以前咱们须要遍历对象数组才能实现这一需求，看看es6的解构赋值特性有没有帮助到咱们吧？

let {players:[,{role:playerRole}]} = rocketsTeam
console.log(playerRole) 
//output  C

不须要遍历数组，咱们就获得了咱们想获得的东西。

五 总结

经过上述例子，咱们能够看出，解构赋值方便了从数组和对象中提取值，之后有这种需求的时候，首先想到的就是能不能该功能来解决。