你該知道的ES6那些事兒

CoffeX 發布于2019-08-22 18:42 / 3507人閱讀

摘要：最近重構了一個項目，引入了部分用法，最大的感受是讓這門語言變得更加嚴謹，更加方便。通過該方法獲得位置后還得比較一次才能判斷是否存在。再來看看的寫法使用數組來初始化一個，構造器能確保不重復地使用這些值。下面提供鏈接，供有興趣的朋友參考。

最近重構了一個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才能編程，但是掌握部分特性能提高開發效率。何樂而不為呢？這些都是我在項目中的使用心得，本文就當拋磚了。

GPU云服務器云服務器回事兒你不知道的你不知道的javascript 知道別人的ip怎么攻擊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96114.html

2019前端面試那些事兒

摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...

JeOam 2019-08-02 14:28 評論0 收藏0
2019前端面試那些事兒

摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...

QLQ 2019-08-26 13:33 評論0 收藏0
【回顧九月份第二周】前端你該知道的事兒

摘要：順便一說，這首歌的原唱是秋田，中島當年嗓子壞了，才有這歌。中文是直接翻譯來的，作曲是秋田。一部電影春夏秋冬又一春春夏秋冬又一春是由金基德執導，金英民吳英秀金基德主演的一部韓國電影。年月日于韓國上映。原鏈接： http://bluezhan.me/weekly/#/9-2 1、web前端 Angular vs. React vs. Vue: A 2017 comparison 9 S...

sixgo 2019-08-21 16:50 評論0 收藏0
【回顧九月份第二周】前端你該知道的事兒

摘要：順便一說，這首歌的原唱是秋田，中島當年嗓子壞了，才有這歌。中文是直接翻譯來的，作曲是秋田。一部電影春夏秋冬又一春春夏秋冬又一春是由金基德執導，金英民吳英秀金基德主演的一部韓國電影。年月日于韓國上映。原鏈接： http://bluezhan.me/weekly/#/9-2 1、web前端 Angular vs. React vs. Vue: A 2017 comparison 9 S...

levius 2019-08-30 15:53 評論0 收藏0