ECMAScript6标准编程风格，读懂ECMAScript规格

1 快级作用域

（1）let取代var

ES6提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。

'use strict';

 

if (true) {

  let x ='hello';

}

 

for (let i = 0; i < 10; i++) {

 console.log(i);

}

上面代码如果用var替代let，实际上就声明了两个全局变量，这显然不是本意。变量应该只在其声明的代码块内有效，var命令做不到这一点。

var命令存在变量提升效用，let命令没有这个问题。

'use strict';

 

if(true) {

 console.log(x); // ReferenceError

  let x ='hello';

}

上面代码如果使用var替代let，console.log那一行就不会报错，而是会输出undefined，因为变量声明提升到代码块的头部。这违反了变量先声明后使用的原则。

所以，建议不再使用var命令，而是使用let命令取代。

（2）全局常量和线程安全

在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。这符合函数式编程思想，有利于将来的分布式运算。

// bad

var a = 1, b = 2, c = 3;

 

// good

const a = 1;

const b = 2;

const c = 3;

 

// best

const [a, b, c] = [1, 2, 3];

const声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。

所有的函数都应该设置为常量。

长远来看，JavaScript可能会有多线程的实现（比如Intel的River Trail那一类的项目），这时let表示的变量，只应出现在单线程运行的代码中，不能是多线程共享的，这样有利于保证线程安全。

 

2 字符串

静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。

// bad

const a = "foobar";

const b = 'foo' + a + 'bar';

 

// acceptable

const c = `foobar`;

 

// good

const a = 'foobar';

const b = `foo${a}bar`;

const c = 'foobar';

 

3 解构赋值

使用数组成员对变量赋值时，优先使用解构赋值。

const arr = [1, 2, 3, 4];

 

// bad

const first = arr[0];

const second = arr[1];

 

// good

const [first, second] = arr;

函数的参数如果是对象的成员，优先使用解构赋值。

// bad

function getFullName(user) {

  constfirstName = user.firstName;

  constlastName = user.lastName;

}

 

// good

function getFullName(obj) {

  const {firstName, lastName } = obj;

}

 

// best

function getFullName({ firstName, lastName }) {

}

如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。

// bad

function processInput(input) {

  return[left, right, top, bottom];

}

 

// good

function processInput(input) {

  return{ left, right, top, bottom };

}

 

const { left, right } = processInput(input);

4 对象

单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。

// bad

const a = { k1: v1, k2: v2, };

const b = {

  k1: v1,

  k2: v2

};

 

// good

const a = { k1: v1, k2: v2 };

const b = {

  k1: v1,

  k2: v2,

};

对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。

// bad

const a = {};

a.x = 3;

 

// if reshape unavoidable

const a = {};

Object.assign(a, { x: 3 });

 

// good

const a = { x: null };

a.x = 3;

如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。

// bad

const obj = {

  id: 5,

  name:'San Francisco',

};

obj[getKey('enabled')] = true;

 

// good

const obj = {

  id: 5,

  name:'San Francisco',

 [getKey('enabled')]: true,

};

上面代码中，对象obj的最后一个属性名，需要计算得到。这时最好采用属性表达式，在新建obj的时候，将该属性与其他属性定义在一起。这样一来，所有属性就在一个地方定义了。

另外，对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写。

var ref = 'some value';

 

// bad

const atom = {

  ref: ref,

 

  value:1,

 

 addValue: function (value) {

   return atom.value + value;

  },

};

 

// good

const atom = {

  ref,

 

  value:1,

 

 addValue(value) {

   return atom.value + value;

  },

};

5 数组

使用扩展运算符（...）拷贝数组。

// bad

const len = items.length;

const itemsCopy = [];

let i;

 

for (i = 0; i < len; i++) {

 itemsCopy[i] = items[i];

}

 

// good

const itemsCopy = [...items];

使用Array.from方法，将类似数组的对象转为数组。

const foo = document.querySelectorAll('.foo');

const nodes = Array.from(foo);

6 函数

立即执行函数可以写成箭头函数的形式。

(() => {

 console.log('Welcome to the Internet.');

})();

那些需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了this。

// bad

[1, 2, 3].map(function (x) {

  returnx * x;

});

 

// good

[1, 2, 3].map((x) => {

  returnx * x;

});

 

// best

[1, 2, 3].map(x => x * x);

箭头函数取代Function.prototype.bind，不应再用self/_this/that绑定 this。

// bad

const self = this;

const boundMethod = function(...params) {

  returnmethod.apply(self, params);

}

 

// acceptable

const boundMethod = method.bind(this);

 

// best

const boundMethod = (...params) =>method.apply(this, params);

简单的、单行的、不会复用的函数，建议采用箭头函数。如果函数体较为复杂，行数较多，还是应该采用传统的函数写法。

所有配置项都应该集中在一个对象，放在最后一个参数，布尔值不可以直接作为参数。

// bad

function divide(a, b, option = false ) {

}

 

// good

function divide(a, b, { option = false } = {}){

}

不要在函数体内使用arguments变量，使用rest运算符（...）代替。因为rest运算符显式表明你想要获取参数，而且arguments是一个类似数组的对象，而rest运算符可以提供一个真正的数组。

// bad

function concatenateAll() {

  constargs = Array.prototype.slice.call(arguments);

  returnargs.join('');

}

 

// good

function concatenateAll(...args) {

  returnargs.join('');

}

使用默认值语法设置函数参数的默认值。

// bad

function handleThings(opts) {

  opts =opts || {};

}

 

// good

function handleThings(opts = {}) {

  // ...

}

7 Map结构

注意区分Object和Map，只有模拟现实世界的实体对象时，才使用Object。如果只是需要key: value的数据结构，使用Map结构。因为Map有内建的遍历机制。

let map = new Map(arr);

 

for (let key of map.keys()) {

 console.log(key);

}

 

for (let value of map.values()) {

 console.log(value);

}

 

for (let item of map.entries()) {

 console.log(item[0], item[1]);

}

8 Class

总是用Class，取代需要prototype的操作。因为Class的写法更简洁，更易于理解。

// bad

function Queue(contents = []) {

 this._queue = [...contents];

}

Queue.prototype.pop = function() {

  constvalue = this._queue[0];

 this._queue.splice(0, 1);

  returnvalue;

}

 

// good

class Queue {

 constructor(contents = []) {

   this._queue = [...contents];

  }

  pop() {

    constvalue = this._queue[0];

   this._queue.splice(0, 1);

   return value;

  }

}

使用extends实现继承，因为这样更简单，不会有破坏instanceof运算的危险。

// bad

const inherits = require('inherits');

function PeekableQueue(contents) {

 Queue.apply(this, contents);

}

inherits(PeekableQueue, Queue);

PeekableQueue.prototype.peek = function() {

  returnthis._queue[0];

}

 

// good

class PeekableQueue extends Queue {

  peek(){

   return this._queue[0];

  }

}

 

9 模块

首先，Module语法是JavaScript模块的标准写法，坚持使用这种写法。使用import取代require。

// bad

const moduleA = require('moduleA');

const func1 = moduleA.func1;

const func2 = moduleA.func2;

 

// good

import { func1, func2 } from 'moduleA';

使用export取代module.exports。

// commonJS的写法

var React = require('react');

 

var Breadcrumbs = React.createClass({

 render() {

   return <nav />;

  }

});

 

module.exports = Breadcrumbs;

 

// ES6的写法

import React from 'react';

 

const Breadcrumbs = React.createClass({

 render() {

   return <nav />;

  }

});

 

export default Breadcrumbs

如果模块只有一个输出值，就使用export default，如果模块有多个输出值，就不使用export default，不要export default与普通的export同时使用。

不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一个默认输出（export default）。

// bad

import * as myObject './importModule';

 

// good

import myObject from './importModule';

如果模块默认输出一个函数，函数名的首字母应该小写。

function makeStyleGuide() {

}

 

export default makeStyleGuide;

如果模块默认输出一个对象，对象名的首字母应该大写。

const StyleGuide = {

  es6: {

  }

};

 

export default StyleGuide;

10 ESLint的使用

ESLint是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

首先，安装ESLint。

$ npm i -g eslint

然后，安装Airbnb语法规则。

$ npm i -g eslint-config-airbnb

最后，在项目的根目录下新建一个.eslintrc文件，配置ESLint。

{

 "extends": "eslint-config-airbnb"

}

现在就可以检查，当前项目的代码是否符合预设的规则。

index.js文件的代码如下。

var unusued = 'I have no purpose!';

 

function greet() {

    varmessage = 'Hello, World!';

    alert(message);

}

 

greet();

使用ESLint检查这个文件。

$ eslint index.js

index.js

 1:5  error  unusued is defined but never used                 no-unused-vars

 4:5  error  Expected indentation of 2 characters butfound 4  indent

 5:5  error  Expected indentation of 2 characters butfound 4  indent

 

✖ 3 problems (3 errors, 0 warnings)

上面代码说明，原文件有三个错误，一个是定义了变量，却没有使用，另外两个是行首缩进为4个空格，而不是规定的2个空格。

11读懂 ECMAScript 规格

规格文件是计算机语言的官方标准，详细描述语法规则和实现方法。

一般来说，没有必要阅读规格，除非你要写编译器。因为规格写得非常抽象和精炼，又缺乏实例，不容易理解，而且对于解决实际的应用问题，帮助不大。但是，如果你遇到疑难的语法问题，实在找不到答案，这时可以去查看规格文件，了解语言标准是怎么说的。规格是解决问题的“最后一招”。

这对JavaScript语言很有必要。因为它的使用场景复杂，语法规则不统一，例外很多，各种运行环境的行为不一致，导致奇怪的语法问题层出不穷，任何语法书都不可能囊括所有情况。查看规格，不失为一种解决语法问题的最可靠、最权威的终极方法。

本章介绍如何读懂ECMAScript6的规格文件。

ECMAScript 6的规格，可以在ECMA国际标准组织的官方网站（www.ecma-international.org/ecma-262/6.0/）免费下载和在线阅读。

这个规格文件相当庞大，一共有26章，A4打印的话，足足有545页。它的特点就是规定得非常细致，每一个语法行为、每一个函数的实现都做了详尽的清晰的描述。基本上，编译器作者只要把每一步翻译成代码就可以了。这很大程度上，保证了所有ES6实现都有一致的行为。

ECMAScript 6规格的26章之中，第1章到第3章是对文件本身的介绍，与语言关系不大。第4章是对这门语言总体设计的描述，有兴趣的读者可以读一下。第5章到第8章是语言宏观层面的描述。第5章是规格的名词解释和写法的介绍，第6章介绍数据类型，第7章介绍语言内部用到的抽象操作，第8章介绍代码如何运行。第9章到第26章介绍具体的语法。

对于一般用户来说，除了第4章，其他章节都涉及某一方面的细节，不用通读，只要在用到的时候，查阅相关章节即可。下面通过一些例子，介绍如何使用这份规格。

12 相等运算符

相等运算符（==）是一个很让人头痛的运算符，它的语法行为多变，不符合直觉。这个小节就看看规格怎么规定它的行为。

请看下面这个表达式，请问它的值是多少。

0==null

如果你不确定答案，或者想知道语言内部怎么处理，就可以去查看规格，7.2.12小节是对相等运算符（==）的描述。

规格对每一种语法行为的描述，都分成两部分：先是总体的行为描述，然后是实现的算法细节。相等运算符的总体描述，只有一句话。

“The comparison x == y, wherex and y are values, producestrue or false.”

上面这句话的意思是，相等运算符用于比较两个值，返回true或false。

下面是算法细节。

1 ReturnIfAbrupt(x).

2 ReturnIfAbrupt(y).

3 IfType(x) is the same asType(y), then

4 Return the result of performingStrict Equality Comparisonx === y.

5 Ifx is null and y isundefined, returntrue.

6 Ifx is undefined and y is null, returntrue.

7 IfType(x) is Number andType(y) is String,

8 return the result of the comparisonx == ToNumber(y).

9 IfType(x) is String andType(y) is Number,

10return the result of the comparisonToNumber(x) == y.

11IfType(x) is Boolean, return the result ofthe comparisonToNumber(x) ==y.

12IfType(y) is Boolean, return the result ofthe comparisonx ==ToNumber(y).

13IfType(x) is either String, Number, orSymbol andType(y) is Object, then

14return the result of the comparisonx == ToPrimitive(y).

15IfType(x) is Object andType(y) is either String, Number, orSymbol, then

16return the result of the comparisonToPrimitive(x) == y.

17Returnfalse.

上面这段算法，一共有12步，翻译如下。

1 如果x不是正常值（比如抛出一个错误），中断执行。

2 如果y不是正常值，中断执行。

3 如果Type(x)与Type(y)相同，执行严格相等运算x === y。

4 如果x是null，y是undefined，返回true。

5 如果x是undefined，y是null，返回true。

6 如果Type(x)是数值，Type(y)是字符串，返回x == ToNumber(y)的结果。

7 如果Type(x)是字符串，Type(y)是数值，返回ToNumber(x) == y的结果。

8 如果Type(x)是布尔值，返回ToNumber(x) == y的结果。

9 如果Type(y)是布尔值，返回x == ToNumber(y)的结果。

10如果Type(x)是字符串或数值或Symbol值，Type(y)是对象，返回x == ToPrimitive(y)的结果。

11如果Type(x)是对象，Type(y)是字符串或数值或Symbol值，返回ToPrimitive(x) == y的结果。

12返回false。

由于0的类型是数值，null的类型是Null（这是规格4.3.13小节的规定，是内部Type运算的结果，跟typeof运算符无关）。因此上面的前11步都得不到结果，要到第12步才能得到false。

0==null // false

13数组的空位

下面再看另一个例子。

const a1 =[undefined, undefined, undefined];

const a2 =[,,,];

 

a1.length // 3

a2.length // 3

 

a1[0] // undefined

a2[0] // undefined

 

a1[0]=== a2[0] // true

上面代码中，数组a1的成员是三个undefined，数组a2的成员是三个空位。这两个数组很相似，长度都是3，每个位置的成员读取出来都是undefined。

但是，它们实际上存在重大差异。

0in a1 // true

0in a2 // false

 

a1.hasOwnProperty(0) // true

a2.hasOwnProperty(0) // false

 

Object.keys(a1) // ["0", "1","2"]

Object.keys(a2) // []

 

a1.map(n=>1) // [1, 1, 1]

a2.map(n=>1) // [, , ,]

上面代码一共列出了四种运算，数组a1和a2的结果都不一样。前三种运算（in运算符、数组的hasOwnProperty方法、Object.keys方法）都说明，数组a2取不到属性名。最后一种运算（数组的map方法）说明，数组a2没有发生遍历。

为什么a1与a2成员的行为不一致？数组的成员是undefined或空位，到底有什么不同？

规格的12.2.5小节《数组的初始化》给出了答案。

“Array elements maybe elided at the beginning, middle or end of the element list. Whenever a commain the element list is not preceded by an AssignmentExpression (i.e., a commaat the beginning or after another comma), the missing array element contributesto the length of the Array and increases the index of subsequent elements.Elided array elements are not defined. If an element is elided at the end of anarray, that element does not contribute to the length of the Array.”

翻译如下。

"数组成员可以省略。只要逗号前面没有任何表达式，数组的length属性就会加1，并且相应增加其后成员的位置索引。被省略的成员不会被定义。如果被省略的成员是数组最后一个成员，则不会导致数组length属性增加。”

上面的规格说得很清楚，数组的空位会反映在length属性，也就是说空位有自己的位置，但是这个位置的值是未定义，即这个值是不存在的。如果一定要读取，结果就是undefined（因为undefined在JavaScript语言中表示不存在）。

这就解释了为什么in运算符、数组的hasOwnProperty方法、Object.keys方法，都取不到空位的属性名。因为这个属性名根本就不存在，规格里面没说要为空位分配属性名(位置索引），只说要为下一个元素的位置索引加1。

至于为什么数组的map方法会跳过空位，请看下一节。

14 数组的Map方法

 

规格的22.1.3.15小节定义了数组的map方法。该小节先是总体描述map方法的行为，里面没有提到数组空位。

后面的算法描述是这样的。

18 Let Obe ToObject(this value).

19 ReturnIfAbrupt(O).

20 Let lenbe ToLength(Get(O, "length")).

21 ReturnIfAbrupt(len).

22 If IsCallable(callbackfn) is false, throw a TypeError exception.

23 If thisArg was supplied, let Tbe thisArg; else let Tbe undefined.

24 Let Abe ArraySpeciesCreate(O, len).

25 ReturnIfAbrupt(A).

26 Let kbe 0.

27 Repeat, while k< len

28 a. Let Pkbe ToString(k).

29 b. Let kPresent be HasProperty(O,Pk).

30 c. ReturnIfAbrupt(kPresent).

31 d. If kPresent is true, then

32 d-1. Let kValue be Get(O,Pk).

33 d-2. ReturnIfAbrupt(kValue).

34 d-3. Let mappedValue be Call(callbackfn,T, «kValue, k, O»).

35 d-4. ReturnIfAbrupt(mappedValue).

36 d-5. Let status be CreateDataPropertyOrThrow(A, Pk, mappedValue).

37 d-6. ReturnIfAbrupt(status).

38 e. Increase kby 1.

39 Return A.

翻译如下。

13 得到当前数组的this对象

14 如果报错就返回

15 求出当前数组的length属性

16 如果报错就返回

17 如果map方法的参数callbackfn不可执行，就报错

18 如果map方法的参数之中，指定了this，就让T等于该参数，否则T为undefined

19 生成一个新的数组A，跟当前数组的length属性保持一致

20 如果报错就返回

21 设定k等于0

22 只要k小于当前数组的length属性，就重复下面步骤

23 a. 设定Pk等于ToString(k)，即将K转为字符串

24 b. 设定kPresent等于HasProperty(O, Pk)，即求当前数组有没有指定属性

25 c. 如果报错就返回

26 d. 如果kPresent等于true，则进行下面步骤

27 d-1. 设定kValue等于Get(O, Pk)，取出当前数组的指定属性

28 d-2. 如果报错就返回

29 d-3. 设定mappedValue等于Call(callbackfn, T, «kValue, k, O»)，即执行回调函数

30 d-4. 如果报错就返回

31 d-5. 设定status等于CreateDataPropertyOrThrow (A, Pk, mappedValue)，即将回调函数的值放入A数组的指定位置

32 d-6. 如果报错就返回

33 e. k增加1

34 返回A

仔细查看上面的算法，可以发现，当处理一个全是空位的数组时，前面步骤都没有问题。进入第10步的b时，kpresent会报错，因为空位对应的属性名，对于数组来说是不存在的，因此就会返回，不会进行后面的步骤。

const arr = [, , ,];

arr.map(n => {

  console.log(n);

  return 1;

}) // [, , ,]

上面代码中，arr是一个全是空位的数组，map方法遍历成员时，发现是空位，就直接跳过，不会进入回调函数。因此，回调函数里面的console.log语句根本不会执行，整个map方法返回一个全是空位的新数组。

V8引擎对map方法的实现如下，可以看到跟规格的算法描述完全一致。

function ArrayMap(f, receiver) {

 CHECK_OBJECT_COERCIBLE(this, "Array.prototype.map");

 

  // Pull out the length so that modificationsto the length in the

  // loop will not affect the looping and sideeffects are visible.

  vararray = TO_OBJECT(this);

  varlength = TO_LENGTH_OR_UINT32(array.length);

  returnInnerArrayMap(f, receiver, array, length);

}

 

function InnerArrayMap(f, receiver, array,length) {

  if (!IS_CALLABLE(f))throw MakeTypeError(kCalledNonCallable, f);

 

  varaccumulator = new InternalArray(length);

  varis_array = IS_ARRAY(array);

  varstepping = DEBUG_IS_STEPPING(f);

  for (vari = 0; i < length; i++) {

    if (HAS_INDEX(array,i, is_array)) {

      varelement = array[i];

      // Prepare break slots for debugger step in.

      if (stepping)%DebugPrepareStepInIfStepping(f);

     accumulator[i] = %_Call(f, receiver, element, i, array);

    }

  }

  varresult = new GlobalArray();

  %MoveArrayContents(accumulator,result);

  returnresult;

}