隨著javascript這門前端語言攻城掠地，覺得有必要深入了解一下這個語言了，為了大家更好的使用這門不是很好的語言，前端的大師們不斷造輪子，隨著es6的發(fā)布，es7的醞釀，這門語言越來越完備了。es6在es5的基礎(chǔ)上，加入了大量的語法糖，現(xiàn)在總結(jié)一下自己在實(shí)際項目中es6的應(yīng)用

對象字面量定義的變化

• 字面量定義對象
• 屬性值的簡寫
• 屬性名為變量
• 方法簡寫

箭頭函數(shù)

• 箭頭函數(shù)格式
• this作用域
• 箭頭函數(shù)的優(yōu)點(diǎn)及使用場景

對象字面量定義

不管在es5還是es6中，javascript 的書寫規(guī)范中也建議大家使用字面量對象來定義初始化javascript 對象。這個沒有什么不同

var person = {
   name : 'zhangsan',
   age : 20
}

屬性值的簡寫

在es5中定義一個對象，它的屬性值是變量，我們會按以下代碼

var name='bird man'
var age=20
var country=function(){
   return 'i am English'
}

var person={
  name : name,
  age : age,
  country : country
}

在es6中如果屬性名與屬性值的變量名相同，我們可以省略值的書寫，它隱含在es6中，一旦習(xí)慣了語法，你會發(fā)現(xiàn)代碼的可讀性和開發(fā)效率會得到提升，上面的代碼我們可以寫成下面的形式

var name='bird man'
var age=20
var country=function(){
   return 'i am English'
}

var person={
  name,
  age,
  country
}

屬性名是一個變量

有時我們定義一個對象時，基于變量或其他JavaScript表達(dá)式的名稱的屬性，而不是您預(yù)先知道的值。如下面的代碼片段在ES5中。

var expertise = 'journalism'
var person = {
   name : 'zhangsan',
   age : 23
}
person[expertise] = {
  years: 5,
  interests: ['international', 'politics', 'internet']
}

ES6中的對象字面量不限于使用靜態(tài)名稱的聲明。也可以使用動態(tài)屬性名稱，可以將任何表達(dá)式包裝在方括號中，并將其用作屬性名稱。當(dāng)達(dá)到聲明時，將計算得到的表達(dá)式并將其用作屬性名稱。以下示例展示了我們剛才看到的代碼片段如何在一個步驟中聲明person對象，而不必求助于第二個語句，

var expertise = 'journalism'
var person = {
   name : 'zhangsan',
   age : 23,
  [expertise] = {
      years: 5,
     interests: ['international', 'politics', 'internet']
   }
}

與其同時我們上面講過當(dāng)屬性值與變量名相同時，可以將屬性值省略掉，上面的代碼可以簡寫為

var expertise = 'journalism'
var journalism = {
    years: 5,
     interests: ['international', 'politics', 'internet']
}
var person = {
   name : 'zhangsan',
   age : 23,
  [expertise]
}

還有其他情況當(dāng)我們的屬性名是一個對象的屬性，我們可以直接用嗎，是的，我們沒必要通過第三個語句來添加屬性 grocery 到對象 groceries，如示例

var grocery = {
  id: 'bananas',
  name: 'Bananas',
  units: 6,
  price: 10,
  currency: 'USD'
}
var groceries = {
  [grocery.id]: grocery
}

我們寫代碼可能常常遇到這樣的情況，可能是每當(dāng)一個函數(shù)接收到一個參數(shù)，然后它應(yīng)該使用它來構(gòu)建一個對象。在ES5代碼中，您需要分配一個聲明對象字面量的變量，然后添加動態(tài)屬性，然后返回對象。

function getEnvelope (type, description) {
  var envelope = {
    data: {}
  }
  envelope[type] = description
  return envelope
}

在es6代碼中我們可以直接這樣寫，簡單明了

function getEnvelope (type, description) {
  return {
    data: {},
    [type]: description
  }
}

方法定義

通常，您可以通過向?qū)ο筇砑訉傩詠砺暶鲗ο笊系姆椒?，如下一個代碼段所示

var emitter ={
     var emit : function(){eventName}
 }

而在es5中就加入了對象的get ，set 方法，它們的寫法與其他的定義普通方法有區(qū)別，如下代碼

var reserves = 4
var spaceship = {
  get fuel () {
    return reserves
  },
  set fuel (value) {
    reserves = value
  }
}

從ES6開始，可以使用類似的語法在對象字面量上聲明常規(guī)方法。唯一的區(qū)別是，你需要省略一個前綴，如get和set。同時提供了一種替代傳統(tǒng)方法聲明的簡潔方法，您不需要使用function關(guān)鍵字。以下示例顯示了使用ES6語法定義spaceship 。

var reserves = 4
var spaceship = {
  get fuel () {
    return reserves
  },
  set fuel (value) {
    reserves = value
  },
  deplete () {
    reserves = 0
  }
}
spaceship.fuel = 10
spaceship.deplete()