你該知道的ES6那些事兒

最近重構了一個SPA項目，引入了部分ES6用法，最大的感覺是ES6讓javascript這門語言變得更加嚴謹，更加方便。本篇將結合實戰經驗，對最經常使用的部分ES6語法進行說明，並對比ES6以前的作法，談談使用ES6的好處。

模板字面量

在es6以前，在js中拼接字符串，能夠這樣：

let name = 'es6'
let str = 'Hello, ' + name + '.'

而在es6中，能夠用使用反引號（`）來包裹普通字符串，以下：

let name = 'es6'
let str = `Hello, ${name}.`

用來拼接變量時仍是很方便的。

includes() 方法

在數組和字符串中，常常會遇到這樣一個問題：判斷該數組或字符串中是否存在某個值。
在ES6以前，能夠這樣作：

let str = 'abcdef'
console.log(str.indexOf('b') > -1)

這固然沒有問題，可是語義上顯得不夠直觀，indexOf()方法是得到指定值的索引位置。經過該方法得到位置後還得比較一次才能判斷是否存在。
咱們再來看看ES6的做法：

let str = 'abcdef'
console.log(str.includes('b'))

顯得更加清晰明瞭。可是，若是判斷某個值是否在數組或字符串中存在，那麼includes方法是很是方便的，但若是要得到某個值的索引位置，仍是indexOf方法更合適。includes方法並非indexOf方法的替代。
注意：和indexOf()同樣，includes()在數組和字符串中均可以使用。

擴展運算符

求最值

求最值是很常見的一個操做，咱們先看看在ES6以前是怎麼作的：

let arr = [25, 50, 999, 100]
console.log(Math.max.apply(Math, arr))

該方法是可行的，但使用 apply() 讓人以爲有一絲困惑，這裏使用的額外語法混淆了代碼的真實意圖。
再看看ES6的寫法：

// Math.max() 不容許傳入數組
// 因此咱們用擴展運算符把數組中的值展開成多個獨立的值，再傳入
console.log(Math.max(...arr))

這樣的代碼是否是看起來清晰多了？而且擴展運算符還能夠與其餘參數混用，好比：

console.log(Math.max(...arr, 1000, 888))

數組去重

這是一個很高頻的面試問題，ES6以前，能夠這樣：

function unique(arr) {
  let temp = []
  for (let i = 0; i < arr.length; i++) {
    if (temp.includes(arr[i]) === false) {
      temp.push(arr[i])
    }
  }
  return temp
}

let numbers = [2, 2, 3, 6, 2, 3, 5]
console.log(unique(numbers))

固然數組去重有多種寫法，我這裏只列舉一個，供你們參考。
再來看看es6的寫法：

let arr = [2, 2, 3, 6, 2, 3, 5]
arr = [...new Set(arr)]
console.log(arr)

使用數組來初始化一個Set，Set構造器能確保不重複地使用這些值。很明顯，es6的寫法更簡潔明瞭。

Vuex中的使用

export default {
  computed: {
    // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter'
    ])
  }
}

用過vuex的應該熟悉這樣一段代碼，這裏運用擴展運算符配合mapGetters 輔助函數，會將上面代碼解析成以下形式：

export default {
  computed: {
    doneTodosCount () {},
    anotherGetter () {}
  }
}

對象的簡寫

現有一個對象構造函數，其返回一個對象，對象中包含屬性和值，在es6以前，寫法以下：

function createPerson (name, age) {
  return {
    name: name,
    age: age
  }
}

es6提供了簡寫方式，當對象的一個屬性名稱與本地變量名相同時，你能夠簡單書寫名稱而省略冒號與值。能夠這樣：

function createPerson (name, age) {
  return {
    name,
    age
  }
}

這個特性在vue單文件組件中會經常遇到，好比：

components: {
  otherComponent
}

方法的簡寫

現有一個對象，對象中有一個方法，在es6以前，方法能夠這樣寫：

var person = {
  name: 'foo',
  sayName: function () {
    console.log(this.name)
  }
}

es6提供了簡寫方法的寫法，經過省略冒號與function關鍵字，你能夠這樣：

var person = {
  name: 'foo',
  sayName () {
    console.log(this.name)
  }
}

延伸閱讀

本文只列出了部分es6語法，對於有些特性，如promise，箭頭函數，await等，在個人項目中也會頻繁使用，但網上有很好的文章，就不細說了。下面提供連接，供有興趣的朋友參考。
大白話講解Promise
ECMAScript 6 入門
理解 JavaScript 的 async/await

參考資料

ECMAScript 6 入門
Understanding ECMAScript 6

小結

ES6讓js這門語言變得更加精細，更增強大。雖然不是非得掌握es6才能編程，可是掌握部分特性能提升開發效率。何樂而不爲呢？這些都是我在項目中的使用心得，本文就當拋磚了。