ES6 學習筆記（一） 箭頭函數

寫碼容易讀碼難，在 JavaScript ES6 中有一個語法叫做 箭頭函數（arrow function）他的語法讓程式碼更加的簡短，以下是一段簡單的程式碼範例。

範例

const arr = [1,3,5,7,9]

const double = arr.map(function(arr){
    return arr*2
})

console.log(double) // [2, 6, 10, 14, 18]

//箭頭函數
const arr = [1,3,5,7,9]

const double = arr.map((arr) => {
    return arr*2
})

console.log(double) // [2, 6, 10, 14, 18]

差別在於我們將 function 給去掉並且加上了 => 胖箭頭 (fat arrow)

如果你只有一個參數需要使用的話你甚至可以去掉括弧

const double = arr.map( arr => {
    return arr*2
})

如果你沒有參數的話還是必須要留著括弧的，例如：

const arr = [1,3,5,7,9]

const double = arr.map(() => {
    return 'hello'
})

console.log(double) // ["hello", "hello", "hello", "hello", "hello"]

你也可以選擇 隱式返回 也就是不寫 return

const arr = [1,3,5,7,9]

const double = arr.map((arr) => arr*2)

console.log(double) // [2, 6, 10, 14, 18]

我們去掉了 return 還有大括弧 {} 讓程式碼看起來更簡潔了

我們也可以運用在匿名函數上

const sayMyName = name => console.log(`you're ${name}`)

sayMyName('heisenberg') // you're heisenberg

結論

看起來箭頭函數的確是讓我們的程式碼更加簡潔，在寫法上不同了，對於還不習慣的人來說轉換上還必須要一點時間來適應，以上就是 ES6 當中箭頭函數寫法的一些筆記，