参考

airbnb:https://github.com/airbnb/javascript

引用

  • 所有的赋值都用 const，避免使用 var。

    为什么？因为这个能确保你不会改变你的初始值，重复引用会导致 bug 并且使代码变得难以理解。

  1. // bad
  2. var a = 1;
  3. var b = 2;
  5. // good
  6. const a = 1;
  7. const b = 2;
  • 如果你一定要对参数重新赋值，使用 let，而不是 var

    为什么？因为 let 是块级作用域，而 var 是函数级作用域。

  1. // bad
  2. var count = 1;
  3. if (true) {
  4.   count += 1;
  5. }
  7. // good, use the let.
  8. let count = 1;
  9. if (true) {
  10.   count += 1;
  11. }

[

](#%E7%9B%AE%E5%BD%95)

对象

  • 使用字面值创建对象。 ```javascript // bad const item = new Object();

// good const item = {};

  6. -  用对象方法简写。
  7. ```javascript
  8. // bad
  9. const atom = {
  10.   value: 1,
  12.   addValue: function (value) {
  13.     return atom.value + value;
  14.   },
  15. };
  17. // good
  18. const atom = {
  19.   value: 1,
  21.   // 对象的方法
  22.   addValue(value) {
  23.     return atom.value + value;
  24.   },
  25. };
  • 用属性值缩写。

    为什么？因为这样写的更少且可读性更高。

  1. const lukeSkywalker = 'Luke Skywalker';
  3. // bad
  4. const obj = {
  5.   lukeSkywalker: lukeSkywalker,
  6. };
  8. // good
  9. const obj = {
  10.   lukeSkywalker,
  11. };
  • 将你的所有缩写放在对象声明的前面。

    为什么？因为这样能更方便地知道有哪些属性用了缩写。

  1. const anakinSkywalker = 'Anakin Skywalker';
  2. const lukeSkywalker = 'Luke Skywalker';
  4. // bad
  5. const obj = {
  6.   episodeOne: 1,
  7.   twoJediWalkIntoACantina: 2,
  8.   lukeSkywalker,
  9.   episodeThree: 3,
  10.   mayTheFourth: 4,
  11.   anakinSkywalker,
  12. };
  14. // good
  15. const obj = {
  16.   lukeSkywalker,
  17.   anakinSkywalker,
  18.   episodeOne: 1,
  19.   twoJediWalkIntoACantina: 2,
  20.   episodeThree: 3,
  21.   mayTheFourth: 4,
  22. };
  • 只对那些无效的标示使用引号 ''。

    为什么？通常我们认为这种方式主观上更易读。不仅优化了代码高亮，而且也更容易被许多 JS 引擎优化。

  1. // bad
  2. const bad = {
  3.   'foo': 3,
  4.   'bar': 4,
  5.   'data-blah': 5,
  6. };
  8. // good
  9. const good = {
  10.   foo: 3,
  11.   bar: 4,
  12.   'data-blah': 5,
  13. };
  • 不要直接调用 Object.prototype上的方法，如 hasOwnProperty、propertyIsEnumerable、isPrototypeOf。

    为什么？在一些有问题的对象上，这些方法可能会被屏蔽掉，如：{ hasOwnProperty: false } 或空对象 Object.create(null)

  1. // bad
  2. console.log(object.hasOwnProperty(key));
  4. // good
  5. console.log(Object.prototype.hasOwnProperty.call(object, key));
  7. // best
  8. const has = Object.prototype.hasOwnProperty; // 在模块作用域内做一次缓存。
  9. console.log(has.call(object, key));
  10. /* or */
  11. import has from 'has'; // https://www.npmjs.com/package/has
  12. console.log(has(object, key));
  • 对象浅拷贝时，更推荐使用扩展运算符（即 ... 运算符），而不是 [Object.assign](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)。获取对象指定的几个属性时，用对象的 rest 解构运算符（即 ... 运算符）更好。
  1. // very bad
  2. const original = { a: 1, b: 2 };
  3. const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ
  4. delete copy.a; // so does this
  6. // bad
  7. const original = { a: 1, b: 2 };
  8. const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
  10. // good es6 扩展运算符 ...
  11. const original = { a: 1, b: 2 };
  12. // 浅拷贝
  13. const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
  15. // rest 解构运算符
  16. const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

[

](#%E7%9B%AE%E5%BD%95)

数组

  • 用字面量创建数组。 ```javascript // bad const items = new Array();

// good const items = [];

  4. -  用 [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push) 代替直接向数组中添加一个值。  
  5. ```javascript
  6. const someStack = [];
  8. // bad
  9. someStack[someStack.length] = 'abracadabra';
  11. // good
  12. someStack.push('abracadabra');
  • 用扩展运算符做数组浅拷贝，类似上面的对象浅拷贝。
    ```javascript // bad const len = items.length; const itemsCopy = []; let i;

for (i = 0; i < len; i += 1) { itemsCopy[i] = items[i]; }

// good const itemsCopy = […items];

  4. -  用 `...` 运算符而不是 `[Array.from](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from)` 来将一个可迭代的对象转换成数组。  
  5. ```javascript
  6. const foo = document.querySelectorAll('.foo');
  8. // good
  9. const nodes = Array.from(foo);
  11. // best
  12. const nodes = [...foo];
  • [Array.from](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from) 将一个类数组对象转成一个数组。
    ```javascript const arrLike = { 0: ‘foo’, 1: ‘bar’, 2: ‘baz’, length: 3 };

// bad const arr = Array.prototype.slice.call(arrLike);

// good const arr = Array.from(arrLike);

  4. -  用`[Array.from](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from)` 而不是 `...` 运算符去做 map 遍历。 因为这样可以避免创建一个临时数组。  
  5. ```javascript
  6. // bad
  7. const baz = [...foo].map(bar);
  9. // good
  10. const baz = Array.from(foo, bar);
  • 4.8 如果一个数组有很多行，在数组的 [ 后和 ] 前断行。请看下面示例：
    ```javascript // bad const arr = [ [0, 1], [2, 3], [4, 5], ];

const objectInArray = [{ id: 1, }, { id: 2, }];

const numberInArray = [ 1, 2, ];

// good const arr = [[0, 1], [2, 3], [4, 5]];

const objectInArray = [ { id: 1, }, { id: 2, }, ];

const numberInArray = [ 1, 2, ];

  2. [
  4. ](#%E7%9B%AE%E5%BD%95)
  6. <a name="2be143d5"></a>
  7. ## 解构
  11. -  用对象的解构赋值来获取和使用对象某个或多个属性值。
  12. > 为什么？解构使您不必为这些属性创建临时引用，并且避免重复引用对象。重复引用对象将造成代码重复、增加阅读次数、提高犯错概率。
  14. ```javascript
  15. // bad
  16. function getFullName(user) {
  17.   const firstName = user.firstName;
  18.   const lastName = user.lastName;
  20.   return `${firstName} ${lastName}`;
  21. }
  23. // good
  24. function getFullName(user) {
  25.   const { firstName, lastName } = user;
  26.   return `${firstName} ${lastName}`;
  27. }
  29. // best
  30. function getFullName({ firstName, lastName }) {
  31.   return `${firstName} ${lastName}`;
  32. }
  • 用数组解构。
    ```javascript const arr = [1, 2, 3, 4];

// bad const first = arr[0]; const second = arr[1];

// good const [first, second] = arr;

  4. -  多个返回值用对象的解构，而不是数组解构。   
  5. > 为什么？你可以在后期添加新的属性或者变换变量的顺序而不会破坏原有的引用。
  7. ```javascript
  8. // bad
  9. function processInput(input) {
  10.   // 然后就是见证奇迹的时刻
  11.   return [left, right, top, bottom];
  12. }
  14. // 调用者需要想一想返回值的顺序
  15. const [left, __, top] = processInput(input);
  17. // good
  18. function processInput(input) {
  19.   // oops，奇迹又发生了
  20.   return { left, right, top, bottom };
  21. }
  23. // 调用者只需要选择他想用的值就好了
  24. const { left, top } = processInput(input);

[

](#%E7%9B%AE%E5%BD%95)

字符串

  • 字符串应使用单引号 '' 。 ```javascript // bad const name = “Capt. Janeway”;

// bad - 模板字符串应该包含插入文字或换行 const name = Capt. Janeway;

// good const name = ‘Capt. Janeway’;

  4. -  超过 100 个字符的字符串不应该用字符串连接成多行。   
  5. > 为什么？字符串折行增加编写难度且不易被搜索。
  7. ```javascript
  8. // bad
  9. const errorMessage = 'This is a super long error that was thrown because \
  10.     of Batman. When you stop to think about how Batman had anything to do \
  11.     with this, you would get nowhere \
  12. fast.';
  14. // bad
  15. const errorMessage = 'This is a super long error that was thrown because ' +
  16.     'of Batman. When you stop to think about how Batman had anything to do ' +
  17. 'with this, you would get nowhere fast.';
  19. // good
  20. const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';
  • 当需要动态生成字符串时，使用模板字符串而不是字符串拼接。

    为什么？模板字符串更具可读性、多行语法更简洁以及更方便插入变量到字符串里头。

  1. // bad
  2. function sayHi(name) {
  3.   return 'How are you, ' + name + '?';
  4. }
  6. // bad
  7. function sayHi(name) {
  8.   return ['How are you, ', name, '?'].join();
  9. }
  11. // bad
  12. function sayHi(name) {
  13.   return `How are you, ${ name }?`;
  14. }
  16. // good
  17. function sayHi(name) {
  18.   return `How are you, ${name}?`;
  19. }
  • 永远不要使用 eval()，该方法有太多漏洞。

[

](#%E7%9B%AE%E5%BD%95)

函数

  • 使用命名函数表达式而不是函数声明。 
  1. // bad
  2. function foo() {
  3.   // ...
  4. }
  6. // bad
  7. const foo = function () {
  8.   // ...
  9. };
  11. // good
  12. // lexical name distinguished from the variable-referenced invocation(s)
  13. // 函数表达式名和声明的函数名是不一样的
  14. const short = function longUniqueMoreDescriptiveLexicalFoo() {
  15.   // ...
  16. };
  • 把立即执行函数包裹在圆括号里。
  1. // immediately-invoked function expression (IIFE)
  2. (function () {
  3.   console.log('Welcome to the Internet. Please follow me.');
  4. }());
  • 注意：ECMA-262 中对块（block）的定义是： 一系列的语句。但是函数声明不是一个语句， 函数表达式是一个语句。
    ```javascript // bad if (currentUser) { function test() { console.log(‘Nope.’); } }

// good let test; if (currentUser) { test = () => { console.log(‘Yup.’); }; }

  4. -  不要用 `arguments` 命名参数。他的优先级高于每个函数作用域自带的 `arguments` 对象，这会导致函数自带的 `arguments` 值被覆盖。  
  5. ```javascript
  6. // bad
  7. function foo(name, options, arguments) {
  8.   // ...
  9. }
  11. // good
  12. function foo(name, options, args) {
  13.   // ...
  14. }
  • 不要使用 arguments，用收集参数语法 ... 代替。``

    为什么？... 明确你想用哪个参数。而且收集参数是真数组，而不是类似数组的 arguments。

  1. // bad
  2. function concatenateAll() {
  3.   const args = Array.prototype.slice.call(arguments);
  4.   return args.join('');
  5. }
  7. // good
  8. function concatenateAll(...args) {
  9.   return args.join('');
  10. }
  • 用默认参数语法而不是在函数里对参数重新赋值。
    ```javascript // really bad function handleThings(opts) { // 不！我们不该修改 arguments // 第二：如果 opts 的值为 false, 它会被赋值为 {} // 虽然你想这么写，但是这个会带来一些微妙的 bug。 opts = opts || {}; // … }

// still bad function handleThings(opts) { if (opts === void 0) { opts = {}; } // … }

// good function handleThings(opts = {}) { // … }

  4. -  避免默认参数的副作用。   
  5. > 为什么？他会令人迷惑不解，比如下面这个，a 到底等于几，这个需要想一下。
  7. ```javascript
  8. var b = 1;
  9. // bad
  10. function count(a = b++) {
  11.   console.log(a);
  12. }
  13. count();  // 1
  14. count();  // 2
  15. count(3); // 3
  16. count();  // 3
  • 把默认参数赋值放在最后。 ```javascript // bad function handleThings(opts = {}, name) { // … }

// good function handleThings(name, opts = {}) { // … }

  4. -  不要用函数构造器创建函数。   
  5. > 为什么？以这种方式创建函数将类似于字符串 eval()，存在漏洞。
  7. ```javascript
  8. // bad
  9. var add = new Function('a', 'b', 'return a + b');
  11. // still bad
  12. var subtract = Function('a', 'b', 'return a - b');
  • 不要修改参数.

    为什么？操作参数对象对原始调用者会导致意想不到的副作用。就是不要改参数的数据结构，保留参数原始值和数据结构。

  1. // bad
  2. function f1(obj) {
  3.   obj.key = 1;
  4. };
  6. // good
  7. function f2(obj) {
  8.   const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
  9. };
  • 不要对参数重新赋值

    为什么？参数重新赋值会导致意外行为，尤其是对 arguments。这也会导致优化问题，特别是在 V8 引擎里。

  1. // bad
  2. function f1(a) {
  3.   a = 1;
  4.   // ...
  5. }
  7. function f2(a) {
  8.   if (!a) { a = 1; }
  9.   // ...
  10. }
  12. // good
  13. function f3(a) {
  14.   const b = a || 1;
  15.   // ...
  16. }
  18. function f4(a = 1) {
  19.   // ...
  20. }

[

](#%E7%9B%AE%E5%BD%95)

箭头函数

  • 当你一定要用函数表达式（在回调函数里）的时候，使用箭头函数。

    为什么？箭头函数中的 this 与定义该函数的上下文中的 this 一致，这通常才是你想要的。而且箭头函数是更简洁的语法。

什么时候不用箭头函数：如果你的函数逻辑较复杂，你应该把它单独写入一个命名函数里头。

  1. // bad
  2. [1, 2, 3].map(function (x) {
  3.   const y = x + 1;
  4.   return x * y;
  5. });
  7. // good
  8. [1, 2, 3].map((x) => {
  9.   const y = x + 1;
  10.   return x * y;
  11. });
  • 如果表达式涉及多行，把他包裹在圆括号里以提高可读性。

    为什么？这样能清晰地显示函数的开始位置和结束位置。

  1. // bad
  2. ['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
  3.     httpMagicObjectWithAVeryLongName,
  4.     httpMethod
  5.   )
  6. );
  8. // good
  9. ['get', 'post', 'put'].map(httpMethod => (
  10.   Object.prototype.hasOwnProperty.call(
  11.     httpMagicObjectWithAVeryLongName,
  12.     httpMethod
  13.   )
  14. ));
  • 避免箭头函数（=>）和比较操作符（<=, >=）``
    ```javascript // bad const itemHeight = (item) => item.height <= 256 ? item.largeSize : item.smallSize;

// bad const itemHeight = (item) => item.height >= 256 ? item.largeSize : item.smallSize;

// good const itemHeight = (item) => (item.height <= 256 ? item.largeSize : item.smallSize);

// good const itemHeight = (item) => { const { height, largeSize, smallSize } = item; return height <= 256 ? largeSize : smallSize; };

  3. [
  5. ](#%E7%9B%AE%E5%BD%95)
  7. <a name="5cf3e034"></a>
  8. ## 类与构造函数
  12. -  使用 `class` 语法。避免直接操作 `prototype`。   
  13. > 为什么？`class` 语法更简洁更易理解。
  15. ```javascript
  16. // bad
  17. function Queue(contents = []) {
  18.   this.queue = [...contents];
  19. }
  20. Queue.prototype.pop = function () {
  21.   const value = this.queue[0];
  22.   this.queue.splice(0, 1);
  23.   return value;
  24. };
  26. // good
  27. class Queue {
  28.   constructor(contents = []) {
  29.     this.queue = [...contents];
  30.   }
  31.   pop() {
  32.     const value = this.queue[0];
  33.     this.queue.splice(0, 1);
  34.     return value;
  35.   }
  36. }
  • 用 extends 实现继承。

    为什么？它是一种内置的方法来继承原型功能而不破坏 instanceof。

  1. // bad
  2. const inherits = require('inherits');
  3. function PeekableQueue(contents) {
  4.   Queue.apply(this, contents);
  5. }
  6. inherits(PeekableQueue, Queue);
  7. PeekableQueue.prototype.peek = function () {
  8.   return this.queue[0];
  9. }
  11. // good
  12. class PeekableQueue extends Queue {
  13.   peek() {
  14.     return this.queue[0];
  15.   }
  16. }
  • 方法可以返回 this 来实现链式调用。
    ```javascript // bad Jedi.prototype.jump = function () { this.jumping = true; return true; };

Jedi.prototype.setHeight = function (height) { this.height = height; };

const luke = new Jedi(); luke.jump(); // => true luke.setHeight(20); // => undefined

// good class Jedi { jump() { this.jumping = true; return this; }

setHeight(height) { this.height = height; return this; } }

const luke = new Jedi();

luke.jump() .setHeight(20);

  5. -  如果没有特别定义，类有默认的构造方法。一个空的构造函数或只是代表父类的构造函数是不需要写的。
  7. ```javascript
  8. // bad
  9. class Jedi {
  10.   constructor() {}
  12.   getName() {
  13.     return this.name;
  14.   }
  15. }
  17. // bad
  18. class Rey extends Jedi {
  19.   // 这种构造函数是不需要写的
  20.   constructor(...args) {
  21.     super(...args);
  22.   }
  23. }
  25. // good
  26. class Rey extends Jedi {
  27.   constructor(...args) {
  28.     super(...args);
  29.     this.name = 'Rey';
  30.   }
  31. }

模块

  • 一个路径只 import 一次。

    为什么？多行导入同一路径将使代码变得难以维护。

  1. // bad
  2. import foo from 'foo';
  3. // … 其他导入 … //
  4. import { named1, named2 } from 'foo';
  6. // good
  7. import foo, { named1, named2 } from 'foo';
  9. // good
  10. import foo, {
  11.   named1,
  12.   named2,
  13. } from 'foo';
  • 不要导出可变的东西。

    为什么？变化通常都是需要避免，特别是当你要输出可变的绑定。虽然在某些场景下可能需要这种技术，但总的来说应该导出常量。

  1. // bad
  2. let foo = 3;
  3. export { foo }
  5. // good
  6. const foo = 3;
  7. export { foo }
  • 在一个单一导出模块里，用 export default 更好。

    为什么？鼓励使用更多文件，每个文件只导出一次，这样可读性和可维护性更好。

  1. // bad
  2. export function foo() {}
  4. // good
  5. export default function foo() {}
  • 把 import 放在其他所有语句之前。

    为什么？因为 import 会被提升到代码最前面运行，因此将他们放在最前面以防止发生意外行为。

  1. // bad
  2. import foo from 'foo';
  3. foo.init();
  5. import bar from 'bar';
  7. // good
  8. import foo from 'foo';
  9. import bar from 'bar';
  11. foo.init();
  • 多行 import 应该缩进，就像多行数组和对象字面量一样。

    为什么？花括号与样式指南中每个其他花括号块遵循相同的缩进规则，逗号也是。

  1. // bad
  2. import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';
  4. // good
  5. import {
  6.   longNameA,
  7.   longNameB,
  8.   longNameC,
  9.   longNameD,
  10.   longNameE,
  11. } from 'path';

[

](#%E7%9B%AE%E5%BD%95)

迭代器与生成器

  • 不要用迭代器。使用 JavaScript 高级函数代替 for-in、 for-of。

    为什么？这强调了我们不可变的规则。 处理返回值的纯函数比处理副作用更容易。

用数组的这些迭代方法： map() / every() / filter() / find() / findIndex() / reduce() / some() / … , 用对象的这些方法 Object.keys() / Object.values() / Object.entries() 去产生一个数组，这样你就能去遍历对象了。

  1. const numbers = [1, 2, 3, 4, 5];
  3. // bad
  4. let sum = 0;
  5. for (let num of numbers) {
  6.   sum += num;
  7. }
  8. sum === 15;
  10. // good
  11. let sum = 0;
  12. numbers.forEach(num => sum += num);
  13. sum === 15;
  15. // best (use the functional force)
  16. const sum = numbers.reduce((total, num) => total + num, 0);
  17. sum === 15;
  19. // bad
  20. const increasedByOne = [];
  21. for (let i = 0; i < numbers.length; i++) {
  22.   increasedByOne.push(numbers[i] + 1);
  23. }
  25. // good
  26. const increasedByOne = [];
  27. numbers.forEach(num => increasedByOne.push(num + 1));
  29. // best (keeping it functional)
  30. const increasedByOne = numbers.map(num => num + 1);

[

](#%E7%9B%AE%E5%BD%95)

属性

  • 访问属性时使用点符号。 ```javascript const luke = { jedi: true, age: 28, };

// bad const isJedi = luke[‘jedi’];

// good const isJedi = luke.jedi;

  4. -  当使用变量获取属性时用方括号 `[]`。  
  5. ```javascript
  6. const luke = {
  7.   jedi: true,
  8.   age: 28,
  9. };
  11. function getProp(prop) {
  12.   return luke[prop];
  13. }
  15. const isJedi = getProp('jedi');

[

](#%E7%9B%AE%E5%BD%95)

变量

  • 使用 const 或 let 声明变量。不这样做会导致全局变量。我们想要避免污染全局命名空间。 ```javascript // bad superPower = new SuperPower();

// good const superPower = new SuperPower();

  4. -  为每个变量声明都用一个 `const` 或 `let`。
  6. ```javascript
  7. // bad
  8. const items = getItems(),
  9.     goSportsTeam = true,
  10.     dragonball = 'z';
  12. // bad
  13. // （与前面的比较，找一找错误）
  14. const items = getItems(),
  15.     goSportsTeam = true;
  16.     dragonball = 'z';
  18. // good
  19. const items = getItems();
  20. const goSportsTeam = true;
  21. const dragonball = 'z';
  • 把const 和 let 分别放一起。

    为什么？在你需要分配一个新的变量，而这个变量依赖之前分配过的变量的时候，这种做法是有帮助的。

  1. // bad
  2. let i, len, dragonball,
  3.     items = getItems(),
  4.     goSportsTeam = true;
  6. // bad
  7. let i;
  8. const items = getItems();
  9. let dragonball;
  10. const goSportsTeam = true;
  11. let len;
  13. // good
  14. const goSportsTeam = true;
  15. const items = getItems();
  16. let dragonball;
  17. let i;
  18. let length;
  • 在你需要的地方声明变量，但是要放在合理的位置。

    为什么？let 和 const 都是块级作用域而不是函数级作用域。

  1. // bad - 不必要的函数调用。
  2. function checkName(hasName) {
  3.   const name = getName();
  5.   if (hasName === 'test') {
  6.     return false;
  7.   }
  9.   if (name === 'test') {
  10.     this.setName('');
  11.     return false;
  12.   }
  14.   return name;
  15. }
  17. // good
  18. function checkName(hasName) {
  19.   if (hasName === 'test') {
  20.     return false;
  21.   }
  23.   // 在需要的时候分配
  24.   const name = getName();
  26.   if (name === 'test') {
  27.     this.setName('');
  28.     return false;
  29.   }
  31.   return name;
  32. }
  • 不要使用链式声明变量。 eslint: [no-multi-assign](https://eslint.org/docs/rules/no-multi-assign)

    为什么？链式声明变量会创建隐式全局变量。

  1. // bad
  2. (function example() {
  3.   // JavaScript 将这一段解释为
  4.   // let a = ( b = ( c = 1 ) );
  5.   // let 只对变量 a 起作用; 变量 b 和 c 都变成了全局变量
  6.   let a = b = c = 1;
  7. }());
  9. console.log(a); // undefined
  10. console.log(b); // 1
  11. console.log(c); // 1
  13. // good
  14. (function example() {
  15.   let a = 1;
  16.   let b = a;
  17.   let c = a;
  18. }());
  20. console.log(a); // undefined
  21. console.log(b); // undefined
  22. console.log(c); // undefined
  24. // `const` 也是如此
  • 不要使用一元自增自减运算符（++， --）.

    为什么？根据 eslint 文档，一元增量和减量语句受到自动分号插入的影响，并且可能会导致应用程序中的值递增或递减的静默错误。 使用 num + = 1 而不是 num ++ 或 num ++ 语句也是含义清晰的。 禁止一元增量和减量语句还会阻止您无意地预增/预减值，这也会导致程序出现意外行为。

  1.   // bad
  3.   const array = [1, 2, 3];
  4.   let num = 1;
  5.   num++;
  6.   --num;
  8.   let sum = 0;
  9.   let truthyCount = 0;
  10.   for (let i = 0; i < array.length; i++) {
  11.     let value = array[i];
  12.     sum += value;
  13.     if (value) {
  14.       truthyCount++;
  15.     }
  16.   }
  18.   // good
  20.   const array = [1, 2, 3];
  21.   let num = 1;
  22.   num += 1;
  23.   num -= 1;
  25.   const sum = array.reduce((a, b) => a + b, 0);
  26.   const truthyCount = array.filter(Boolean).length;
  • 在赋值的时候避免在 = 前/后换行。 如果你的赋值语句超出 [max-len](https://eslint.org/docs/rules/max-len.html)，那就用小括号把这个值包起来再换行。

    为什么？在 = 附近换行容易混淆这个赋值语句。

  1. // bad
  2. const foo =
  3.   superLongLongLongLongLongLongLongLongFunctionName();
  5. // bad
  6. const foo
  7.   = 'superLongLongLongLongLongLongLongLongString';
  9. // good
  10. const foo = (
  11.   superLongLongLongLongLongLongLongLongFunctionName()
  12. );
  14. // good
  15. const foo = 'superLongLongLongLongLongLongLongLongString';
  • 不允许有未使用的变量。eslint: [no-unused-vars](https://eslint.org/docs/rules/no-unused-vars)

    为什么？一个声明了但未使用的变量更像是由于重构未完成产生的错误。这种在代码中出现的变量会使阅读者迷惑。

  1. // bad
  3. var some_unused_var = 42;
  5. // 写了没用
  6. var y = 10;
  7. y = 5;
  9. // 变量改了自己的值，也没有用这个变量
  10. var z = 0;
  11. z = z + 1;
  13. // 参数定义了但未使用
  14. function getX(x, y) {
  15.     return x;
  16. }
  18. // good
  19. function getXPlusY(x, y) {
  20.   return x + y;
  21. }
  23. var x = 1;
  24. var y = a + 2;
  26. alert(getXPlusY(x, y));
  28. // 'type' 即使没有使用也可以可以被忽略， 因为这个有一个 rest 取值的属性。
  29. // 这是从对象中抽取一个忽略特殊字段的对象的一种形式
  30. var { type, ...coords } = data;
  31. // 'coords' 现在就是一个没有 'type' 属性的 'data' 对象

比较运算符与相等

  • 用 === 和 !== 而不是 == 和 !=
  • 在 case 和 default 分句里用大括号创建一块包含词法声明的区域（例如：let、const、function 和 class）。

    为什么？词法声明在整个 switch 的代码块里都可见，但是只有当其被分配后才会初始化，仅当这个 case 被执行时才被初始化。当多个 case 分句试图定义同一个对象时就会出现问题。

  1. // bad
  2. switch (foo) {
  3.   case 1:
  4.     let x = 1;
  5.     break;
  6.   case 2:
  7.     const y = 2;
  8.     break;
  9.   case 3:
  10.     function f() {
  11.       // ...
  12.     }
  13.     break;
  14.   default:
  15.     class C {}
  16. }
  18. // good
  19. switch (foo) {
  20.   case 1: {
  21.     let x = 1;
  22.     break;
  23.   }
  24.   case 2: {
  25.     const y = 2;
  26.     break;
  27.   }
  28.   case 3: {
  29.     function f() {
  30.       // ...
  31.     }
  32.     break;
  33.   }
  34.   case 4:
  35.     bar();
  36.     break;
  37.   default: {
  38.     class C {}
  39.   }
  40. }
  • 三元表达式不应该嵌套，通常是单行表达式。

image.png

  1. // bad
  2. const foo = maybe1 > maybe2
  3.   ? "bar"
  4.   : value1 > value2 ? "baz" : null;
  6. // better
  7. const maybeNull = value1 > value2 ? 'baz' : null;
  9. const foo = maybe1 > maybe2
  10. ? 'bar'
  11.   : maybeNull;
  13. // best
  14. const maybeNull = value1 > value2 ? 'baz' : null;
  16. const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
  • 避免不必要的三元表达式。 ```javascript // bad const foo = a ? a : b; const bar = c ? true : false; const baz = c ? false : true;

// good const foo = a || b; const bar = !!c; const baz = !c;

  4. -  用圆括号来组合操作符。 只有当标准的算术运算符（`+`, `-`, `*`, 和 `/`）， 并且它们的优先级显而易见时，才可以不用圆括号括起来。
  5. > 为什么？这提高了可读性，并且明确了开发者的意图。
  7. ```javascript
  8. // bad
  9. const foo = a && b < 0 || c > 0 || d + 1 === 0;
  11. // bad
  12. const bar = a ** b - 5 % d;
  14. // bad
  15. // 别人会陷入(a || b) && c 的迷惑中
  16. if (a || b && c) {
  17.   return d;
  18. }
  20. // good
  21. const foo = (a && b < 0) || c > 0 || (d + 1 === 0);
  23. // good
  24. const bar = (a ** b) - (5 % d);
  26. // good
  27. if (a || (b && c)) {
  28.   return d;
  29. }
  31. // good
  32. const bar = a + b / c * d;

[

](#%E7%9B%AE%E5%BD%95)

块

  • 如果 if 语句中总是需要用 return 返回，那后续的 else 就不需要写了。 if 块中包含 return， 它后面的 else if 块中也包含了 return， 这个时候就可以把 return 分到多个 if 语句块中。 eslint: [no-else-return](https://eslint.org/docs/rules/no-else-return)
    ```javascript // bad function foo() { if (x) { return x; } else { return y; } }

// bad function cats() { if (x) { return x; } else if (y) { return y; } }

// bad function dogs() { if (x) { return x; } else { if (y) { return y; } } }

// good function foo() { if (x) { return x; }

return y; }

// good function cats() { if (x) { return x; }

if (y) { return y; } }

// good function dogs(x) { if (x) { if (z) { return y; } } else { return z; } }

  2. [
  4. ](#%E7%9B%AE%E5%BD%95)
  6. <a name="ea5302a4"></a>
  7. ## 控制语句
  11. -  当你的控制语句（`if`, `while` 等）太长或者超过最大长度限制的时候，把每一个（组）判断条件放在单独一行里。逻辑操作符放在行首。   
  12. > 为什么？把逻辑操作符放在行首是让操作符的对齐方式和链式函数保持一致。这提高了可读性，也让复杂逻辑更清晰。
  14. ```javascript
  15. // bad
  16. if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
  17.   thing1();
  18. }
  20. // bad
  21. if (foo === 123 &&
  22.   bar === 'abc') {
  23.   thing1();
  24. }
  26. // bad
  27. if (foo === 123
  28.   && bar === 'abc') {
  29.   thing1();
  30. }
  32. // bad
  33. if (
  34.   foo === 123 &&
  35.   bar === 'abc'
  36. ) {
  37.   thing1();
  38. }
  40. // good
  41. if (
  42.   foo === 123
  43.   && bar === 'abc'
  44. ) {
  45.   thing1();
  46. }
  48. // good
  49. if (
  50.   (foo === 123 || bar === 'abc')
  51.   && doesItLookGoodWhenItBecomesThatLong()
  52.   && isThisReallyHappening()
  53. ) {
  54.   thing1();
  55. }
  57. // good
  58. if (foo === 123 && bar === 'abc') {
  59.   thing1();
  60. }

[

](#%E7%9B%AE%E5%BD%95)

注释

  • 多行注释用 /** ... */。
    ```javascript // bad // make() returns a new element // based on the passed in tag name // // @param {String} tag // @return {Element} element function make(tag) {

    // …

    return element; }

// good /**

  • make() returns a new element

  • based on the passed-in tag name */ function make(tag) {

    // …

    return element; } ```

  • 所有注释开头空一格，方便阅读。 ```javascript // bad //is current tab const active = true;

// good // is current tab const active = true;

// bad /* make() returns a new element based on the passed-in tag name / function make(tag) {

// …

return element; }

// good /**

  • make() returns a new element

  • based on the passed-in tag name */ function make(tag) {

    // …

    return element; } ```

[

](#%E7%9B%AE%E5%BD%95)

空格

  • 一个缩进使用两个空格。 ```javascript // bad function foo() { ∙∙∙∙const name; }

// bad function bar() { ∙const name; }

// good function baz() { ∙∙const name; }

  4. -  在大括号前空一格。
  5. ```javascript
  6. // bad
  7. function test(){
  8.   console.log('test');
  9. }
  11. // good
  12. function test() {
  13.   console.log('test');
  14. }
  16. // bad
  17. dog.set('attr',{
  18.   age: '1 year',
  19.   breed: 'Bernese Mountain Dog',
  20. });
  22. // good
  23. dog.set('attr', {
  24.   age: '1 year',
  25.   breed: 'Bernese Mountain Dog',
  26. });
  • 在控制语句（if, while 等）的圆括号前空一格。在函数调用和定义时，参数列表和函数名之间不空格。 ```javascript // bad if(isJedi) { fight (); }

// good if (isJedi) { fight(); }

// bad function fight () { console.log (‘Swooosh!’); }

// good function fight() { console.log(‘Swooosh!’); }

  4. -  用空格来隔开运算符。
  5. ```javascript
  6. // bad
  7. const x=y+5;
  9. // good
  10. const x = y + 5;
  • 当出现长的方法链式调用时（>2个）用缩进。用点开头强调该行是一个方法调用，而不是一个新的语句。 ```javascript // bad $(‘#items’).find(‘.selected’).highlight().end().find(‘.open’).updateCount();

// bad $(‘#items’). find(‘.selected’). highlight(). end(). find(‘.open’). updateCount();

// good $(‘#items’) .find(‘.selected’) .highlight() .end() .find(‘.open’) .updateCount();

// bad const leds = stage.selectAll(‘.led’).data(data).enter().append(‘svg:svg’).classed(‘led’, true) .attr(‘width’, (radius + margin) * 2).append(‘svg:g’) .attr(‘transform’, translate(${radius + margin},${radius + margin})) .call(tron.led);

// good const leds = stage.selectAll(‘.led’) .data(data) .enter().append(‘svg:svg’) .classed(‘led’, true) .attr(‘width’, (radius + margin) * 2) .append(‘svg:g’) .attr(‘transform’, translate(${radius + margin},${radius + margin})) .call(tron.led);

// good const leds = stage.selectAll(‘.led’).data(data);

  4. -  在一个代码块后下一条语句前空一行。  
  5. ```javascript
  6. // bad
  7. if (foo) {
  8.   return bar;
  9. }
  10. return baz;
  12. // good
  13. if (foo) {
  14.   return bar;
  15. }
  17. return baz;
  19. // bad
  20. const obj = {
  21.   foo() {
  22.   },
  23.   bar() {
  24.   },
  25. };
  26. return obj;
  28. // good
  29. const obj = {
  30.   foo() {
  31.   },
  33.   bar() {
  34.   },
  35. };
  37. return obj;
  39. // bad
  40. const arr = [
  41.   function foo() {
  42.   },
  43.   function bar() {
  44.   },
  45. ];
  46. return arr;
  48. // good
  49. const arr = [
  50.   function foo() {
  51.   },
  53.   function bar() {
  54.   },
  55. ];
  57. return arr;

  • 不要用空白行填充块。 ```javascript // bad function bar() {

    console.log(foo);

}

// also bad if (baz) {

console.log(qux); } else { console.log(foo);

}

// good function bar() { console.log(foo); }

// good if (baz) { console.log(qux); } else { console.log(foo); }

  4. -  不要在代码之间使用多个空白行填充。
  5. ```javascript
  6. // bad
  7. class Person {
  8.   constructor(fullName, email, birthday) {
  9.     this.fullName = fullName;
  12.     this.email = email;
  15.     this.setAge(birthday);
  16.   }
  19.   setAge(birthday) {
  20.     const today = new Date();
  23.     const age = this.getAge(today, birthday);
  26.     this.age = age;
  27.   }
  30.   getAge(today, birthday) {
  31.   // ..
  32.   }
  33. }
  35. // good
  36. class Person {
  37.   constructor(fullName, email, birthday) {
  38.     this.fullName = fullName;
  39.     this.email = email;
  40.     this.setAge(birthday);
  41.   }
  43.   setAge(birthday) {
  44.     const today = new Date();
  45.     const age = getAge(today, birthday);
  46.     this.age = age;
  47.   }
  49.   getAge(today, birthday) {
  50.     // ..
  51.   }
  52. }
  • 圆括号里不要加空格。 ```javascript // bad function bar( foo ) { return foo; }

// good function bar(foo) { return foo; }

// bad if ( foo ) { console.log(foo); }

// good if (foo) { console.log(foo); }

  4. -  方括号里不要加空格。 
  5. ```javascript
  6. // bad
  7. const foo = [ 1, 2, 3 ];
  8. console.log(foo[ 0 ]);
  10. // good，逗号分隔符后还是要空格的。
  11. const foo = [1, 2, 3];
  12. console.log(foo[0]);
  • 花括号里加空格 。 ```javascript // bad const foo = {clark: ‘kent’};

// good const foo = { clark: ‘kent’ };

  4. -  避免一行代码超过100个字符（包含空格）。注意：对于 [上面](#strings--line-length)，长字符串不受此规则限制，不应换行。 
  5. > 为什么？这样确保可读性和可维护性。
  7. ```javascript
  8. // bad
  9. const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;
  11. // bad
  12. $.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));
  14. // good
  15. const foo = jsonData
  16.   && jsonData.foo
  17.   && jsonData.foo.bar
  18.   && jsonData.foo.bar.baz
  19.   && jsonData.foo.bar.baz.quux
  20.   && jsonData.foo.bar.baz.quux.xyzzy;
  22. // good
  23. $.ajax({
  24.   method: 'POST',
  25.   url: 'https://airbnb.com/',
  26.   data: { name: 'John' },
  27. })
  28.   .done(() => console.log('Congratulations!'))
  29.   .fail(() => console.log('You have failed this city.'));
  • 作为语句的花括号内也要加空格 —— { 后和 } 前都需要空格。 ```javascript // bad function foo() {return true;} if (foo) { bar = 0;}

// good function foo() { return true; } if (foo) { bar = 0; }

  4. -  `,` 前不要空格， `,` 后需要空格。 
  5. ```javascript
  6. // bad
  7. var foo = 1,bar = 2;
  8. var arr = [1 , 2];
  10. // good
  11. var foo = 1, bar = 2;
  12. var arr = [1, 2];
  • 调用函数时，函数名和小括号之间不要空格。 ```javascript // bad func ();

func ();

// good func();

  4. -  在对象的字面量属性中， `key`  和 `value` 之间要有空格。 
  5. ```javascript
  6. // bad
  7. var obj = { "foo" : 42 };
  8. var obj2 = { "foo":42 };
  10. // good
  11. var obj = { "foo": 42 };
  • 避免出现多个空行。 在文件末尾只允许空一行。避免在文件开始处出现空行。 ```javascript // bad - multiple empty lines var x = 1;

var y = 2;

// bad - 2+ newlines at end of file var x = 1; var y = 2;

// bad - 1+ newline(s) at beginning of file

var x = 1; var y = 2;

// good var x = 1; var y = 2;

  2. [
  4. ](#%E7%9B%AE%E5%BD%95)
  6. <a name="c2d5517a"></a>
  7. ## 逗号
  11. -  不要前置逗号。
  12. ```javascript
  13. // bad
  14. const story = [
  15.     once
  16.   , upon
  17.   , aTime
  18. ];
  20. // good
  21. const story = [
  22.   once,
  23.   upon,
  24.   aTime,
  25. ];
  27. // bad
  28. const hero = {
  29.     firstName: 'Ada'
  30.   , lastName: 'Lovelace'
  31.   , birthYear: 1815
  32.   , superPower: 'computers'
  33. };
  35. // good
  36. const hero = {
  37.   firstName: 'Ada',
  38.   lastName: 'Lovelace',
  39.   birthYear: 1815,
  40.   superPower: 'computers',
  41. };

[

](#%E7%9B%AE%E5%BD%95)

分号

  • 要分号

    为什么？当 JavaScript 遇到没有分号结尾的一行，它会执行 自动插入分号 这一规则来决定行末是否加分号。如果 JavaScript 在你的断行里错误的插入了分号，就会出现一些古怪的行为。当新的功能加到JavaScript 里后， 这些规则会变得更复杂难懂。清晰的结束语句，并通过配置代码检查去检查没有带分号的地方可以帮助你防止这种错误。

  1. // bad - 抛出异常
  2. const luke = {}
  3. const leia = {}
  4. [luke, leia].forEach((jedi) => jedi.father = 'vader')
  6. // bad - 抛出异常
  7. const reaction = "No! That’s impossible!"
  8. (async function meanwhileOnTheFalcon() {
  9.   // 处理 `leia`, `lando`, `chewie`, `r2`, `c3p0`
  10.   // ...
  11. }())
  13. // bad - 将返回 `undefined` 而不是下一行的值。由于 ASI，当 `return`单独出现在一行时，这种情况会一直出现。
  14. function foo() {
  15.   return
  16.     'search your feelings, you know it to be foo'
  17. }
  19. // good
  20. const luke = {};
  21. const leia = {};
  22. [luke, leia].forEach((jedi) => {
  23.   jedi.father = 'vader';
  24. });
  26. // good
  27. const reaction = "No! That’s impossible!";
  28. (async function meanwhileOnTheFalcon() {
  29.   // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  30.   // ...
  31. }());
  33. // good
  34. function foo() {
  35.   return 'search your feelings, you know it to be foo';
  36. }

[

](#%E7%9B%AE%E5%BD%95)

类型转换与强制转换

  • 字符串: ```javascript // => this.reviewScore = 9;

// bad const totalScore = new String(this.reviewScore); // typeof totalScore is “object” not “string”

// bad const totalScore = this.reviewScore + ‘’; // 将会执行 this.reviewScore.valueOf()

// bad const totalScore = this.reviewScore.toString(); // 不保证返回 string

// good const totalScore = String(this.reviewScore);

  4. -  数字: 用 `Number` 做类型转换，`parseInt` 转换 `string` 应总是带上基数。 
  5. > 为什么？函数 `parseInt`  会根据指定的基数将字符串转换为数字。字符串开头的空白字符将会被忽略，如果参数基数（第二个参数）为 `undefined` 或者 `0` ，除非字符串开头为 `0x` 或 `0X`（十六进制），会默认假设为 `10`。这个差异来自 ECMAScript 3，它不鼓励（但是允许）解释八进制。在 2013 年之前，一些实现不兼容这种行为。因为我们需要支持旧浏览器，所以应当始终指定进制。
  8. ```javascript
  9. const inputValue = '4';
  11. // bad
  12. const val = new Number(inputValue);
  14. // bad
  15. const val = +inputValue;
  17. // bad
  18. const val = inputValue >> 0;
  20. // bad
  21. const val = parseInt(inputValue);
  23. // good
  24. const val = Number(inputValue);
  26. // good
  27. const val = parseInt(inputValue, 10);

[

](#%E7%9B%AE%E5%BD%95)

Get-Set 访问器

  • 如果属性/方法是 boolean， 用 isVal() 或 hasVal()。
    ```javascript // bad if (!dragon.age()) { return false; }

// good if (!dragon.hasAge()) { return false; }

  4. -  `get()` 和 `set()` 函数是可以的，但是要一起用。  
  5. ```javascript
  6. class Jedi {
  7.   constructor(options = {}) {
  8.     const lightsaber = options.lightsaber || 'blue';
  9.     this.set('lightsaber', lightsaber);
  10.   }
  12.   set(key, val) {
  13.     this[key] = val;
  14.   }
  16.   get(key) {
  17.     return this[key];
  18.   }
  19. }