如何使用JavaScript ES6箭頭函式

6 月 4, 2018 | | 0 條留言

函式(function)

箭頭函式在 JavaScript 中改寫原本 function 的撰寫方式。除了較短的語法外,它們在保持this 關鍵字範圍方面也有優勢 參見這裡,此外在 ESLint 中官方也建議使用箭頭函式取代傳統寫法。

函式 (function) 又稱方法 (method),用於程式碼過多重複時定義一個方法來去重複呼叫他來解省我們的開發效率,以下為範例:

原本寫法

// 使用有名稱的函式
function sum(a, b){
    return a+b;
}

// 常數指定為匿名函式
const sum = function(a, b) {
    return a+b;
}

變成

const sum = (x, y) => {
  return x + y;
};

console.log(sum(1, 3)); 

output: 4

撰寫方式

1. 當你在宣告時若沒有傳入值(arguments),必須放空括號。
const callMe = () => { 
    console.log('Max!');
}
2. 當只有一個傳入值(arguments),可以省略括號。
const callMe = name => { 
    console.log(name);
}
3. 當函式有回傳時可濃縮一行
const doubleNum = num => num * 2;

console.log(doubleNum(5));

相等於

const doubleNum = (num) => {
  return num * 2;
};
console.log(doubleNum(5));

output: 10

文章分享來源:https://andy6804tw.github.io/2017/12/19/js-tutorial-psrt2/