代码规范-箭头函数的四种写法

栏目: JavaScript · 发布时间: 5年前

内容简介:在JS中箭头函数根据是否书写大小括号可分为以下四种情况。如果函数体没有副作用的结构,省略大括号,否则使用大括号。这里的副作用结构是指函数内的代码影响了函数外的代码。

在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',
  },
};

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序设计语言

程序设计语言

斯科特 / 裘宗燕 / 电子工业出版社 / 2005-1 / 88.00元

这是一本很有特色的教材,其核心是讨论程序设计语言的工作原理和技术。本书融合了传统的程序设计语言教科书和编译教科书的有关知识,并增加了一些有关汇编层体系结构的材料,以满足没学过计算机组织的学生们的需要。书中通过各种语言的例子,阐释了程序设计语言的重要基础概念,讨论了各种概念之间的关系,解释了语言中许多结构的形成和发展过程,以及它们演化为今天这种形式的根源。书中还详细讨论了编译器的工作方式和工作过程,......一起来看看 《程序设计语言》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换