ES6 编码风格
-
定义和使用
本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的、易于阅读和维护的代码。多家公司和组织已经公开了它们的风格规范,下面的内容主要参考了 Airbnb 公司的 JavaScript 风格规范。 -
块级作用域
(1)let 取代 var
ES6 提出了两个新的声明变量的命令:let
和const
。其中,let
完全可以取代 var,因为两者语义相同,而且let
没有副作用。上面代码如果用 var 替代let
,实际上就声明了两个全局变量,这显然不是本意。变量应该只在其声明的代码块内有效,var 命令做不到这一点。var 命令存在变量提升效用,let
命令没有这个问题。上面代码如果使用 var 替代let
,console.log 那一行就不会报错,而是会输出 undefined,因为变量声明提升到代码块的头部。这违反了变量先声明后使用的原则。所以,建议不再使用 var 命令,而是使用let
命令取代。(2)全局常量和线程安全
在let
和const
之间,建议优先使用const
,尤其是在全局环境,不应该设置变量,只应设置常量。const
优于let
有几个原因。一个是const
可以提醒阅读程序的人,这个变量不应该改变;另一个是const
比较符合函数式编程思想,运算不改变值,只是新建值,而且这样也有利于将来的分布式运算;最后一个原因是 JavaScript 编译器会对const
进行优化,所以多使用const
,有利于提高程序的运行效率,也就是说let
和const
的本质区别,其实是编译器内部的处理不同。const
声明常量还有两个好处,一是阅读代码的人立刻会意识到不应该修改这个值,二是防止了无意间修改变量值所导致的错误。所有的函数都应该设置为常量。长远来看,JavaScript 可能会有多线程的实现(比如 Intel 公司的 River Trail 那一类的项目),这时
let
表示的变量,只应出现在单线程运行的代码中,不能是多线程共享的,这样有利于保证线程安全。 -
字符串
静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号。 -
解构赋值
使用数组成员对变量赋值时,优先使用解构赋值。函数的参数如果是对象的成员,优先使用解构赋值。如果函数返回多个值,优先使用对象的解构赋值,而不是数组的解构赋值。这样便于以后添加返回值,以及更改返回值的顺序。 -
对象
单行定义的对象,最后一个成员不以逗号结尾。多行定义的对象,最后一个成员以逗号结尾。对象尽量静态化,一旦定义,就不得随意添加新的属性。如果添加属性不可避免,要使用 Object.assign 方法。如果对象的属性名是动态的,可以在创造对象的时候,使用属性表达式定义。上面代码中,对象 obj 的最后一个属性名,需要计算得到。这时最好采用属性表达式,在新建 obj 的时候,将该属性与其他属性定义在一起。这样一来,所有属性就在一个地方定义了。另外,对象的属性和方法,尽量采用简洁表达法,这样易于描述和书写。 -
数组
使用扩展运算符(...)拷贝数组。使用 Array.from 方法,将类似数组的对象转为数组。 -
函数
立即执行函数可以写成箭头函数的形式。那些使用匿名函数当作参数的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了 this。箭头函数取代 Function.prototype.bind,不应再用 self/_this/that 绑定 this。简单的、单行的、不会复用的函数,建议采用箭头函数。如果函数体较为复杂,行数较多,还是应该采用传统的函数写法。所有配置项都应该集中在一个对象,放在最后一个参数,布尔值不可以直接作为参数。不要在函数体内使用 arguments 变量,使用 rest 运算符(...)代替。因为 rest 运算符显式表明你想要获取参数,而且 arguments 是一个类似数组的对象,而 rest 运算符可以提供一个真正的数组。使用默认值语法设置函数参数的默认值。 -
Map 结构
注意区分 Object 和 Map,只有模拟现实世界的实体对象时,才使用 Object。如果只是需要 key: value 的数据结构,使用 Map 结构。因为 Map 有内建的遍历机制。 -
Class
总是用 Class,取代需要 prototype 的操作。因为 Class 的写法更简洁,更易于理解。使用 extends 实现继承,因为这样更简单,不会有破坏 instanceof 运算的危险。 -
模块
首先,Module 语法是 JavaScript 模块的标准写法,坚持使用这种写法。使用 import 取代 require。使用 export 取代 module.exports。如果模块只有一个输出值,就使用 export default,如果模块有多个输出值,就不使用 export default,export default 与普通的 export 不要同时使用。不要在模块输入中使用通配符。因为这样可以确保你的模块之中,有一个默认输出(export default)。如果模块默认输出一个函数,函数名的首字母应该小写。如果模块默认输出一个对象,对象名的首字母应该大写。 -
ESLint 的使用
ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。首先,安装 ESLint。然后,安装 Airbnb 语法规则,以及 import、a11y、react 插件。最后,在项目的根目录下新建一个 .eslintrc 文件,配置 ESLint。现在就可以检查,当前项目的代码是否符合预设的规则。index.js 文件的代码如下。使用 ESLint 检查这个文件,就会报出错误。上面代码说明,原文件有五个错误,其中两个是不应该使用 var 命令,而要使用 let 或 const;一个是定义了变量,却没有使用;另外两个是行首缩进为 4 个空格,而不是规定的 2 个空格。
-