Airbnb JavaScript 风格指南() {

使用 JavaScript 最合理的方式。

注意: 这个指南假定你正在使用 Babel，并且需要你使用 babel-preset-airbnb 或与其等效的预设。同时假定你在你的应用里安装了 带有 airbnb-browser-shims 或与其等效的插件的 shims/polyfills。

这个指南支持的其他语言翻译版请看 Translation。

其他风格指南：

• ES5 (已废弃)
• React
• CSS-in-JavaScript
• CSS & Sass
• Ruby

目录

• Airbnb JavaScript 风格指南() {

  • 目录
  • 类型
  • 引用
  • 对象
  • 数组
  • 解构
  • 字符串
  • 函数
  • 箭头函数
  • 类与构造函数
  • 模块
  • 迭代器与生成器
  • 属性
  • 变量
  • 提升
  • 比较运算符与相等
  • 块
  • 控制语句
  • 注释
  • 空格
  • 逗号
  • 分号
  • 类型转换与强制转换
  • 命名规范
  • Get-Set 访问器
  • 事件
  • jQuery
  • ECMAScript 5 兼容性
  • ECMAScript 6+ (ES 2015+) 风格
  • 标准库
  • 测试
  • 性能
  • 资源
  • In the Wild
  • Translation
  • The JavaScript Style Guide Guide
  • Chat With Us About JavaScript
  • Contributors
  • License
  • Amendments

• };

类型

• 1.1 基本类型: 你可以直接获取到基本类型的值

  • string
  • number
  • boolean
  • null
  • undefined
  • symbol
  • bigint

  ​x
  const foo = 1;
  let bar = foo;
  ​
  bar = 9;
  ​
  console.log(foo, bar); // => 1, 9
  

  • 由于 Symbols 和 BigInts 不能被正确的 polyfill。所以不应在不能原生支持这些类型的环境或浏览器中使用他们。

• 1.2 复杂类型: 复杂类型赋值是获取到他的引用的值。

  • object
  • array
  • function

  xxxxxxxxxx
  const foo = [1, 2];
  const bar = foo;
  ​
  bar[0] = 9;
  ​
  console.log(foo[0], bar[0]); // => 9, 9
  

⬆ 回到顶部

引用

• 2.1 所有的赋值都用 const，避免使用 var。eslint: prefer-const, no-const-assign

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

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

• 2.2 如果你一定要对参数重新赋值，使用 let，而不是 var。eslint: no-var

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

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

• 2.3 注意：let 和 const 都是块级作用域， 而 var 是函数级作用域

  xxxxxxxxxx
  // const 和 let 都只存在于它被定义的那个块级作用域。
  {
    let a = 1;
    const b = 1;
    var c = 1;
  }
  console.log(a); // 引用错误
  console.log(b); // 引用错误
  console.log(c); // 打印 1
  

  上面的代码里，a 和 b 的定义会报引用错误，这是因为 a 和 b 是块级作用域， 而 c 的作用域是在函数里的。

⬆ 返回顶部

对象

• 3.1 使用字面值创建对象。eslint: no-new-object

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

• 3.2 使用计算属性名创建一个带有动态属性名的对象。

  为什么？因为这可以使你在同一个地方定义所有对象属性。

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

• 3.3 用对象方法简写。eslint: object-shorthand

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

• 3.4 用属性值缩写。eslint: object-shorthand

  为什么？这样写更简洁，且可读性更高。

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

• 3.5 将你的所有缩写放在对象声明的前面。

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

  xxxxxxxxxx
  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,
  };
  

• 3.6 只对那些无效的标示使用引号 ''。eslint: quote-props

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

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

• 3.7 不要直接调用 Object.prototype上的方法，如 hasOwnProperty、propertyIsEnumerable、isPrototypeOf。eslint: no-prototype-builtins

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

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

• 3.8 对象浅拷贝时，更推荐使用扩展运算符（即 ... 运算符），而不是 Object.assign。获取对象指定的几个属性时，用对象的 rest 解构运算符（即 ... 运算符）更好。eslint: prefer-object-spread

  • 这一段不太好翻译出来， 大家看下面的例子就懂了。^.^

xxxxxxxxxx
  // very bad
  const original = { a: 1, b: 2 };
  const copy = Object.assign(original, { c: 3 }); // 改了 `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 }

⬆ 返回顶部

数组

• 4.1 用字面量创建数组。eslint: no-array-constructor

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

• 4.2 用 Array#push 代替直接向数组中添加一个值。

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

• 4.3 用扩展运算符做数组浅拷贝，类似上面的对象浅拷贝。

  xxxxxxxxxx
  // 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.4 用 ... 运算符而不是 Array.from 来将一个可迭代的对象转换成数组。

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

• 4.5 用 Array.from 将一个类数组对象转成一个数组。

  xxxxxxxxxx
  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.6 用 Array.from 而不是 ... 运算符去做 map 遍历。 因为这样可以避免创建一个临时数组。

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

• 4.7 在数组方法的回调函数中使用 return 语句。如果函数体由一条返回一个表达式的语句组成，并且这个表达式没有副作用， 这个时候可以忽略 return，详见 8.2。eslint: array-callback-return

  xxxxxxxxxx
  // 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);
  });
  ​
  // good
  [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
    const flatten = acc.concat(item);
    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;
  });
  

• 4.8 如果一个数组有很多行，在数组的 [ 后和 ] 前断行。请看下面示例：

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

⬆ 返回顶部

解构

• 5.1 用对象的解构赋值来获取和使用对象某个或多个属性值。eslint: prefer-destructuring

  为什么？ 解构使您不必为这些属性创建临时引用，并且避免重复引用对象。重复引用对象将造成代码重复、增加阅读次数、提高犯错概率。在一个块级作用域里，解构对象可以在同一个地方给解构字段赋值，而不需要读整个的代码块看它到底用了哪些字段。

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

• 5.2 用数组解构。eslint: prefer-destructuring

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

• 5.3 多个返回值用对象的解构，而不是数组解构。

  为什么？你可以在后期添加新的属性或者变换变量的顺序而不会破坏原有的引用。

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

⬆ back to top

字符串

• 6.1 字符串应使用单引号 '' 。eslint: quotes

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

• 6.2 超过 100 个字符的字符串不应该用字符串连接成多行。

  为什么？字符串折行增加编写难度且不易被搜索。

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

• 6.3 当需要动态生成字符串时，使用模板字符串而不是字符串拼接。eslint: prefer-template template-curly-spacing

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

  xxxxxxxxxx
  // 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}?`;
  }
  

• 6.4 永远不要使用 eval()，该方法有太多漏洞。eslint: no-eval

• 6.5 不要使用不必要的转义字符。eslint: no-useless-escape

  为什么？反斜线可读性差，因此仅当必要时才使用它。

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

⬆ 返回顶部

函数

• 7.1 使用命名函数表达式而不是函数声明。eslint: func-style

  函数表达式： const func = function () {}

  函数声明： function func () {}

  为什么？函数声明会发生提升，这意味着在一个文件里函数很容易在其被定义之前就被引用了。这样伤害了代码可读性和可维护性。如果你发现一个函数又大又复杂，且这个函数妨碍了这个文件其他部分的理解性，你应当单独把这个函数提取成一个单独的模块。不管这个名字是不是由一个确定的变量推断出来的，别忘了给表达式清晰的命名（这在现代浏览器和类似 babel 编译器中很常见）。这消除了由匿名函数在错误调用栈产生的所有假设。 (讨论)

  译者注：这一段可能不是很好理解，简单来说就是使用函数声明会发生提升（即在函数被声明之前就可以使用），使用匿名函数会导致难以追踪错误。这一段英文原文在这。

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

• 7.2 把立即执行函数包裹在圆括号里。eslint: wrap-iife

  立即执行函数：Immediately Invoked Function expression = IIFE。 为什么？一个立即调用的函数表达式是一个单元 - 把它和它的调用者（圆括号）包裹起来，使代码读起来更清晰。 另外，在模块化世界里，你几乎用不着 IIFE。

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

• 7.3 不要在非函数块（if、while 等）内声明函数。把这个函数分配给一个变量。浏览器会允许你这样做，但不同浏览器的解析方式不同，这是一个坏消息。eslint: no-loop-func

• 7.4 注意：ECMA-262 中对块（block）的定义是： 一系列的语句。但是函数声明不是一个语句， 函数表达式是一个语句。

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

• 7.5 不要用 arguments 命名参数。他的优先级高于每个函数作用域自带的 arguments 对象，这会导致函数自带的 arguments 值被覆盖。

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

• 7.6 不要使用 arguments，用收集参数语法 ... 代替。eslint: prefer-rest-params

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

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

• 7.7 用默认参数语法而不是在函数里对参数重新赋值。

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

• 7.8 避免默认参数的副作用。

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

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

• 7.9 把默认参数赋值放在最后。eslint: default-param-last

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

• 7.10 不要用函数构造器创建函数。eslint: no-new-func

  为什么？以这种方式创建函数将类似于字符串 eval()，存在漏洞。

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

• 7.11 函数定义部分要有空格。eslint: space-before-function-paren space-before-blocks

  为什么？统一性好，而且在你添加/删除一个名字的时候不需要添加/删除空格。

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

• 7.12 不要修改参数. eslint: no-param-reassign

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

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

• 7.13 不要对参数重新赋值。eslint: no-param-reassign

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

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

• 7.14 使用拓展运算符调用多参数的函数。eslint: prefer-spread

  为什么？这样更清晰，你不必提供上下文（即指定 this 值），而且你不能轻易地用 apply 来组成 new。

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

• 7.15 调用或者编写一个包含多个参数的函数的缩进，应该像这个指南里的其他多行代码写法一样——即每行只包含一个参数，每行逗号结尾。

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

⬆ 返回顶部

箭头函数

• 8.1 当你一定要用函数表达式（在回调函数里）的时候，使用箭头函数。 eslint: prefer-arrow-callback, arrow-spacing

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

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

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

• 8.2 如果函数体由一个没有副作用的 表达式 语句组成，删除大括号和 return。否则，使用大括号和 return 语句。 eslint: arrow-parens, arrow-body-style

  为什么？语法糖，当多个函数链在一起的时候好读。

  xxxxxxxxxx
  // 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 + 1}.`);
  ​
  // 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) {
      // 当 callback 返回 true 时...
    }
  }
  ​
  let bool = false;
  ​
  // bad
  foo(() => bool = true);
  

xxxxxxxxxx
// good
foo(() => {
  bool = true;
});
```

• 8.3 如果表达式涉及多行，把他包裹在圆括号里以提高可读性。

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

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

• 8.4 在箭头函数参数两头，总是使用小括号包裹住参数，这样做使代码更清晰且一致. eslint: arrow-parens

  为什么？当你想要添加或删除参数时改动最小。

  xxxxxxxxxx
  // bad
  [1, 2, 3].map(x => x * x);
  ​
  // good
  [1, 2, 3].map((x) => x * x);
  ​
  // bad
  [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!`
  ));
  ​
  // 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!`
  ));
  

xxxxxxxxxx
// 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;
});
```

• 8.5 避免箭头函数（=>）和比较操作符（<=, >=）混淆. eslint: no-confusing-arrow

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

• 8.6 使箭头函数体有一个清晰的返回。 eslint: implicit-arrow-linebreak

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

⬆ 返回顶部

类与构造函数

• 9.1 使用 class 语法。避免直接操作 prototype。

  为什么？class 语法更简洁更易理解。

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

• 9.2 用 extends 实现继承。

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

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

• 9.3 方法可以返回 this 来实现链式调用。

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

• 9.4 自己写 toString() 方法是可以的，但需要保证它可以正常工作且没有副作用。

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

• 9.5 如果没有特别定义，类有默认的构造方法。一个空的构造函数或只是代表父类的构造函数是不需要写的。 eslint: no-useless-constructor

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

• 9.6 避免重复定义类成员。eslint: no-dupe-class-members

  为什么？重复定义类成员只会使用最后一个被定义的 —— 重复本身也是一个 bug.

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

• 9.7 除非外部库或框架需要使用特定的非静态方法，否则类方法应该使用 this 或被写成静态方法。 作为一个实例方法表明它应该根据实例的属性有不同的行为。eslint: class-methods-use-this

  xxxxxxxxxx
  // 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');
    }
  }
  

⬆ 返回顶部

模块

• 10.1 使用（import/export）模块而不是非标准的模块系统。你可以随时转到你喜欢的模块系统。

  为什么？模块化是未来，让我们现在就开启未来吧。

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

• 10.2 不要用 import 通配符， 即 * 这种方式。

  为什么？这确保你有单个默认的导出。

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

• 10.3 不要直接从 import 中直接 export。

  为什么？虽然只写一行很简洁，但是使用明确 import 和明确的 export 来保证一致性。

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

• 10.4 一个路径只 import 一次。eslint: no-duplicate-imports

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

  xxxxxxxxxx
  // bad
  import foo from 'foo';
  // … 其他导入 … //
  import { named1, named2 } from 'foo';
  ​
  // good
  import foo, { named1, named2 } from 'foo';
  ​
  // good
  import foo, {
    named1,
    named2,
  } from 'foo';
  

• 10.5 不要导出可变的东西。eslint: import/no-mutable-exports

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

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

• 10.6 在一个单一导出模块里，用 export default 更好。eslint: import/prefer-default-export

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

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

• 10.7 把 import 放在其他所有语句之前。eslint: import/first

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

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

• 10.8 多行 import 应该缩进，就像多行数组和对象字面量一样。eslint: object-curly-newline

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

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

• 10.9 在 import 语句里不允许 Webpack loader 语法。eslint: import/no-webpack-loader-syntax

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

  xxxxxxxxxx
  // 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';
  

• 10.10 import JavaScript文件不用包含扩展名 eslint: import/extensions

  为什么? 使用扩展名重构不友好，而且让模块使用者去了解模块的实现细节是不合适的。

  xxxxxxxxxx
  // 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';
  

⬆ 返回顶部

迭代器与生成器

• 11.1 不要用迭代器。使用 JavaScript 高级函数代替 for-in、 for-of。eslint: no-iterator no-restricted-syntax

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

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

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

• 11.2 现在暂时不要使用生成器。

  为什么？生成器目前不能很好地转换为 ES5 语法。

• 11.3 如果你一定要用生成器，或者你忽略 我们的建议，请确保它们的函数标志空格是得当的。eslint: generator-star-spacing

  为什么？function 和 * 是同一概念关键字 - *不是function的修饰符，function* 是一个和function 不一样的独特结构。

  xxxxxxxxxx
  // 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* () {
    // ...
  }
  

⬆ 返回顶部

属性

• 12.1 访问属性时使用点符号。eslint: dot-notation

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

• 12.2 当使用变量获取属性时用方括号 []。

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

• 12.3 做幂运算时用幂操作符 ** 。eslint: no-restricted-properties.

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

⬆ 返回顶部

变量

• 13.1 使用 const 或 let 声明变量。不这样做会导致全局变量。我们想要避免污染全局命名空间。地球超人也这样警告我们（译者注：可能是一个冷笑话）。 eslint: no-undef prefer-const

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

• 13.2 为每个变量声明都用一个 const 或 let。eslint: one-var

  为什么？这种方式很容易去声明新的变量，你不用去考虑把 ; 调换成 ,，或者引入一个只有标点的不同的变化（译者注：这里说的应该是在 Git 提交代码时显示的变化）。这种做法也可以是你在调试的时候单步每个声明语句，而不是一下跳过所有声明。

  xxxxxxxxxx
  // bad
  const items = getItems(),
      goSportsTeam = true,
      dragonball = 'z';
  ​
  // bad
  // （与前面的比较，找一找错误）
  const items = getItems(),
      goSportsTeam = true;
      dragonball = 'z';
  ​
  // good
  const items = getItems();
  const goSportsTeam = true;
  const dragonball = 'z';
  

• 13.3 把const 和 let 分别放一起。

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

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

• 13.4 在你需要的地方声明变量，但是要放在合理的位置。

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

  xxxxxxxxxx
  // bad - 不必要的函数调用。
  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;
  }
  

• 13.5 不要使用链式声明变量。 eslint: no-multi-assign

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

  xxxxxxxxxx
  // bad
  (function example() {
    // JavaScript 将这一段解释为
    // let a = ( b = ( c = 1 ) );
    // let 只对变量 a 起作用; 变量 b 和 c 都变成了全局变量
    let a = b = c = 1;
  }());
  ​
  console.log(a); // undefined
  console.log(b); // 1
  console.log(c); // 1
  ​
  // good
  (function example() {
    let a = 1;
    let b = a;
    let c = a;
  }());
  ​
  console.log(a); // undefined
  console.log(b); // undefined
  console.log(c); // undefined
  ​
  // `const` 也是如此
  

• 13.6 不要使用一元自增自减运算符（++， --）. eslint no-plusplus

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

  xxxxxxxxxx
    // bad
  ​
    const array = [1, 2, 3];
    let num = 1;
    num++;
    --num;
  ​
    let sum = 0;
    let truthyCount = 0;
    for (let i = 0; i < array.length; i++) {
      let value = array[i];
      sum += value;
      if (value) {
        truthyCount++;
      }
    }
  ​
    // good
  ​
    const array = [1, 2, 3];
    let num = 1;
    num += 1;
    num -= 1;
  ​
    const sum = array.reduce((a, b) => a + b, 0);
    const truthyCount = array.filter(Boolean).length;