? ? ? ? 當你還是ES6或React初學者的時候，可能你會有這樣的困惑孽尽？看到代碼中出現(xiàn)各式各樣的箭頭符號珠增，和其附帶的時有時無的圓括號和花括號就會暈圈。我相信你可能見過如下這些類型的箭頭函數(shù)酷勺，你是否完全掌握和理解它們的寫法要領(lǐng)和區(qū)別呢。
? ? ? ? () => { statements }
? ? ?（parameter） => { statement }
? ? ? ? parameter => { statement }
? ? ? ? parameter => statement
? ? ? ? (param1, param2, ...) => { statements }
? ? ? ? (param1, param2, ...) => statement
? ? ? ? 本文就來說一下ES6中這個靈活多變的箭頭函數(shù)扳躬。
? ? 首先，對比一下ES5和ES6函數(shù)的寫法甚亭。
? ? ES5：
? ? ? ? const name = function(parameters) { statements }
? ? ES6（標準箭頭函數(shù)形式）:
? ? ? ? const name = (parameters) => { statements }
? ? 以上這種標準的箭頭函數(shù)形式是我們常見的贷币，下面我們來講幾種常見的簡化模式。
1. 無參數(shù)模式亏狰；
? ? ? ? () => { statements }
? ? ? ? 這樣的箭頭函數(shù)直接返回statement的內(nèi)容役纹。
2. 單變量模式；
? ? ? （parameter）=> { statement }
? ? ? ? 如果你的函數(shù)是單一變量的暇唾，上面這種寫法是常見的標準形式促脉。
? ? ? ? 但在ES6中，允許其去掉變量的圓括號策州，如下：
? ? ? ? parameter => { statement }
? ? ? ? 請注意瘸味，只有單一變量時，可以去掉圓括號够挂，無或多參數(shù)都需要保留圓括號旁仿。
? ? ? ? 舉個栗子：
? ? ? ? const double = (a) => { return a * 2 }
? ? ? ? // 等效于下面去掉的寫法
? ? ? ? const double = a => { a * 2; }
3. 多變量模式；
? ? ? ? (param1, param2, ...) => { statements }
? ? ? ? 注意孽糖，如果你的函數(shù)有2+個變量枯冈，這是變量前后的圓括號是必須的。
? ? ? ? 再舉個栗子：
? ? ? ? ? ? const sum = (a, b, c) => { return a + b +c; }? ? (正確寫法)
? ? ? ? ? ? const sum = a, b, c => { return a + b +c; }? ? ? (錯誤寫法)
4. 關(guān)于箭頭函數(shù)的返回值
? ? ? ? 箭頭函數(shù)還自帶了一個簡化的語法形式办悟，容易被人忽視尘奏。這就是如果返回值只有一行代碼時，可以去掉花括號病蛉。第三顆栗子如下：
? ? ? ? const double = (a) =>{ return a * 2; }
? ? ? ? // 上面的代碼可以簡寫如下
? ? ? ? const double = a => a * 2;
總結(jié)：?
? ? ? ? 箭頭函數(shù)作為ES6重要的特性給我們帶來了很多簡化代碼的方便特性炫加，但是因為其靈活多變的語法特點也給我們帶來了一些理解和使用上的疑惑。在使用和閱讀代碼時我們應(yīng)該注意到變量的個數(shù)和返回值的代碼行數(shù)铡恕，以免造成困惑和錯誤琢感。
小練習（簡化以下代碼）：
1. const sum = function(a, b, c) { return a + b + c；}
2. const square = function(d) { return d ** 2 }
3. const sayHi = function() { console.log('Hi'); }
.
.
.
.
.
.
參考答案：
1. const sum = ( a, b, c ) => a + b + c;
2. const square = d => d ** 2;
3. const sayHi = () => { console.log('Hi'); }
