前言

最近工作開始學習到 React，順便記錄一下屬於 ES6 的好用語法

JavaScript 的 ES6 是 ECMAScript 語言標準的第六個版本，而 ECMAScript 是 JavaScript 的標準化版本，由 ECMA 國際制定。ES6 於 2015 年 6 月正式發布。

ES6 引入了很多新特性和改進，使得 JavaScript 更易於編寫、閱讀和維護！

箭頭函式

下方是初學者一開始會學到的基礎函式！

function showMeTheMoney(money) {
  return 'Yo! I got $' + money + 'dollars'
}
console.log(showMeTheMoney(1000))
// Yo! I got $1000 dollars

而下方的程式碼就是箭頭函式

故名思義它擁有一個箭頭， ES6 讓我們用更簡短的方式來定義函式

如果是單一一行的話會直接 return 結果，我們就不用特別定義

還有啊！若是單一參數可以不需要加上小括號

const showMeTheMoney = (money) => `Yo! I got $${money} dollars`
console.log(showMeTheMoney(1000))
//  Yo! I got $1000 dollars

字串樣版

剛剛在上方的示範中會看到我們在箭頭函式裡面回傳的字串中穿插了變數！

以前的寫法要像下面這樣，分隔字串和變數在做相加，真的超難寫超爛…

const a = 5
const b = 10
console.log('我有' + a + '元，你有' + 10 + '元')
//我有 5 元，你有 10 元

現在 ES6 提供給我們更強大的穿插變數的方式！

const a = 5
const b = 10
console.log(`我有${a}元，你有${b}元`)
//我有 5 元，你有 10 元

也就是在字串中把變數放入${}的符號裡面，就能夠正常的顯示你要的內容

好用到不行

物件屬性名稱縮寫

下面是舊版的物件屬性名稱寫法：

const likeFood = 'apple'
const likeDrink = 'beer'
const likeShow = 'MLB'
const Me = {
  likeFood: likeFood,
  likeDrink: likeDrink,
  likeShow: likeShow
}

下面這個，就是 ES6 新的物件屬性名稱縮寫！

const likeFood = 'apple'
const likeDrink = 'beer'
const likeShow = 'MLB'
const Me = {
  likeFood,
  likeDrink,
  likeShow
}
//Me.likeFood = 'apple'

有看出什麼差別嗎？最大的不同就在於 key & value 若是相同命名就可以節省成一個

解構賦值

解構賦值是我一開始最難理解也最看不懂的，但懂了之後真的很方便

以前要提取某個物件的值：

const props = {
  name: 'Robert',
  phoneNumber: '123456'
}
const name = props.name
const phoneNumber = props.phoneNumber
console.log(name) // Robert
console.log(phoneNumber) // 123456

下面是 ES6 提供的解構賦值：

const props = {
  name: 'Robert',
  phoneNumber: '123456'
}
const { name, phoneNumber } = props
console.log(name) // Robert
console.log(phoneNumber) // 123456

看出差別了嗎？可以把兩行的定義，變成一行，若是要定義 5 個不同的變數，它就會是你最好的朋友！

應用在函式裡面也非常方便，把一個物件直接傳進去，擷取需要的值就可以了！

展開符號

這個新的符號也是非常實用，不僅可以展開物件或是陣列

同時還保有原有的值，等於是複製 ( 這邊是屬於淺拷貝 ) 一份過去的概念，超級無敵實用！

const robert = {
  name: 'Robert',
  phone: '123456'
}
const newRobert = {
  ...robert,
  hair: 'short',
  skin: 'black'
}
console.log(newRobert)
// {name: 'Robert', phone: '123456', hair: 'short', skin: 'black'}

其餘符號

和展開符號長得一樣，好處是可以不影響傳進來的參數

進而只提取需要的部分，甚至拿來切割陣列分別操作也可以，非常實用

const arrray = [1,2,3,4,5,6]
const [one, two, ...others] = arrray
console.log(one) = 1
console.log(two) = 2
console.log(others) = [3,4,5,6]

Robert Chang

技術部落格

JavaScript ES6 的新語法