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

不須要遍歷數組，咱們就獲得了咱們想獲得的東西。

五 總結

經過上述例子，咱們能夠看出，解構賦值方便了從數組和對象中提取值，之後有這種需求的時候，首先想到的就是能不能該功能來解決。