Airbnb JavaScript 风格指南

JavaScript最合理的方法 A mostly reasonable approach to JavaScript
_
这个指南内容来自Airbnb在github.com上的官方原文和官方中文译本。主体是中文译本，同时把英文原文也合并到一起，以便解决中文译本不够精准的问题。在复制整理的过程中，对于少量中文翻译不准或有错别字的地方，进行了修正。本文后续不会跟踪官方版本的变化，需要了解最新内容的，可以访问下面是各版本的链接。简体中文版的有个别内容的翻译不如繁体中文版本准确，因此也附上链接（当然最好还是直接去看英文版）。

官方英文版：https://github.com/airbnb/javascript
简体中文版：https://github.com/lin-123/javascript
繁体中文版：https://github.com/jigsawye/javascript

Types

1. 基本类型: 你可以直接获取到基本类型的值

1.1 Primitives: When you access a primitive type you work directly on its value.

• string
• number
• boolean
• null
• undefined
• symbol ```javascript const foo = 1; let bar = foo; bar = 9;

console.log(foo, bar); // => 1, 9

Symbols 不能被正确的polyfill。 所以在不能原生支持symbol类型的环境[浏览器]中，不应该使用 symbol 类型。
<a name="Bfbp1"></a>
### 2. 复杂类型: 复杂类型赋值是获取到他的引用的值，相当于传引用
[1.2](https://github.com/airbnb/javascript#types--complex)  Complex: When you access a complex type you work on a reference to its value.
   - `object`
   - `array`
   - `function`
```javascript
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9

References

3. 所有的赋值都用const，避免使用var

2.1 Use const for all of your references; avoid using var.
eslint: prefer-const, no-const-assign

Why? 因为这个确保你不会改变你的初始值，重复引用会导致bug和代码难以理解

// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2;

4. 如果你一定要对参数重新赋值，那就用let，而不是var

2.2 If you must reassign references, use let instead of var.
eslint: no-var

Why? 因为let是块级作用域，而var是函数级作用域

// bad
var count = 1;
if (true) {
  count += 1;
}
// good, use the let.
let count = 1;
if (true) {
  count += 1;
}

• 注意： let、const都是块级作用域

2.3 Note that both let and const are block-scoped.

// const 和 let 都只存在于它定义的那个块级作用域
{
  let a = 1;
  const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError

Objects

5. 使用字面值创建对象

3.1 Use the literal syntax for object creation.
eslint: no-new-object

// bad
const item = new Object();
// good
const item = {};

6. 当创建一个带有动态属性名的对象时，用计算后的属性名

3.2 Use computed property names when creating objects with dynamic property names.

Why? 这可以使你将定义的所有属性放在对象的一个地方.

function getKey(k) {
  return `a key named ${k}`;
}
// bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;
// good getKey('enabled')是动态属性名
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

7. 用对象方法简写

3.3 Use object method shorthand.
eslint: object-shorthand

// bad
const atom = {
  value: 1,
  addValue: function (value) {
    return atom.value + value;
  },
};
// good
const atom = {
  value: 1,
  // 对象的方法
  addValue(value) {
    return atom.value + value;
  },
};

8. 用属性值缩写

3.4 Use property value shorthand.
eslint: object-shorthand

Why? 这样写的更简洁且更可读

const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
  lukeSkywalker,
};

9. 将你的所有缩写放在对象声明的开始

3.5 Group your shorthand properties at the beginning of your object declaration.

Why? 这样也是为了更方便的知道有哪些属性用了缩写.

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};
// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

10. 只对那些无效的标识使用引号 ''

3.6 Only quote properties that are invalid identifiers.
eslint: quote-props

Why? 通常我们认为这种方式主观上易读。他优化了代码高亮，并且也更容易被许多JS引擎压缩。

// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};
// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};

11. 不要直接调用Object.prototype上的方法

如hasOwnProperty, propertyIsEnumerable, isPrototypeOf。
3.7 Do not call Object.prototype methods directly, such as hasOwnProperty, propertyIsEnumerable, and isPrototypeOf.

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

// bad
console.log(object.hasOwnProperty(key));
// good
console.log(Object.prototype.hasOwnProperty.call(object, key));
// best
const has = Object.prototype.hasOwnProperty; // 在模块作用内做一次缓存
/* or */
import has from 'has'; // https://www.npmjs.com/package/has
// ...
console.log(has.call(object, key));

12. 对象浅拷贝时，更推荐使用扩展运算符[就是...运算符]，而不是Object.assign

获取对象指定的几个属性时，用对象的rest解构运算符[也是...运算符]更好。
3.8 Prefer the object spread operator over Object.assign to shallow-copy objects. Use the object rest operator to get a new object with certain properties omitted.

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ
delete copy.a; // so does this
// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
// good es6扩展运算符 ...
const original = { a: 1, b: 2 };
// 浅拷贝
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
// rest 赋值运算符
const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

Arrays

13. 用字面量赋值

4.1 Use the literal syntax for array creation.
eslint: no-array-constructor

// bad
const items = new Array();
// good
const items = [];

14. 用 Array#push代替直接向数组中添加一个值

4.2 Use Array#push instead of direct assignment to add items to an array.

const someStack = [];
// bad
someStack[someStack.length] = 'abracadabra';
// good
someStack.push('abracadabra');

15. 用扩展运算符做数组浅拷贝

4.3 Use array spreads ... to copy arrays.

// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];

16. 用 ... 运算符而不是 Array.from来将一个可迭代的对象转换成数组

4.4 To convert an iterable object to an array, use spreads ... instead of Array.from.

const foo = document.querySelectorAll('.foo');
// good
const nodes = Array.from(foo);
// best
const nodes = [...foo];

17. 用 Array.from 去将一个类数组对象转成一个数组

4.5 Use Array.from for converting an array-like object to an array.

const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };
// bad
const arr = Array.prototype.slice.call(arrLike);
// good
const arr = Array.from(arrLike);

18. 用 Array.from 而不是 ... 运算符去做map遍历

因为这样可以避免创建一个临时数组。
4.6 Use Array.from instead of spread ... for mapping over iterables, because it avoids creating an intermediate array.

// bad
const baz = [...foo].map(bar);
// good
const baz = Array.from(foo, bar);

19. 在数组方法的回调函数中使用 return 语句

如果函数体由一条返回一个表达式的语句组成， 并且这个表达式没有副作用， 这个时候可以忽略return，详见44 eslint: array-callback-return
4.7 Use return statements in array method callbacks. It’s ok to omit the return if the function body consists of a single statement returning an expression without side effects, following 8.2.

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});
// good 函数只有一个语句
[1, 2, 3].map(x => x + 1);
// bad - 没有返回值， 因为在第一次迭代后acc 就变成undefined了
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  acc[index] = flatten;
});
// good
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  acc[index] = flatten;
  return flatten;
});
// bad
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  } else {
    return false;
  }
});
// good
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  }
  return false;
});

20. 如果一个数组有很多行，在数组的 [ 后和 ] 前断行

4.8 Use line breaks after open and before close array brackets if an array has multiple lines

// 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,
];

Destructuring

21. 用对象的解构赋值来获取和使用对象某个或多个属性值

5.1 Use object destructuring when accessing and using multiple properties of an object.
eslint: prefer-destructuring

Why? 解构使您不必为这些属性创建临时引用

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
  return `${firstName} ${lastName}`;
}
// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}
// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

22. 用数组解构

5.2 Use array destructuring.

const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;

23. 多个返回值用对象的解构，而不是数组解构

5.3 Use object destructuring for multiple return values, not array destructuring.

Why? 你可以在后期添加新的属性或者变换变量的顺序而不会打破原有的调用

// bad
function processInput(input) {
  // 然后就是见证奇迹的时刻
  return [left, right, top, bottom];
}
// 调用者需要想一想返回值的顺序
const [left, __, top] = processInput(input);
// good
function processInput(input) {
  // oops， 奇迹又发生了
  return { left, right, top, bottom };
}
// 调用者只需要选择他想用的值就好了
const { left, top } = processInput(input);

Strings

24. 对string用单引号 ''

6.1 Use single quotes '' for strings.
eslint: quotes

// bad
const name = "Capt. Janeway";
// bad - 样例应该包含插入文字或换行
const name = `Capt. Janeway`;
// good
const name = 'Capt. Janeway';

25. 超过100个字符的字符串不应该用string串联成多行

6.2 Strings that cause the line to go over 100 characters should not be written across multiple lines using string concatenation.

Why? 被折断的字符串工作起来是糟糕的而且使得代码更不易被搜索。

// bad
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.';
// bad
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.';
// good
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.';

26. 用字符串模板而不是字符串拼接来组织可编程字符串

6.3 When programmatically building up strings, use template strings instead of concatenation.
eslint: prefer-template template-curly-spacing

Why? 模板字符串更具可读性、语法简洁、字符串插入参数。

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}
// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}
// bad
function sayHi(name) {
  return `How are you, ${ name }?`;
}
// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

27. 永远不要在字符串中用eval()，他就是潘多拉盒子

6.4 Never use eval() on a string, it opens too many vulnerabilities.
eslint: no-eval

28. 不要使用不必要的转义字符

6.5 Do not unnecessarily escape characters in strings.
eslint: no-useless-escape

Why? 反斜线可读性差，所以他们只在必须使用时才出现

// bad
const foo = '\'this\' \i\s \"quoted\"';
// good
const foo = '\'this\' is "quoted"';
//best
const foo = `my name is '${name}'`;

Functions

29. 用命名函数表达式而不是函数声明

7.1 Use named function expressions instead of function declarations.
eslint: func-style

函数表达式： const func = function () {} 函数声明： function func() {} Why? 函数声明时作用域被提前了，这意味着在一个文件里函数很容易（太容易了）在其定义之前被引用。这样伤害了代码可读性和可维护性。如果你发现一个函数又大又复杂，这个函数妨碍这个文件其他部分的理解性，这可能就是时候把这个函数单独抽成一个模块了。别忘了给表达式显示的命名，不用管这个名字是不是由一个确定的变量推断出来的，这消除了由匿名函数在错误调用栈产生的所有假设，这在现代浏览器和类似babel编译器中很常见 (Discussion) 这一段还不理解这种错误发生的场景，所以只能直译过来了， 另附原文 Why? Function declarations are hoisted, which means that it’s easy - too easy - to reference the function before it is defined in the file. This harms readability and maintainability. If you find that a function’s definition is large or complex enough that it is interfering with understanding the rest of the file, then perhaps it’s time to extract it to its own module! Don’t forget to explicitly name the expression, regardless of whether or not the name is inferred from the containing variable (which is often the case in modern browsers or when using compilers such as Babel). This eliminates any assumptions made about the Error’s call stack. (Discussion)

// bad
function foo() {
  // ...
}
// bad
const foo = function () {
  // ...
};
// good
// lexical name distinguished from the variable-referenced invocation(s)
// 函数表达式名和声明的函数名是不一样的
const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};

30. 把立即执行函数包裹在圆括号里

7.2 Wrap immediately invoked function expressions in parentheses.
eslint: wrap-iife

Why? immediately invoked function expression = IIFE Why? 一个立即调用的函数表达式是一个单元 - 把它和他的调用者（圆括号）包裹起来，在括号中可以清晰的地表达这些。 Why? 注意：在模块化世界里，你几乎用不着 IIFE

// immediately-invoked function expression (IIFE)
(function () {
  console.log('Welcome to the Internet. Please follow me.');
}());

31. 不要在非函数块（if、while等等）内声明函数

把这个函数分配给一个变量。浏览器会允许你这样做，但浏览器解析方式不同，这是一个坏消息（详见no-loop-func）。
7.3 Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears.
eslint: no-loop-func
Note: 在ECMA-262中 [块 block] 的定义是： 一系列的语句； 但是函数声明不是一个语句。 函数表达式是一个语句。
7.4 Note: ECMA-262 defines a block as a list of statements. A function declaration is not a statement.

// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}
// good
let test;
if (currentUser) {
  test = () => {
    console.log('Yup.');
  };
}

32. 不要用arguments命名参数

他的优先级高于每个函数作用域自带的 arguments 对象， 这会导致函数自带的 arguments 值被覆盖
7.5 Never name a parameter arguments. This will take precedence over the arguments object that is given to every function scope.

// bad
function foo(name, options, arguments) {
  // ...
}
// good
function foo(name, options, args) {
  // ...
}

33. 不要使用arguments，用rest语法...代替

7.6 Never use arguments, opt to use rest syntax ... instead.
eslint: prefer-rest-params

Why? ...明确你想用那个参数。而且rest参数是真数组，而不是类似数组的arguments

// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}
// good
function concatenateAll(...args) {
  return args.join('');
}
•

34. 用默认参数语法而不是在函数里对参数重新赋值

7.7 Use default parameter syntax rather than mutating function arguments.

// 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 = {}) {
  // ...
}

35. 默认参数避免副作用

7.8 Avoid side effects with default parameters.

Why? 他会令人迷惑不解， 比如下面这个， a到底等于几， 这个需要想一下。

var b = 1;
// bad
function count(a = b++) {
  console.log(a);
}
count();  // 1
count();  // 2
count(3); // 3
count();  // 3

36. 把默认参数赋值放在最后

7.9 Always put default parameters last.

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

37. 不要用函数构造器创建函数

7.10 Never use the Function constructor to create a new function.
eslint: no-new-func

Why? 以这种方式创建函数将类似于字符串 eval()，这会打开漏洞。

// bad
var add = new Function('a', 'b', 'return a + b');
// still bad
var subtract = Function('a', 'b', 'return a - b');

38. 函数签名部分要有空格

7.11 Spacing in a function signature.
eslint: space-before-function-paren space-before-blocks

Why? 统一性好，而且在你添加/删除一个名字的时候不需要添加/删除空格

// bad
const f = function(){};
const g = function (){};
const h = function() {};
// good
const x = function () {};
const y = function a() {};

39. 不要改参数

7.12 Never mutate parameters.
eslint: no-param-reassign

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

// bad
function f1(obj) {
  obj.key = 1;
};
// good
function f2(obj) {
  const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
};

40. 不要对参数重新赋值

7.13 Never reassign parameters.
eslint: no-param-reassign

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

// bad
function f1(a) {
  a = 1;
  // ...
}
function f2(a) {
  if (!a) { a = 1; }
  // ...
}
// good
function f3(a) {
  const b = a || 1;
  // ...
}
function f4(a = 1) {
  // ...
}

41. 用spread操作符...去调用多变的函数更好

7.14 Prefer the use of the spread operator ... to call variadic functions.
eslint: prefer-spread

Why? 这样更清晰，你不必提供上下文，而且你不能轻易地用apply来组成new

// bad
const x = [1, 2, 3, 4, 5];
console.log.apply(console, x);
// good
const x = [1, 2, 3, 4, 5];
console.log(...x);
// bad
new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));
// good
new Date(...[2016, 8, 5]);

42. 调用或者书写包含多个参数的函数应该每行只包含一个参数，逗号结尾

7.15 Functions with multiline signatures, or invocations, should be indented just like every other multiline list in this guide: with each item on a line by itself, with a trailing comma on the last item.

// bad
function foo(bar,
             baz,
             quux) {
  // ...
}
// good 缩进不要太过分
function foo(
  bar,
  baz,
  quux,
) {
  // ...
}
// bad
console.log(foo,
  bar,
  baz);
// good
console.log(
  foo,
  bar,
  baz,
);

Arrow Functions

43. 如果一定要用匿名函数（在回调函数里）的时候用箭头表达式

8.1 When you must use an anonymous function (as when passing an inline callback), use arrow function notation.
eslint: prefer-arrow-callback, arrow-spacing

Why? 他创建了一个this的当前执行上下文的函数的版本，这通常就是你想要的；而且箭头函数是更简洁的语法 Why? 什么时候不用箭头函数： 如果你有一个相当复杂的函数，你可能会把这个逻辑移出到他自己的函数声明里。

// bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});
// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

44. 如果函数体由一个没有副作用的表达式语句组成，删除大括号和return。否则，继续用大括号和 return 语句

8.2 If the function body consists of a single statement returning an expression without side effects, omit the braces and use the implicit return. Otherwise, keep the braces and use a return statement.
eslint: arrow-parens, arrow-body-style

Why? 语法糖，当多个函数链在一起的时候好读

// bad
[1, 2, 3].map(number => {
  const nextNumber = number + 1;
  `A string containing the ${nextNumber}.`;
});
// good
[1, 2, 3].map(number => `A string containing the ${number}.`);
// good
[1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
});
// good
[1, 2, 3].map((number, index) => ({
  [index]: number
}));
// 表达式有副作用就不要用隐式return
function foo(callback) {
  const val = callback();
  if (val === true) {
    // Do something if callback returns true
  }
}
let bool = false;
// bad
// 这种情况会return bool = true, 不好
foo(() => bool = true);
// good
foo(() => {
  bool = true;
});

45. 如果表达式涉及多行，把他包裹在圆括号里

8.3 In case the expression spans over multiple lines, wrap it in parentheses for better readability.

Why? 这样清晰的显示函数的开始和结束

// bad
['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod
  )
);
// good
['get', 'post', 'put'].map(httpMethod => (
  Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod
  )
));

46. 如果你的函数只有一个参数并且函数体没有大括号，就删除圆括号。否则，参数总是放在圆括号里

8.4 Always include parentheses around arguments for clarity and consistency.
注意： 一直用圆括号也是没问题，只需要配置 “always” option for eslint
eslint: arrow-parens

Why? 这样少一些混乱， 其实没啥语法上的讲究，就保持一个风格。

// bad
[1, 2, 3].map((x) => x * x);
// good
[1, 2, 3].map(x => x * x);
// good
[1, 2, 3].map(number => (
  `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
));
// bad
[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;
});
// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

47. 避免箭头函数(=>)和比较操作符（<=, >=）混淆

8.5 Avoid confusing arrow function syntax (=>) with comparison operators (<=, >=).
eslint: no-confusing-arrow

// 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;
};

48. 在隐式return中强制约束函数体的位置， 就写在箭头后面

8.6 Enforce the location of arrow function bodies with implicit returns.
eslint: implicit-arrow-linebreak

// bad
(foo) =>
  bar;
(foo) =>
  (bar);
// good
(foo) => bar;
(foo) => (bar);
(foo) => (
   bar
)

Classes & Constructors

49. 常用class，避免直接操作prototype

9.1 Always use class. Avoid manipulating prototype directly.

Why? class语法更简洁更易理解

// bad
function Queue(contents = []) {
  this.queue = [...contents];
}
Queue.prototype.pop = function () {
  const value = this.queue[0];
  this.queue.splice(0, 1);
  return value;
};
// good
class Queue {
  constructor(contents = []) {
    this.queue = [...contents];
  }
  pop() {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
  }
}

50. 用extends实现继承

9.2 Use extends for inheritance.

Why? 它是一种内置的方法来继承原型功能而不打破instanceof

// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
  Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function () {
  return this.queue[0];
}
// good
class PeekableQueue extends Queue {
  peek() {
    return this.queue[0];
  }
}

51. 可以返回this来实现方法链

9.3 Methods can return this to help with method chaining.

// 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);

52. 写一个定制的toString() 方法是可以的，只要保证它是可以正常工作且没有副作用的

9.4 It’s okay to write a custom toString() method, just make sure it works successfully and causes no side effects.

class Jedi {
  constructor(options = {}) {
    this.name = options.name || 'no name';
  }
  getName() {
    return this.name;
  }
  toString() {
    return `Jedi - ${this.getName()}`;
  }
}

53. 如果没有具体说明，类有默认的构造方法。一个空的构造函数或只是代表父类的构造函数是不需要写的

9.5 Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary.
eslint: no-useless-constructor

// bad
class Jedi {
  constructor() {}
  getName() {
    return this.name;
  }
}
// bad
class Rey extends Jedi {
  // 这种构造函数是不需要写的
  constructor(...args) {
    super(...args);
  }
}
// good
class Rey extends Jedi {
  constructor(...args) {
    super(...args);
    this.name = 'Rey';
  }
}

54. 避免重复类成员

9.6 Avoid duplicate class members.
eslint: no-dupe-class-members

Why? 重复类成员会默默的执行最后一个 —— 重复本身也是一个bug

// bad
class Foo {
  bar() { return 1; }
  bar() { return 2; }
}
// good
class Foo {
  bar() { return 1; }
}
// good
class Foo {
  bar() { return 2; }
}

55. 除非外部库或框架需要使用特定的非静态方法，否则类方法应该使用this或被做成静态方法。 作为一个实例方法应该表明它根据接收者的属性有不同的行为

9.7 Class methods should use this or be made into a static method unless an external library or framework requires to use specific non-static methods. Being an instance method should indicate that it behaves differently based on properties of the receiver.
eslint: class-methods-use-this

// bad
class Foo {
  bar() {
    console.log('bar');
  }
}
// good - this 被使用了
class Foo {
  bar() {
    console.log(this.bar);
  }
}
// good - constructor 不一定要使用this
class Foo {
  constructor() {
    // ...
  }
}
// good - 静态方法不需要使用 this
class Foo {
  static bar() {
    console.log('bar');
  }
}

Modules

56. 用(import/export) 模块而不是无标准的模块系统

10.1 Always use modules (import/export) over a non-standard module system. You can always transpile to your preferred module system.

Why? 模块化是未来，让我们现在就开启未来吧。

// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;
// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;
// best
import { es6 } from './AirbnbStyleGuide';
export default es6;

57. 不要用import通配符， 就是 * 这种方式

10.2 Do not use wildcard imports.

Why? 这确保你有单个默认的导出

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';
// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

58. 不要直接从import中直接export

10.3 And do not export directly from an import.

Why? 虽然一行是简洁的，有一个明确的方式进口和一个明确的出口方式来保证一致性。

// bad
// filename es6.js
export { es6 as default } from './AirbnbStyleGuide';
// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;

59. 一个路径只 import 一次

10.4 Only import from a path in one place.
eslint: no-duplicate-imports

Why? 从同一个路径下import多行会使代码难以维护

// bad
import foo from 'foo';
// … some other imports … //
import { named1, named2 } from 'foo';
// good
import foo, { named1, named2 } from 'foo';
// good
import foo, {
  named1,
  named2,
} from 'foo';

60. 不要导出可变的东西

10.5 Do not export mutable bindings.
eslint: import/no-mutable-exports

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

// bad
let foo = 3;
export { foo }
// good
const foo = 3;
export { foo }

61. 在一个单一导出模块里，用 export default 更好

10.6 In modules with a single export, prefer default export over named export.
eslint: import/prefer-default-export

Why? 鼓励使用更多文件，每个文件只做一件事情并导出，这样可读性和可维护性更好。

// bad
export function foo() {}
// good
export default function foo() {}

62. import 放在其他所有语句之前

10.7 Put all imports above non-import statements.
eslint: import/first

Why? 让import放在最前面防止意外行为。

// bad
import foo from 'foo';
foo.init();
import bar from 'bar';
// good
import foo from 'foo';
import bar from 'bar';
foo.init();

63. 多行import应该缩进，就像多行数组和对象字面量

10.8 Multiline imports should be indented just like multiline array and object literals.

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

// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';
// good
import {
  longNameA,
  longNameB,
  longNameC,
  longNameD,
  longNameE,
} from 'path';

64. 在import语句里不允许Webpack loader语法

10.9 Disallow Webpack loader syntax in module import statements.

eslint: import/no-webpack-loader-syntax

Why? 一旦用Webpack语法在import里会把代码耦合到模块绑定器。最好是在webpack.config.js里写webpack loader语法

// bad
import fooSass from 'css!sass!foo.scss';
import barCss from 'style!css!bar.css';
// good
import fooSass from 'foo.scss';
import barCss from 'bar.css';

65. 不要使用JavaScript文件扩展名

10.10 Do not include JavaScript filename extensions.
eslint: import/extensions

Why? 包括扩展会抑制重构，并且不适当地将要导入的模块的实现细节硬编码到每个使用者中。

// bad
import foo from './foo.js';
import bar from './bar.jsx';
import baz from './baz/index.jsx';
// good
import foo from './foo';
import bar from './bar';
import baz from './baz';

Iterators and Generators

66. 不要用遍历器。用JavaScript高级函数代替for-in、 for-of

11.1 Don’t use iterators. Prefer JavaScript’s higher-order functions instead of loops like for-in or for-of.
eslint: no-iterator no-restricted-syntax

Why? 这强调了我们不可变的规则。 处理返回值的纯函数比副作用更容易。 Why? 用数组的这些迭代方法： map() / every() / filter() / find() / findIndex() / reduce() / some() / … , 用对象的这些方法 Object.keys() / Object.values() / Object.entries() 去产生一个数组， 这样你就能去遍历对象了。

const numbers = [1, 2, 3, 4, 5];
// bad
let sum = 0;
for (let num of numbers) {
  sum += num;
}
sum === 15;
// good
let sum = 0;
numbers.forEach(num => sum += num);
sum === 15;
// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;
// bad
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
  increasedByOne.push(numbers[i] + 1);
}
// good
const increasedByOne = [];
numbers.forEach(num => increasedByOne.push(num + 1));
// best (keeping it functional)
const increasedByOne = numbers.map(num => num + 1);

67. 现在不要用generator

11.2 Don’t use generators for now.

Why? 它在es5上支持的不好

68. 如果一定要用generator，或者你忽略我们的建议，请确保它们的函数签名空格是得当的

11.3 If you must use generators, or if you disregard our advice, make sure their function signature is spaced properly.
eslint: generator-star-spacing

Why? function 和 * 是同一概念关键字 - *不是function的修饰符，function*是一个和function不一样的独特结构

// bad
function * foo() {
  // ...
}
// bad
const bar = function * () {
  // ...
}
// bad
const baz = function *() {
  // ...
}
// bad
const quux = function*() {
  // ...
}
// bad
function*foo() {
  // ...
}
// bad
function *foo() {
  // ...
}
// very bad
function
*
foo() {
  // ...
}
// very bad
const wat = function
*
() {
  // ...
}
// good
function* foo() {
  // ...
}
// good
const foo = function* () {
  // ...
}

Properties

69. 访问属性时使用点符号

12.1 Use dot notation when accessing properties.
eslint: dot-notation

const luke = {
  jedi: true,
  age: 28,
};
// bad
const isJedi = luke['jedi'];
// good
const isJedi = luke.jedi;

70. 当获取的属性是变量时用方括号[]取

12.2 Use bracket notation [] when accessing properties with a variable.

const luke = {
  jedi: true,
  age: 28,
};
function getProp(prop) {
  return luke[prop];
}
const isJedi = getProp('jedi');

71. 做幂运算时用幂操作符 **

12.3 Use exponentiation operator ** when calculating exponentiations.
eslint: no-restricted-properties

// bad
const binary = Math.pow(2, 10);
// good
const binary = 2 ** 10;

Variables

72. 用const或let声明变量

不这样做会导致全局变量。 我们要避免污染全局命名空间。
13.1 Always use const or let to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that.
eslint: no-undef prefer-const

// bad
superPower = new SuperPower();
// good
const superPower = new SuperPower();

73. 每个变量都用一个 const 或 let

13.2 Use one const or let declaration per variable or assignment.
eslint: one-var

Why? 这种方式很容易去声明新的变量，你不用去考虑把;调换成,，或者引入一个只有标点的不同的变化。这种做法也可以是你在调试的时候单步每个声明语句，而不是一下跳过所有声明。

// bad
const items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';
// bad
// (compare to above, and try to spot the mistake)
const items = getItems(),
    goSportsTeam = true;
    dragonball = 'z';
// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';

74 const放一起，let放一起

13.3 Group all your consts and then group all your lets.

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

// bad
let i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;
// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;
// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

75. 在你需要的地方声明变量，但是要放在合理的位置

13.4 Assign variables where you need them, but place them in a reasonable place.

Why? let 和 const 都是块级作用域而不是函数级作用域

// bad - unnecessary function call
function checkName(hasName) {
  const name = getName();
  if (hasName === 'test') {
    return false;
  }
  if (name === 'test') {
    this.setName('');
    return false;
  }
  return name;
}
// good
function checkName(hasName) {
  if (hasName === 'test') {
    return false;
  }
  // 在需要的时候分配
  const name = getName();
  if (name === 'test') {
    this.setName('');
    return false;
  }
  return name;
}