Airbnb JavaScript 编码规范(涵盖 ECMAScript 6+)

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

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

• Symbols 不能被完全 polyfill, 所以不应该在目标浏览器/环境不支持它们的情况下使用它们。

• object
• array
• function

 
JavaScript  代码:
1.  const foo =  [1,  2];
2.  const bar = foo;
3.   
4.  bar[0]  =  9;
5.   
6.  console.log(foo[0], bar[0]);  // => 9, 9

返回目录

为什么？ 这可以确保你无法对引用重新分配，重新分配可能会导致 bug 和难以理解的代码。

 
JavaScript  代码:
1.  // bad
2.  var a =  1;
3.  var b =  2;
4.   
5.  // good
6.  const a =  1;
7.  const b =  2;

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

 
JavaScript  代码:
1.  // bad
2.  var count =  1;
3.  if  (true)  {
4.  count +=  1;
5.  }
6.   
7.  // good, 使用 let.
8.  let count =  1;
9.  if  (true)  {
10.  count +=  1;
11.  }

 
JavaScript  代码:
1.  // const 和 let 只存在于定义它们的代码块内。
2.  {
3.   let a =  1;
4.   const b =  1;
5.  }
6.  console.log(a);  // ReferenceError，引用错误
7.  console.log(b);  // ReferenceError，引用错误

返回目录

 
JavaScript  代码:
1.  // bad
2.  const item =  new  Object();
3.   
4.  // good
5.  const item =  {};

为什么? 它们允许你在一个地方定义一个对象的所有属性。

 
JavaScript  代码:
1.  function getKey(k)  {
2.   return  `a key named ${k}`;
3.  }
4.   
5.  // bad
6.  const obj =  {
7.  id:  5,
8.  name:  'San Francisco',
9.  };
10.  obj[getKey('enabled')]  =  true;
11.   
12.  // good
13.  const obj =  {
14.  id:  5,
15.  name:  'San Francisco',
16.   [getKey('enabled')]:  true,
17.  };

 
JavaScript  代码:
1.  // bad
2.  const atom =  {
3.   value:  1,
4.   
5.  addValue:  function  (value)  {
6.   return atom.value  +  value;
7.   },
8.  };
9.   
10.  // good
11.  const atom =  {
12.   value:  1,
13.   
14.  addValue(value)  {
15.   return atom.value  +  value;
16.   },
17.  };

为什么？编写代码和描述更加简短。

 
JavaScript  代码:
1.  const lukeSkywalker =  'Luke Skywalker';
2.   
3.  // bad
4.  const obj =  {
5.  lukeSkywalker: lukeSkywalker,
6.  };
7.   
8.  // good
9.  const obj =  {
10.  lukeSkywalker,
11.  };

为什么?更容易看出哪些属性在使用速记语法。

 
JavaScript  代码:
1.  const anakinSkywalker =  'Anakin Skywalker';
2.  const lukeSkywalker =  'Luke Skywalker';
3.   
4.  // bad
5.  const obj =  {
6.  episodeOne:  1,
7.  twoJediWalkIntoACantina:  2,
8.  lukeSkywalker,
9.  episodeThree:  3,
10.  mayTheFourth:  4,
11.  anakinSkywalker,
12.  };
13.   
14.  // good
15.  const obj =  {
16.  lukeSkywalker,
17.  anakinSkywalker,
18.  episodeOne:  1,
19.  twoJediWalkIntoACantina:  2,
20.  episodeThree:  3,
21.  mayTheFourth:  4,
22.  };

为什么?一般来说，我们认为比较容易阅读。它改进了语法高亮显示，并且更容易被许多JS引擎优化。

 
JavaScript  代码:
1.  // bad
2.  const bad =  {
3.   'foo':  3,
4.   'bar':  4,
5.   'data-blah':  5,
6.  };
7.   
8.  // good
9.  const good =  {
10.  foo:  3,
11.  bar:  4,
12.   'data-blah':  5,
13.  };

为什么？这些方法可能会被对象的属性所覆盖 – 比如 { hasOwnProperty: false } – 或者，对象可能是空( null )对象(Object.create(null))。

 
JavaScript  代码:
1.  // bad
2.  console.log(object.hasOwnProperty(key));
3.   
4.  // good
5.  console.log(Object.prototype.hasOwnProperty.call(object, key));
6.   
7.  // best
8.  const has =  Object.prototype.hasOwnProperty;  // 在模块作用域内，缓存查找一次。
9.  /* or */
10.  import has from  'has';
11.  // ...
12.  console.log(has.call(object, key));

 
JavaScript  代码:
1.  // very bad
2.  const original =  { a:  1, b:  2  };
3.  const copy =  Object.assign(original,  { c:  3  });  //  `original` 是可变的 ಠ_ಠ
4.  delete copy.a;  // so does this
5.   
6.  // bad
7.  const original =  { a:  1, b:  2  };
8.  const copy =  Object.assign({}, original,  { c:  3  });  // copy => { a: 1, b: 2, c: 3 }
9.   
10.  // good
11.  const original =  { a:  1, b:  2  };
12.  const copy =  {  ...original, c:  3  };  // copy => { a: 1, b: 2, c: 3 }
13.   
14.  const  { a,  ...noA }  = copy;  // noA => { b: 2, c: 3 }

返回目录

 
JavaScript  代码:
1.  // bad
2.  const items =  new  Array();
3.   
4.  // good
5.  const items =  [];

 
JavaScript  代码:
1.  const someStack =  [];
2.   
3.  // bad
4.  someStack[someStack.length]  =  'abracadabra';
5.   
6.  // good
7.  someStack.push('abracadabra');

 
JavaScript  代码:
1.  // bad
2.  const len = items.length;
3.  const itemsCopy =  [];
4.  let i;
5.   
6.  for  (i =  0; i 

解构 Destructuring

为什么?解构可以在你建这些属性的临时引用时，为你节省时间。

 
JavaScript  代码:
1.  // bad
2.  function getFullName(user)  {
3.   const firstName = user.firstName;
4.   const lastName = user.lastName;
5.   
6.   return  `${firstName} ${lastName}`;
7.  }
8.   
9.  // good
10.  function getFullName(user)  {
11.   const  { firstName, lastName }  = user;
12.   return  `${firstName} ${lastName}`;
13.  }
14.   
15.  // best
16.  function getFullName({ firstName, lastName })  {
17.   return  `${firstName} ${lastName}`;
18.  }

 
JavaScript  代码:
1.  const arr =  [1,  2,  3,  4];
2.   
3.  // bad
4.  const first = arr[0];
5.  const second = arr[1];
6.   
7.  // good
8.  const  [first, second]  = arr;

为什么？ 您可以随着时间的推移添加新的属性或更改排序，而不会改变调用时的位置。

 
JavaScript  代码:
1.  // bad
2.  function processInput(input)  {
3.   // 那么奇迹发生了
4.   return  [left, right, top, bottom];
5.  }
6.   
7.  // 调用者需要考虑返回数据的顺序
8.  const  [left, __, top]  = processInput(input);
9.   
10.  // good
11.  function processInput(input)  {
12.   // 那么奇迹发生了
13.   return  { left, right, top, bottom };
14.  }
15.   
16.  // 调用者只选择他们需要的数据
17.  const  { left, top }  = processInput(input);

返回目录

 
JavaScript  代码:
1.  // bad
2.  const name =  "Capt. Janeway";
3.   
4.  // bad - 模板字面量应该包含插值或换行符
5.  const name =  `Capt. Janeway`;
6.   
7.  // good
8.  const name =  'Capt. Janeway';

为什么？ 连接字符串是痛苦的工作，而且使代码不易于搜索。

 
JavaScript  代码:
1.  // bad
2.  const errorMessage =  'This is a super long error that was thrown because \
3.  of Batman. When you stop to think about how Batman had anything to do \
4.  with this, you would get nowhere \
5.  fast.';
6.   
7.  // bad
8.  const errorMessage =  'This is a super long error that was thrown because '  +
9.   'of Batman. When you stop to think about how Batman had anything to do '  +
10.   'with this, you would get nowhere fast.';
11.   
12.  // good
13.  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.';

为什么？ 模板字符串为你提供了更好的可读性，简洁的语法，正确的换行符和字符串插值功能。

 
JavaScript  代码:
1.  // bad
2.  function sayHi(name)  {
3.   return  'How are you, '  + name +  '?';
4.  }
5.   
6.  // bad
7.  function sayHi(name)  {
8.   return  ['How are you, ', name,  '?'].join();
9.  }
10.   
11.  // bad
12.  function sayHi(name)  {
13.   return  `How are you, ${ name }?`;
14.  }
15.   
16.  // good
17.  function sayHi(name)  {
18.   return  `How are you, ${name}?`;
19.  }

为什么?反斜杠会破坏可读性，因此只有在必要时才转义。

 
JavaScript  代码:
1.  // bad
2.  const foo =  '\'this\' \i\s \"quoted\"';
3.   
4.  // good
5.  const foo =  '\'this\' is "quoted"';
6.  const foo =  `my name is '${name}'`;

返回目录

为什么？ 函数声明很容易被提升（Hoisting），你可以在函数被定义之前引用该函数。这对可读性和可维护性来说都是不利的。如果你发现一个函数的定义很大或很复杂，以至于妨碍了解文件的其他部分，那么也许是时候把它提取到自己的模块中去！不要忘记显式地命名表达式，不管该名称是否从包含变量中推断出来的（在现代浏览器中，或在使用编译器如Babel 时经常出现这种情况）。这消除了关于Error的调用堆栈的任何假设。（讨论）

 
JavaScript  代码:
1.  // bad
2.  function foo()  {
3.   // ...
4.  }
5.   
6.  // bad
7.  const foo =  function  ()  {
8.   // ...
9.  };
10.   
11.  // good 
12.  // 用明显区别于变量引用调用的词汇命名
13.  const  short  =  function longUniqueMoreDescriptiveLexicalFoo()  {
14.   // ...
15.  };

为什么？一个立即调用函数表达式是一个单独的单元 – 将函数表达式包裹在括号中，后面再跟一个调用括号，这看上去很赶紧。请注意，在模块的世界中，你几乎不需要 IIFE。

 
JavaScript  代码:
1.  // 立即调用函数表达式 (IIFE)
2.  (function  ()  {
3.  console.log('Welcome to the Internet. Please follow me.');
4.  }());

 
JavaScript  代码:
1.  // bad
2.  if  (currentUser)  {
3.   function test()  {
4.  console.log('Nope.');
5.   }
6.  }
7.   
8.  // good
9.  let test;
10.  if  (currentUser)  {
11.  test =  ()  =>  {
12.  console.log('Yup.');
13.   };
14.  }

 
JavaScript  代码:
1.  // bad
2.  function foo(name, options, arguments)  {
3.   // ...
4.  }
5.   
6.  // good
7.  function foo(name, options, args)  {
8.   // ...
9.  }

为什么？使用 ... 能明确你要传入的参数。另外 rest（剩余）参数是一个真正的数组，而 arguments 是一个类数组（Array-like）。

 
JavaScript  代码:
1.  // bad
2.  function concatenateAll()  {
3.   const args =  Array.prototype.slice.call(arguments);
4.   return args.join('');
5.  }
6.   
7.  // good
8.  function concatenateAll(...args)  {
9.   return args.join('');
10.  }

 
JavaScript  代码:
1.  // really bad
2.  function handleThings(opts)  {
3.   // 不！我们不应该改变函数参数。
4.   // 更加糟糕: 如果参数 opts 是 falsy(假值) 的话，它将被设置为一个对象，
5.   // 这可能是你想要的，但它可以引起一些小的错误。
6.  opts = opts ||  {};
7.   // ...
8.  }
9.   
10.  // still bad
11.  function handleThings(opts)  {
12.   if  (opts ===  void  0)  {
13.  opts =  {};
14.   }
15.   // ...
16.  }
17.   
18.  // good
19.  function handleThings(opts =  {})  {
20.   // ...
21.  }

为什么？因为这样写会让人感到很困惑。

 
JavaScript  代码:
1.  var b =  1;
2.  // bad
3.  function count(a = b++)  {
4.  console.log(a);
5.  }
6.  count();  // 1
7.  count();  // 2
8.  count(3);  // 3
9.  count();  // 3

 
JavaScript  代码:
1.  // bad
2.  function handleThings(opts =  {}, name)  {
3.   // ...
4.  }
5.   
6.  // good
7.  function handleThings(name, opts =  {})  {
8.   // ...
9.  }

为什么？ 以这种方式创建一个函数，与 eval() 类似，会对字符串求值，这会打开漏洞。

 
JavaScript  代码:
1.  // bad
2.  var  add  =  new  Function('a',  'b',  'return a + b');
3.   
4.  // still bad
5.  var subtract =  Function('a',  'b',  'return a - b');

为什么？这样做有益代码的一致性，添加或删除函数名时不需要添加或删除空格。

 
JavaScript  代码:
1.  // bad
2.  const f =  function(){};
3.  const g =  function  (){};
4.  const h =  function()  {};
5.   
6.  // good
7.  const x =  function  ()  {};
8.  const y =  function a()  {};

为什么？操作作为参数传入的对象，可能会在调用原始对象时造成不必要的变量副作用。（愚人码头注：对象是引用类型）

 
JavaScript  代码:
1.  // bad
2.  function f1(obj)  {
3.  obj.key =  1;
4.  }
5.   
6.  // good
7.  function f2(obj)  {
8.   const key =  Object.prototype.hasOwnProperty.call(obj,  'key')  ? obj.key :  1;
9.  }

为什么？ 重新分配参数可能会导致意外的行为，特别是在访问 arguments 对象时。它也可能导性能化问题，特别是在V8中。

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

为什么？ 它更清洁，你不需要提供一个上下文，而且你不能轻易地实用 apply 和 new。

 
JavaScript  代码:
1.  // bad
2.  const x =  [1,  2,  3,  4,  5];
3.  console.log.apply(console, x);
4.   
5.  // good
6.  const x =  [1,  2,  3,  4,  5];
7.  console.log(...x);
8.   
9.  // bad
10.  new  (Function.prototype.bind.apply(Date,  [null,  2016,  8,  5]));
11.   
12.  // good
13.  new  Date(...[2016,  8,  5]);

 
JavaScript  代码:
1.  // bad
2.  function foo(bar,
3.  baz,
4.  quux)  {
5.   // ...
6.  }
7.   
8.  // good
9.  function foo(
10.  bar,
11.  baz,
12.  quux,
13.  )  {
14.   // ...
15.  }
16.   
17.  // bad
18.  console.log(foo,
19.  bar,
20.  baz);
21.   
22.  // good
23.  console.log(
24.  foo,
25.  bar,
26.  baz,
27.  );

返回目录

为什么？ 它创建了一个在 this 上下文中执行的函数的版本，这通常是你想要的，而且这样的写法更为简洁。（愚人码头注：参考 Arrow functions – JavaScript | MDN 和 ES6 arrow functions, syntax and lexical scoping）

为什么不？ 如果你有一个相当复杂的函数，你或许可以把逻辑部分转移到一个声明函数上。

 
JavaScript  代码:
1.  // bad
2.  [1,  2,  3].map(function  (x)  {
3.   const y = x +  1;
4.   return x * y;
5.  });
6.   
7.  // good
8.  [1,  2,  3].map((x)  =>  {
9.   const y = x +  1;
10.   return x * y;
11.  });

愚人码头注，什么是副作用(side effect)？一段代码，即在不需要的情况下，创建一个变量并在整个作用域内可用。

为什么？ 语法糖。 当多个函数链式调用时，可读性更高。

 
JavaScript  代码:
1.  // bad
2.  [1,  2,  3].map(number =>  {
3.   const nextNumber = number +  1;
4.   `A string containing the ${nextNumber}.`;
5.  });
6.   
7.  // good
8.  [1,  2,  3].map(number =>  `A string containing the ${number}.`);
9.   
10.  // good
11.  [1,  2,  3].map((number)  =>  {
12.   const nextNumber = number +  1;
13.   return  `A string containing the ${nextNumber}.`;
14.  });
15.   
16.  // good
17.  [1,  2,  3].map((number, index)  =>  ({
18.   [index]: number,
19.  }));
20.   
21.  // No implicit return with side effects
22.  function foo(callback)  {
23.   const val = callback();
24.   if  (val ===  true)  {
25.   // Do something if callback returns true
26.   }
27.  }
28.   
29.  let  bool  =  false;
30.   
31.  // bad
32.  foo(()  =>  bool  =  true);
33.   
34.  // good
35.  foo(()  =>  {
36.   bool  =  true;
37.  });

为什么？ 它清楚地显示了函数开始和结束的位置。

 
JavaScript  代码:
1.  // bad
2.  ['get',  'post',  'put'].map(httpMethod =>  Object.prototype.hasOwnProperty.call(
3.  httpMagicObjectWithAVeryLongName,
4.  httpMethod,
5.   )
6.  );
7.   
8.  // good
9.  ['get',  'post',  'put'].map(httpMethod =>  (
10.   Object.prototype.hasOwnProperty.call(
11.  httpMagicObjectWithAVeryLongName,
12.  httpMethod,
13.   )
14.  ));

为什么？ 不造成视觉上的混乱。

 
JavaScript  代码:
1.  // bad
2.  [1,  2,  3].map((x)  => x * x);
3.   
4.  // good
5.  [1,  2,  3].map(x => x * x);
6.   
7.  // good
8.  [1,  2,  3].map(number =>  (
9.   `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
10.  ));
11.   
12.  // bad
13.  [1,  2,  3].map(x =>  {
14.   const y = x +  1;
15.   return x * y;
16.  });
17.   
18.  // good
19.  [1,  2,  3].map((x)  =>  {
20.   const y = x +  1;
21.   return x * y;
22.  });

 
JavaScript  代码:
1.  // bad
2.  const itemHeight = item => item.height >  256  ? item.largeSize : item.smallSize;
3.   
4.  // bad
5.  const itemHeight =  (item)  => item.height >  256  ? item.largeSize : item.smallSize;
6.   
7.  // good
8.  const itemHeight = item =>  (item.height >  256  ? item.largeSize : item.smallSize);
9.   
10.  // good
11.  const itemHeight =  (item)  =>  {
12.   const  { height, largeSize, smallSize }  = item;
13.   return height >  256  ? largeSize : smallSize;
14.  };

返回目录

为什么? 因为 class 语法更为简洁更易读。

 
JavaScript  代码:
1.  // bad
2.  function  Queue(contents =  [])  {
3.   this.queue =  [...contents];
4.  }
5.  Queue.prototype.pop =  function  ()  {
6.   const  value  =  this.queue[0];
7.   this.queue.splice(0,  1);
8.   return  value;
9.  };
10.   
11.  // good
12.  class  Queue  {
13.   constructor(contents =  [])  {
14.   this.queue =  [...contents];
15.   }
16.  pop()  {
17.   const  value  =  this.queue[0];
18.   this.queue.splice(0,  1);
19.   return  value;
20.   }
21.  }

为什么？因为 extends 是一个内置的原型继承方法并且不会破坏 instanceof。

 
JavaScript  代码:
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.  };
10.   
11.  // good
12.  class  PeekableQueue  extends  Queue  {
13.  peek()  {
14.   return  this.queue[0];
15.   }
16.  }

 
JavaScript  代码:
1.  // bad
2.  Jedi.prototype.jump =  function  ()  {
3.   this.jumping =  true;
4.   return  true;
5.  };
6.   
7.  Jedi.prototype.setHeight =  function  (height)  {
8.   this.height = height;
9.  };
10.   
11.  const luke =  new  Jedi();
12.  luke.jump();  // => true
13.  luke.setHeight(20);  // => undefined
14.   
15.  // good
16.  class  Jedi  {
17.  jump()  {
18.   this.jumping =  true;
19.   return  this;
20.   }
21.   
22.  setHeight(height)  {
23.   this.height = height;
24.   return  this;
25.   }
26.  }
27.   
28.  const luke =  new  Jedi();
29.   
30.  luke.jump()
31.   .setHeight(20);

 
JavaScript  代码:
1.  class  Jedi  {
2.   constructor(options =  {})  {
3.   this.name = options.name ||  'no name';
4.   }
5.   
6.  getName()  {
7.   return  this.name;
8.   }
9.   
10.  toString()  {
11.   return  `Jedi - ${this.getName()}`;
12.   }
13.  }

 
JavaScript  代码:
1.  // bad
2.  class  Jedi  {
3.   constructor()  {}
4.   
5.  getName()  {
6.   return  this.name;
7.   }
8.  }
9.   
10.  // bad
11.  class  Rey  extends  Jedi  {
12.   constructor(...args)  {
13.   super(...args);
14.   }
15.  }
16.   
17.  // good
18.  class  Rey  extends  Jedi  {
19.   constructor(...args)  {
20.   super(...args);
21.   this.name =  'Rey';
22.   }
23.  }

为什么？ 重复类成员声明将默认使用最后一个 – 重复类成员几乎肯定是一个错误。

 
JavaScript  代码:
1.  // bad
2.  class  Foo  {
3.  bar()  {  return  1;  }
4.  bar()  {  return  2;  }
5.  }
6.   
7.  // good
8.  class  Foo  {
9.  bar()  {  return  1;  }
10.  }
11.   
12.  // good
13.  class  Foo  {
14.  bar()  {  return  2;  }
15.  }

返回目录

为什么？模块就是未来，让我们开始迈向未来吧。

 
JavaScript  代码:
1.  // bad
2.  const  AirbnbStyleGuide  =  require('./AirbnbStyleGuide');
3.  module.exports =  AirbnbStyleGuide.es6;
4.   
5.  // ok
6.  import  AirbnbStyleGuide  from  './AirbnbStyleGuide';
7.  export  default  AirbnbStyleGuide.es6;
8.   
9.  // best
10.  import  { es6 }  from  './AirbnbStyleGuide';
11.  export  default es6;

为什么？这样能确保你只有一个默认 export(导出)。

 
JavaScript  代码:
1.  // bad
2.  import  *  as  AirbnbStyleGuide  from  './AirbnbStyleGuide';
3.   
4.  // good
5.  import  AirbnbStyleGuide  from  './AirbnbStyleGuide';

为什么？虽然一行代码简洁明了，但有一个明确的 import(导入) 方法和一个明确的 export(导出) 方法，使事情能保持一致。

 
JavaScript  代码:
1.  // bad
2.  // filename es6.js
3.  export  { es6 as  default  }  from  './AirbnbStyleGuide';
4.   
5.  // good
6.  // filename es6.js
7.  import  { es6 }  from  './AirbnbStyleGuide';
8.  export  default es6;

为什么？ 从同一路径 import(导入) 多个模块分散在多行代码中，可能会使代码难以维护。

 
JavaScript  代码:
1.  // bad
2.  import foo from  'foo';
3.  // … 其他一些 imports … //
4.  import  { named1, named2 }  from  'foo';
5.   
6.  // good
7.  import foo,  { named1, named2 }  from  'foo';
8.   
9.  // good
10.  import foo,  {
11.  named1,
12.  named2,
13.  }  from  'foo';

为什么？ 一般应该避免可变性，特别是在导出可变绑定时。虽然一些特殊情况下，可能需要这种技术，但是一般而言，只应该导出常量引用。

 
JavaScript  代码:
1.  // bad
2.  let foo =  3;
3.  export  { foo };
4.   
5.  // good
6.  const foo =  3;
7.  export  { foo };

为什么？为了鼓励更多的文件只有一个 export(导出)，这有利于模块的可读性和可维护性。

 
JavaScript  代码:
1.  // bad
2.  export  function foo()  {}
3.   
4.  // good
5.  export  default  function foo()  {}

由于 import 被提升，保持他们在顶部，防止意外的行为。

 
JavaScript  代码:
1.  // bad
2.  import foo from  'foo';
3.  foo.init();
4.   
5.  import bar from  'bar';
6.   
7.  // good
8.  import foo from  'foo';
9.  import bar from  'bar';
10.   
11.  foo.init();

为什么？ 花括号应遵循与编码风格指南中的每个其他花括号相同的缩进规则，末尾的逗号也一样。

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

为什么？由于在 import(导入) 中使用 Webpack 语法会将代码耦合到模块打包器。 首选在 webpack.config.js 中使用加载器语法。

 
JavaScript  代码:
1.  // bad
2.  import fooSass from  'css!sass!foo.scss';
3.  import barCss from  'style!css!bar.css';
4.   
5.  // good
6.  import fooSass from  'foo.scss';
7.  import barCss from  'bar.css';

返回目录

为什么？ 这是强制执行我们不变性的规则。 处理返回值的纯函数比 Side Effects(副作用) 更容易推理。

使用 map() / every() / filter() / find() / findIndex() / reduce() / some() / … 来迭代数组, 使用 Object.keys() / Object.values() / Object.entries() 来生成数组，以便可以迭代对象。

 
JavaScript  代码:
1.  const numbers =  [1,  2,  3,  4,  5];
2.   
3.  // bad
4.  let sum =  0;
5.  for  (let num of numbers)  {
6.  sum += num;
7.  }
8.  sum ===  15;
9.   
10.  // good
11.  let sum =  0;
12.  numbers.forEach((num)  =>  {
13.  sum += num;
14.  });
15.  sum ===  15;
16.   
17.  // best (use the functional force)
18.  const sum = numbers.reduce((total, num)  => total + num,  0);
19.  sum ===  15;
20.   
21.  // bad
22.  const increasedByOne =  [];
23.  for  (let i =  0; i 

属性 Properties

 
JavaScript  代码:
1.  const luke =  {
2.  jedi:  true,
3.  age:  28,
4.  };
5.   
6.  // bad
7.  const isJedi = luke['jedi'];
8.   
9.  // good
10.  const isJedi = luke.jedi;

 
JavaScript  代码:
1.  const luke =  {
2.  jedi:  true,
3.  age:  28,
4.  };
5.   
6.  function getProp(prop)  {
7.   return luke[prop];
8.  }
9.   
10.  const isJedi = getProp('jedi');

 
JavaScript  代码:
1.  // bad
2.  const binary =  Math.pow(2,  10);
3.   
4.  // good
5.  const binary =  2  **  10;

返回目录

 
JavaScript  代码:
1.  // bad
2.  superPower =  new  SuperPower();
3.   
4.  // good
5.  const superPower =  new  SuperPower();

为什么？ 以这种方式添加新的变量声明更容易，你永远不必担心是否需要将 , 换成 ;，或引入标点符号差异。您也可以在调试器中遍历每个声明，而不是一次跳过所有的变量。

 
JavaScript  代码:
1.  // bad
2.  const items = getItems(),
3.  goSportsTeam =  true,
4.  dragonball =  'z';
5.   
6.  // bad
7.  // (与上面的比较，并尝试找出错误)
8.  const items = getItems(),
9.  goSportsTeam =  true;
10.  dragonball =  'z';
11.   
12.  // good
13.  const items = getItems();
14.  const goSportsTeam =  true;
15.  const dragonball =  'z';

为什么？当你需要把已分配的变量分配给一个变量时非常有用。

 
JavaScript  代码:
1.  // bad
2.  let i, len, dragonball,
3.  items = getItems(),
4.  goSportsTeam =  true;
5.   
6.  // bad
7.  let i;
8.  const items = getItems();
9.  let dragonball;
10.  const goSportsTeam =  true;
11.  let len;
12.   
13.  // good
14.  const goSportsTeam =  true;
15.  const items = getItems();
16.  let dragonball;
17.  let i;
18.  let length;

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

 
JavaScript  代码:
1.  // bad - 不必要的函数调用
2.  function checkName(hasName)  {
3.   const name = getName();
4.   
5.   if  (hasName ===  'test')  {
6.   return  false;
7.   }
8.   
9.   if  (name ===  'test')  {
10.   this.setName('');
11.   return  false;
12.   }
13.   
14.   return name;
15.  }
16.   
17.  // good
18.  function checkName(hasName)  {
19.   if  (hasName ===  'test')  {
20.   return  false;
21.   }
22.   
23.   const name = getName();
24.   
25.   if  (name ===  'test')  {
26.   this.setName('');
27.   return  false;
28.   }
29.   
30.   return name;
31.  }

为什么？ 链接变量赋值会创建隐式全局变量。

 
JavaScript  代码:
1.  // bad
2.  (function example()  {
3.   // JavaScript 将其解析为
4.   // let a = ( b = ( c = 1 ) );
5.   // let关键字只适用于变量a;
6.   // 变量b和c变成了全局变量。
7.   let a = b = c =  1;
8.  }());
9.   
10.  console.log(a);  // 抛出 ReferenceError（引用错误）
11.  console.log(b);  // 1
12.  console.log(c);  // 1
13.   
14.  // good
15.  (function example()  {
16.   let a =  1;
17.   let b = a;
18.   let c = a;
19.  }());
20.   
21.  console.log(a);  // 抛出 ReferenceError（引用错误）
22.  console.log(b);  // 抛出 ReferenceError（引用错误）
23.  console.log(c);  // 抛出 ReferenceError（引用错误）
24.   
25.  // 同样适用于 `const`

为什么？ 根据 eslint 文档，一元递增和递减语句会受到自动插入分号的影响，并可能导致应用程序中的值递增或递减，从而导致无提示错误。使用像 num += 1 而不是 num++ 或 num ++ 这样的语句来改变你的值也更具有表现力。不允许一元递增和递减语句也会阻止您无意中预先递增/递减值，这也会导致程序中的意外行为。

 
JavaScript  代码:
1.  // bad
2.   
3.  const array =  [1,  2,  3];
4.  let num =  1;
5.  num++;
6.  --num;
7.   
8.  let sum =  0;
9.  let truthyCount =  0;
10.  for  (let i =  0; i 

Hoisting

 
JavaScript  代码:
1.  // 我们知道这样运行不了
2.  // （假设没有 notDefined 全局变量）
3.  function example()  {
4.  console.log(notDefined);  // => 抛出一个 ReferenceError（引用错误）
5.  }
6.   
7.  // 在引用变量后创建变量声明
8.  // 将因变量提升而起作用。
9.  // 注意：赋值的 `true`没有被提升。
10.  function example()  {
11.  console.log(declaredButNotAssigned);  // => undefined
12.   var declaredButNotAssigned =  true;
13.  }
14.   
15.  // 解析器将变量声明提升到作用域的顶部，
16.      // 这意味着我们的例子可以被重写为：
17.  function example()  {
18.   let declaredButNotAssigned;
19.  console.log(declaredButNotAssigned);  // => undefined
20.  declaredButNotAssigned =  true;
21.  }
22.   
23.  // 使用 const 和 let
24.  function example()  {
25.  console.log(declaredButNotAssigned);  // => 抛出一个 ReferenceError（引用错误）
26.  console.log(typeof declaredButNotAssigned);  // => 抛出一个 ReferenceError（引用错误）
27.   const declaredButNotAssigned =  true;
28.  }

 
JavaScript  代码:
1.  function example()  {
2.  console.log(anonymous);  // => undefined
3.   
4.  anonymous();  // => TypeError anonymous is not a function 输入错误，anonymous 不是一个函数
5.   
6.   var anonymous =  function  ()  {
7.  console.log('anonymous function expression');
8.   };
9.  }

 
JavaScript  代码:
1.  function example()  {
2.  console.log(named);  // => undefined
3.   
4.  named();  // => TypeError named is not a function，输入错误，named 不是一个函数
5.   
6.  superPower();  // => ReferenceError superPower is not defined， ReferenceError（引用错误）superPower 未定义
7.   
8.   var named =  function superPower()  {
9.  console.log('Flying');
10.   };
11.  }
12.   
13.  // 当函数名称与变量名称相同时
14.  // 也是如此。
15.  function example()  {
16.  console.log(named);  // => undefined
17.   
18.  named();  // => TypeError named is not a function，输入错误，named 不是一个函数
19.   
20.   var named =  function named()  {
21.  console.log('named');
22.   };
23.  }

 
JavaScript  代码:
1.  function example()  {
2.  superPower();  // => Flying
3.   
4.   function superPower()  {
5.  console.log('Flying');
6.   }
7.  }

• 想了解更多信息，参考 Ben Cherry 的 JavaScript Scoping & Hoisting 。

返回目录

• Objects 求值为 true
• Undefined 求值为 false
• Null 求值为 false
• Booleans 求值为 布尔值
• Numbers 如果是 +0、-0、或 NaN 求值为 false ， 否则为 true
• Strings 如果是空字符串 '' 求值为 false ， 否则为 true

 
JavaScript  代码:
1.  if  ([0]  &&  [])  {
2.   // true
3.   // 一个数组 (即使是一个空数组) 是一个 object, objects 被求值为 true
4.  }

 
JavaScript  代码:
1.  // bad
2.  if  (isValid ===  true)  {
3.   // ...
4.  }
5.   
6.  // good
7.  if  (isValid)  {
8.   // ...
9.  }
10.   
11.  // bad
12.  if  (name)  {
13.   // ...
14.  }
15.   
16.  // good
17.  if  (name !==  '')  {
18.   // ...
19.  }
20.   
21.  // bad
22.  if  (collection.length)  {
23.   // ...
24.  }
25.   
26.  // good
27.  if  (collection.length >  0)  {
28.   // ...
29.  }

为什么？ 词法声明在整个 switch 语句块中都是可见的，但是只有在分配时才被初始化，这只有当它到达 case 时才会发生。这在多个 case 子句试图定义相同的变量时会导致问题。

 
JavaScript  代码:
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.  }
17.   
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.  }

 
JavaScript  代码:
1.  // bad
2.  const foo = maybe1 > maybe2
3.   ?  "bar"
4.   : value1 > value2 ?  "baz"  :  null;
5.   
6.  // 拆分成2个分离的三元表达式
7.  const maybeNull = value1 > value2 ?  'baz'  :  null;
8.   
9.  // better
10.  const foo = maybe1 > maybe2
11.   ?  'bar'
12.   : maybeNull;
13.   
14.  // best
15.  const foo = maybe1 > maybe2 ?  'bar'  : maybeNull;

 
JavaScript  代码:
1.  // bad
2.  const foo = a ? a : b;
3.  const bar = c ?  true  :  false;
4.  const baz = c ?  false  :  true;
5.   
6.  // good
7.  const foo = a || b;
8.  const bar =  !!c;
9.  const baz =  !c;

为什么？ 这可以提高可读性，并清晰展现开发者的意图。

 
JavaScript  代码:
1.  // bad
2.  const foo = a && b 

代码块 Blocks

 
JavaScript  代码:
1.  // bad
2.  if  (test)
3.   return  false;
4.   
5.  // good
6.  if  (test)  return  false;
7.   
8.  // good
9.  if  (test)  {
10.   return  false;
11.  }
12.   
13.  // bad
14.  function foo()  {  return  false;  }
15.   
16.  // good
17.  function bar()  {
18.   return  false;
19.  }

 
JavaScript  代码:
1.  // bad
2.  if  (test)  {
3.  thing1();
4.  thing2();
5.  }
6.  else  {
7.  thing3();
8.  }
9.   
10.  // good
11.  if  (test)  {
12.  thing1();
13.  thing2();
14.  }  else  {
15.  thing3();
16.  }

 
JavaScript  代码:
1.  // bad
2.  function foo()  {
3.   if  (x)  {
4.   return x;
5.   }  else  {
6.   return y;
7.   }
8.  }
9.   
10.  // bad
11.  function cats()  {
12.   if  (x)  {
13.   return x;
14.   }  else  if  (y)  {
15.   return y;
16.   }
17.  }
18.   
19.  // bad
20.  function dogs()  {
21.   if  (x)  {
22.   return x;
23.   }  else  {
24.   if  (y)  {
25.   return y;
26.   }
27.   }
28.  }
29.   
30.  // good
31.  function foo()  {
32.   if  (x)  {
33.   return x;
34.   }
35.   
36.   return y;
37.  }
38.   
39.  // good
40.  function cats()  {
41.   if  (x)  {
42.   return x;
43.   }
44.   
45.   if  (y)  {
46.   return y;
47.   }
48.  }
49.   
50.  //good
51.  function dogs(x)  {
52.   if  (x)  {
53.   if  (z)  {
54.   return y;
55.   }
56.   }  else  {
57.   return z;
58.   }
59.  }

返回目录

 
JavaScript  代码:
1.  // bad
2.  // make() returns a new element
3.  // based on the passed in tag name
4.  //
5.  // @param {String} tag
6.  // @return {Element} element
7.  function make(tag)  {
8.   
9.   // ...
10.   
11.   return element;
12.  }
13.   
14.  // good
15.  /**
16.  * make() returns a new element
17.  * based on the passed-in tag name
18.  */
19.  function make(tag)  {
20.   
21.   // ...
22.   
23.   return element;
24.  }

 
JavaScript  代码:
1.  // bad
2.  const active =  true;  // is current tab
3.   
4.  // good
5.  // is current tab
6.  const active =  true;
7.   
8.  // bad
9.  function getType()  {
10.  console.log('fetching type...');
11.   // set the default type to 'no type'
12.   const type =  this.type ||  'no type';
13.   
14.   return type;
15.  }
16.   
17.  // good
18.  function getType()  {
19.  console.log('fetching type...');
20.   
21.   // set the default type to 'no type'
22.   const type =  this.type ||  'no type';
23.   
24.   return type;
25.  }
26.   
27.  // also good
28.  function getType()  {
29.   // set the default type to 'no type'
30.   const type =  this.type ||  'no type';
31.   
32.   return type;
33.  }

 
JavaScript  代码:
1.  // bad
2.  //is current tab
3.  const active =  true;
4.   
5.  // good
6.  // is current tab
7.  const active =  true;
8.   
9.  // bad
10.  /**
11.  *make() returns a new element
12.  *based on the passed-in tag name
13.  */
14.  function make(tag)  {
15.   
16.   // ...
17.   
18.   return element;
19.  }
20.   
21.  // good
22.  /**
23.  * make() returns a new element
24.  * based on the passed-in tag name
25.  */
26.  function make(tag)  {
27.   
28.   // ...
29.   
30.   return element;
31.  }

 
JavaScript  代码:
1.  class  Calculator  extends  Abacus  {
2.   constructor()  {
3.   super();
4.   
5.   // FIXME: shouldn’t use a global here
6.  total =  0;
7.   }
8.  }

 
JavaScript  代码:
1.  class  Calculator  extends  Abacus  {
2.   constructor()  {
3.   super();
4.   
5.   // TODO: total should be configurable by an options param
6.   this.total =  0;
7.   }
8.  }

愚人码头注：还有 // XXX: 注释，如果代码中有该标识，说明标识处代码虽然实现了功能，但是实现的方法有待商榷，希望将来能改进，要改进的地方会在说明中简略说明。部分 IDE 有这些注释的收集视图，例如任务（task）视图，TODO视图等，在项目发布前，检查一下任务视图是一个很好的习惯。

返回目录

 
JavaScript  代码:
1.  // bad
2.  function foo()  {
3.  ∙∙∙∙let name;
4.  }
5.   
6.  // bad
7.  function bar()  {
8.  ∙let name;
9.  }
10.   
11.  // good
12.  function baz()  {
13.  ∙∙let name;
14.  }

 
JavaScript  代码:
1.  // bad
2.  function test(){
3.  console.log('test');
4.  }
5.   
6.  // good
7.  function test()  {
8.  console.log('test');
9.  }
10.   
11.  // bad
12.  dog.set('attr',{
13.  age:  '1 year',
14.  breed:  'Bernese Mountain Dog',
15.  });
16.   
17.  // good
18.  dog.set('attr',  {
19.  age:  '1 year',
20.  breed:  'Bernese Mountain Dog',
21.  });

 
JavaScript  代码:
1.  // bad
2.  if(isJedi)  {
3.  fight ();
4.  }
5.   
6.  // good
7.  if  (isJedi)  {
8.  fight();
9.  }
10.   
11.  // bad
12.  function fight ()  {
13.  console.log ('Swooosh!');
14.  }
15.   
16.  // good
17.  function fight()  {
18.  console.log('Swooosh!');
19.  }

 
JavaScript  代码:
1.  // bad
2.  const x=y+5;
3.   
4.  // good
5.  const x = y +  5;

 
JavaScript  代码:
1.  // bad
2.  import  { es6 }  from  './AirbnbStyleGuide';
3.   // ...
4.  export  default es6;

 
JavaScript  代码:
1.  // bad
2.  import  { es6 }  from  './AirbnbStyleGuide';
3.   // ...
4.  export  default es6;↵
5.  ↵

 
JavaScript  代码:
1.  // good
2.  import  { es6 }  from  './AirbnbStyleGuide';
3.   // ...
4.  export  default es6;↵

 
JavaScript  代码:
1.  // bad
2.  $('#items').find('.selected').highlight().end().find('.open').updateCount();
3.   
4.  // bad
5.  $('#items').
6.  find('.selected').
7.  highlight().
8.   end().
9.  find('.open').
10.  updateCount();
11.   
12.  // good
13.  $('#items')
14.   .find('.selected')
15.   .highlight()
16.   .end()
17.   .find('.open')
18.   .updateCount();
19.   
20.  // bad
21.  const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led',  true)
22.   .attr('width',  (radius + margin)  *  2).append('svg:g')
23.   .attr('transform',  `translate(${radius + margin},${radius + margin})`)
24.   .call(tron.led);
25.   
26.  // good
27.  const leds = stage.selectAll('.led')
28.   .data(data)
29.   .enter().append('svg:svg')
30.   .classed('led',  true)
31.   .attr('width',  (radius + margin)  *  2)
32.   .append('svg:g')
33.   .attr('transform',  `translate(${radius + margin},${radius + margin})`)
34.   .call(tron.led);
35.   
36.  // good
37.  const leds = stage.selectAll('.led').data(data);

 
JavaScript  代码:
1.  // bad
2.  if  (foo)  {
3.   return bar;
4.  }
5.  return baz;
6.   
7.  // good
8.  if  (foo)  {
9.   return bar;
10.  }
11.   
12.  return baz;
13.   
14.  // bad
15.  const obj =  {
16.  foo()  {
17.   },
18.  bar()  {
19.   },
20.  };
21.  return obj;
22.   
23.  // good
24.  const obj =  {
25.  foo()  {
26.   },
27.   
28.  bar()  {
29.   },
30.  };
31.   
32.  return obj;
33.   
34.  // bad
35.  const arr =  [
36.   function foo()  {
37.   },
38.   function bar()  {
39.   },
40.  ];
41.  return arr;
42.   
43.  // good
44.  const arr =  [
45.   function foo()  {
46.   },
47.   
48.   function bar()  {
49.   },
50.  ];
51.   
52.  return arr;

 
JavaScript  代码:
1.  // bad
2.  function bar()  {
3.   
4.  console.log(foo);
5.   
6.  }
7.   
8.  // bad
9.  if  (baz)  {
10.   
11.  console.log(qux);
12.  }  else  {
13.  console.log(foo);
14.   
15.  }
16.   
17.  // bad
18.  class  Foo  {
19.   
20.   constructor(bar)  {
21.   this.bar = bar;
22.   }
23.  }
24.   
25.  // good
26.  function bar()  {
27.  console.log(foo);
28.  }
29.   
30.  // good
31.  if  (baz)  {
32.  console.log(qux);
33.  }  else  {
34.  console.log(foo);
35.  }

 
JavaScript  代码:
1.  // bad
2.  function bar( foo )  {
3.   return foo;
4.  }
5.   
6.  // good
7.  function bar(foo)  {
8.   return foo;
9.  }
10.   
11.  // bad
12.  if  ( foo )  {
13.  console.log(foo);
14.  }
15.   
16.  // good
17.  if  (foo)  {
18.  console.log(foo);
19.  }

 
JavaScript  代码:
1.  // bad
2.  const foo =  [  1,  2,  3  ];
3.  console.log(foo[  0  ]);
4.   
5.  // good
6.  const foo =  [1,  2,  3];
7.  console.log(foo[0]);

 
JavaScript  代码:
1.  // bad
2.  const foo =  {clark:  'kent'};
3.   
4.  // good
5.  const foo =  { clark:  'kent'  };

为什么？ 这可以确保可读性和可维护性。

 
JavaScript  代码:
1.  // bad
2.  const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;
3.   
4.  // bad
5.  $.ajax({ method:  'POST', url:  'https://airbnb.com/', data:  { name:  'John'  }  }).done(()  => console.log('Congratulations!')).fail(()  => console.log('You have failed this city.'));
6.   
7.  // good
8.  const foo = jsonData
9.   && jsonData.foo
10.   && jsonData.foo.bar
11.   && jsonData.foo.bar.baz
12.   && jsonData.foo.bar.baz.quux
13.   && jsonData.foo.bar.baz.quux.xyzzy;
14.   
15.  // good
16.  $.ajax({
17.  method:  'POST',
18.  url:  'https://airbnb.com/',
19.  data:  { name:  'John'  },
20.  })
21.   .done(()  => console.log('Congratulations!'))
22.   .fail(()  => console.log('You have failed this city.'));

返回目录

 
JavaScript  代码:
1.  // bad
2.  const story =  [
3.  once
4.   , upon
5.   , aTime
6.  ];
7.   
8.  // good
9.  const story =  [
10.  once,
11.  upon,
12.  aTime,
13.  ];
14.   
15.  // bad
16.  const hero =  {
17.  firstName:  'Ada'
18.   , lastName:  'Lovelace'
19.   , birthYear:  1815
20.   , superPower:  'computers'
21.  };
22.   
23.  // good
24.  const hero =  {
25.  firstName:  'Ada',
26.  lastName:  'Lovelace',
27.  birthYear:  1815,
28.  superPower:  'computers',
29.  };

为什么？这会让 git diff(差异比较) 更干净。另外，像Babel这样的转译器会删除转译后代码中的结尾逗号，这意味着您不必担心传统浏览器中的结尾逗号问题。

 
JavaScript  代码:
1.  // bad - 没有结尾逗号的 git diff 差异比较
2.  const hero =  {
3.  firstName:  'Florence',
4.  - lastName:  'Nightingale'
5.  + lastName:  'Nightingale',
6.  + inventorOf:  ['coxcomb chart',  'modern nursing']
7.  };
8.   
9.  // good - 有结尾逗号的 git diff 差异比较
10.  const hero =  {
11.  firstName:  'Florence',
12.  lastName:  'Nightingale',
13.  + inventorOf:  ['coxcomb chart',  'modern nursing'],
14.  };

 
JavaScript  代码:
1.  // bad
2.  const hero =  {
3.  firstName:  'Dana',
4.  lastName:  'Scully'
5.  };
6.   
7.  const heroes =  [
8.   'Batman',
9.   'Superman'
10.  ];
11.   
12.  // good
13.  const hero =  {
14.  firstName:  'Dana',
15.  lastName:  'Scully',
16.  };
17.   
18.  const heroes =  [
19.   'Batman',
20.   'Superman',
21.  ];
22.   
23.  // bad
24.  function createHero(
25.  firstName,
26.  lastName,
27.  inventorOf
28.  )  {
29.   // does nothing
30.  }
31.   
32.  // good
33.  function createHero(
34.  firstName,
35.  lastName,
36.  inventorOf,
37.  )  {
38.   // does nothing
39.  }
40.   
41.  // good (请注意，逗号不能出现在 “rest” 元素的后面)
42.  function createHero(
43.  firstName,
44.  lastName,
45.  inventorOf,
46.   ...heroArgs
47.  )  {
48.   // does nothing
49.  }
50.   
51.  // bad
52.  createHero(
53.  firstName,
54.  lastName,
55.  inventorOf
56.  );
57.   
58.  // good
59.  createHero(
60.  firstName,
61.  lastName,
62.  inventorOf,
63.  );
64.   
65.  // good (请注意，逗号不能出现在 “rest” 元素的后面)
66.  createHero(
67.  firstName,
68.  lastName,
69.  inventorOf,
70.   ...heroArgs
71.  );