ES6新特性之「Arrows箭頭函數」

在 ES6 中增加了箭頭函數的新特性，是一種定義函數的簡寫形式，使用=>來表示。這種定義函數的方式在語法上和CoffeeScript等語言的語法很類似。我們先來看一下傳統的定義函數的方法：

function a() {nconsole.log(1);n}na(); // 1n

再來用箭頭函定義同樣的函數來對比一下：

const a = () => {nconsole.log(1);n}na(); // 1n

對比兩種定義函數的方式，箭頭函數稍顯簡潔，但是在很多操作中，箭頭函數的優勢才更加明顯。

箭頭函數的特性

1、箭頭函數支持表達式語句塊和返回表達式的值得表達式體。下面來看兩個示例：

語句塊：

// 語句塊nconst arr = [n{id: 1, text: a},n{id: 2, text: b},n{id: 3, text: c},n];narr.forEach( value => {nconsole.log(value.id + : + value.text +;);n});n// 1: a;2: b;3: c;n

有返回值的表達式體

// 表達式體nconst arr = [n{id: 1, value: 1},n{id: 2, value: 2},n{id: 3, value: 3},n];nconst result = arr.map( item => item.value + 1);nconsole.log(result);n// [2,3,4]n

2、箭頭函數與傳統的定義函數不同的不同在於箭頭函數和它的context（上下文）共享同一個作用域的this。來看一個示例：

const object = {nname: Kim ,nchildrens: [Tom, Ella, Edison],nlogChildrens() {nthis.childrens.map( item => console.log(item + ; ));n}n};nobject.logChildrens();n// Tom; Ella; Edison; n

幾個注意點

• 在寫箭頭函數的時候，如果參數超過一個，就要用括弧括起來： (item, value) => { // ... }
• 如果使用表達式體的方式寫箭頭函數，但是返回值時一個對象的時候，你必須這樣寫：() => ({a: 1})，因為直接返回：() => {a: 1}這樣的寫法和箭頭函數的語法：() => {}有衝突。

本文同步發佈於同名微信公眾號：WeCode365，有興趣的同學可以關注一下。