代碼規範-箭頭函數的四種寫法

在JS中箭頭函數根據是否書寫大小括號可分爲如下四種狀況。

// 不省略
const fun = (value) => {
    return value;
};

// 省略小括號
const fun = value => {
    return value;
};

// 省略大括號
const fun = (value) => value;

// 省略大括號與小括號
const fun = value => value;

airbnb-javascript關於箭頭函數的檢查

若是函數體沒有反作用的結構，省略大括號，不然使用大括號。參考

這裏的反作用結構是指函數內的代碼影響了函數外的代碼。

const even = [];
[1, 2, 3, 4].forEach((num) => {
    if (num % 2 === 0) {
        even.push(num);
    }
};

注意：airbnb文檔沒寫，函數內代碼塊複雜時也須要大括號。

若是參數爲一個，省略小括號，不然使用小括號。參考

《Google JavaScript Style Guide》中箭頭函數的提議

大括號無關緊要，建議始終寫小括號。參考

我的見解

針對不一樣的函數結構選擇是否使用括號的方式會帶來兩個問題：

• 代碼不一致：就像一個PPT中不該該一會左對齊一會右對齊一會居中對齊。
• 省略括號不易擴展：單個參數變多個參數要加小括號，直接返回代碼變爲多行計算後再返回代碼須要增長大括號

我認爲有這種爭議時應該選擇兼容性更強的不省略大括號與小括號，在配置種關閉了對這四種寫法的檢查，可是遵循約定大於配置的原則，始終按照一種風格書寫。

eslint的配置

根據文檔，在eslint中如下兩個模塊控制以上四種狀況的書寫，可對其進行配置（代碼以下）

• arrow-parens
• arrow-body-style

// .eslintrc.js
module.exports = {
  extends: 'airbnb',
  rules: {
    'arrow-parens': 'off',
    'arrow-body-style': 'off',
  },
};