范例

基础范例

你能够直接猎取到基础范例的值

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

const foo = 1;
let bar = foo;

bar = 9;

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

注重：
Symbols 不能被完整的
polyfill，所以，在不支撑 Symbols 的环境下中，不该当运用
symbol 范例。

庞杂范例

庞杂范例赋值就是猎取到他的援用的值，相当于援用通报

• object
• array
• function

const foo = [1, 2];
const bar = foo;

bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9

参考

永久都运用 const

为了确保你不会转变你的初始值，反复援用会致使一些不可预感的 bug，还会让代码难以邃晓，一切的赋值都应当运用 const，防备运用 var。

eslint

• prefer-const
• no-const-assign

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

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

能够运用 let

假如你肯定要对参数从新赋值，那就运用 let，而不是 var， let 是块级作用域，而 ver 是函数级作用域。

eslint

• no-var

// bad
var count = 1;
if (true) {
  count += 1;
}

// good
let count = 1;
if (true) {
  count += 1;
}

注重 const 与 let 的块级作用域

const 与 let 声明的常量与变量都只存在于定义它们的谁人块级作用域中。

{
  let a = 1;
  const b = 1;
}

console.log(a); // ReferenceError
console.log(b); // ReferenceError

对象

永久运用字面量建立对象

eslint

• no-new-object

// bad
const obj = new Object();

// good
const obj = {};

运用盘算属性名

当你须要建立一个带有 动态属性名 的对象时，请将一切的属性定义放在一同，能够运用 盘算属性名。

function getKey(key) {
  return `a key named ${key}`;
}

// bad
const obj = {
  id: 1,
  name: 'Parc MG',
};
obj[getKey('enabled')] = true;

// good
const obj = {
  id: 1,
  name: 'Parc MG',
  [getKey('enabled')]: true
};

对象要领简写

eslint

• object-shorthand

// bad
const atom = {
  value: 1,
  add: function (value) {
    return atom.value + value;
  }
};

// good
const atom = {
  value: 1,
  add(value) {
    return atom.value + value;
  }
};

属性值缩写

eslint

• object-shorthand

const name = 'Parc MG';

// bad
const org = {
  name: name,
};

// good
const org = {
  name,
};

将一切属性值缩写放在对象声明的最前面

const name = 'Parc MG';
const url = 'https://parcmg.com';

// bad
const org = {
  email: 'contact@parcmg.com',
  name,
  created: new Date(),
  url,
};

// good
const org = {
  name,
  url,
  email: 'contact@parcmg.com',
  created: new Date(),
};

若非必要，属性名不运用 '' 号

eslint

• quote-props

// bad
const bad = {
  'foo': 1,
  'bar': 2,
  'foo-bar': 3,
};

// good
const good = {
  foo: 1,
  bar: 2,
  'foo-bar': 3,
};

不直接挪用对象原型上的要领

不直接挪用一个对象的 hasOwnProperty、propertyIsEnumerable、isPrototypeOf 等这些原型的要领，在某些状况下，这些要领能够会被屏蔽掉，比方 { hasOwnProperty: false } 或许是一个空对象 Object.create(null)。

// bad
obj.hasOwnProperty(key);

// good
Object.prototype.hasOwnProperty.call(obj, key);

// best
const has = Object.prototype.hasOwnProperty;

has.call(obj, key);

主动运用扩大及解构运算 ...

• 在对象的 浅拷贝 时，更引荐运用扩大运算 { ...obj }，而不是 Object.assign。
• 在猎取对象指定的几个属性时，运用解构运算 { foo, bar, ...rest } = obj

eslint

• prefer-destructuring

// very bad
const original = { a: 1, b: 2 };
const copied = Object.assign(original, { c: 3 }); // 这将致使 original 也被修正

delete copied.a; // 如许操纵今后会致使 original 也被修正
console.log(original); // => {b: 2, c: 3}

// bad
const original = { a: 1, b: 2 };
const copied = Object.assign({}, original, { c: 3}};

// good
const original = { a: 1, b: 2 };
const copied = { ...original, c: 3 };

// 解构运算与 `rest` 赋值运算
const obj = { a: 1, b: 2, c: 3 };
const { a, b } = obj; // 从对象 obj 中解构出 a, b 两个属性的值，并赋值给名为 a,b 的常量
const { a, ...rest } = obj; // 从对象 obj 中解构出 a 的值，并赋值给名为 a 的常量，同时，建立一个由一切别的属性构成的名为 `rest` 的新对象
console.log(rest); // => { b: 2, c: 3 }

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

// the most best
const getFullName = ({ firstName, lastName }) => `${firstName} ${lastName}`;

返回多值时，运用对象解构，而非数组组织

由于 JavaScript 不支撑多值返回，当一个函数或许要领有多个值须要建立时，请为每一个值定名，并以一切值构成的对象为单一值返回，而不是以数组的情势返回。

// bad
function processInput(input) {
  return [left, right, top, bottom];
}

const [left, _, top] = processInput(input); // 挪用者须要在挪用时，邃晓的晓得每一个索引上的值是什么 ，且没法跳越前面的值取背面的值

// good
function processInput(input) {
  return { left, right, top, bottom };
}

const { left, top } = processInput(input); // 挪用者能够邃晓的指定须要哪一个值，而且不须要建立过剩的变量

数组

运用字面量赋值

eslint

• no-array-constructor

// bad
const items = new Array();

// good
const items = [];

运用 .push 要领替代直接索引赋值

const items = [];

// bad
items[items.length] = 'new item';

// good
items.push('new item');

运用扩大运算符举行浅拷贝

const items = [1, 2, 3, 4, 5];

// bad
const length = items.length;
const copied = [];
let index;

for (index = 0; index < length; index += 1) {
  copied[index] = items[index];
}

// good
const copied = [ ...items ];

运用 ... 运算符替代 Array.from

当须要将一个可迭代的对象转换成数组时，引荐运用 ... 操纵符。

const elements = document.querySelectorAll('.foobar');

// not bad
const nodes = Array.from(elements);

// good
const nodes = [ ...elements ];

运用 ... 解构数组

const array = [1, 2, 3, 4, 5];

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

// good
const [first, second, ...rest] = array;
console.log(rest); // => [3, 4, 5]

运用 Array.from 将类数组对象转成数组

参考：
Typed Arrays

const arrayLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 }

// bad
const array = Array.prototype.slice.call(arrayLike);

// good
const array = Array.from(arrayLike);

运用 Array.from 对类数组对象举行遍历

Array.from(arrayLike[, mapFn[, thisArg]]) 要领，参考
Array.from

const arrayLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 }

// bad
const array = [...arrayLike].map(mapFn);

// good
const array = Array.from(arrayLike, mapFn);

在数组要领的回调函数中，永久返回准确的值

// 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
messages.filter(msg => {
  const { subject, author } = msg;
  if (subject === 'ParcMG') {
    return author === 'MG';
  } else {
    return false;
  }
});

// good
messages.filter(msg => {
  const { subject, author } = msg;
  if (subject === 'ParcMG') {
    return author === 'MG';
  }
  return false;
});

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

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

一个数组有多行时，在 [ 与 ] 处断行

// bad
const array = [
  [0, 1], [2, 3], [4, 5], [6, 7]
];

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

const numberArray = [
  1, 2,
];

// good
const array = [[0, 1], [2, 3], [4, 5], [6, 7]];

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

const numberArray = [1, 2];

const numberArray = [
  1,
  2,
];

字符串

对 string 永久运用单引号 ''：

eslint

• quotes

// bad
const name = "Parc M.G";

const name = `Parc M.G`;

// good
const name = 'Parc M.G';

超长的字符串，不该当运用多行串连

// bad
const content = '《学而》是《论语》第一篇的篇名。《论语》中各篇平常都是以第\
一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容触及诸多方面。个中重\
点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、\
信等品德领域。';

const content = '《学而》是《论语》第一篇的篇名。《论语》中各篇平常都是以第' +
'一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容触及诸多方面。个中重' +
'点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、' +
'信等品德领域。';

// good
const content = '《学而》是《论语》第一篇的篇名。《论语》中各篇平常都是以第\一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容触及诸多方面。个中重点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等品德领域。';

运用模板而非拼接来组织可编程字符串

eslint

• prefer-template
• template-curly-spacing

// bad
function hello(name) {
  return '你好，' + name + '！';
}

function hello(name) {
  return ['你好，', name, '！'].join('');
}

function hello(name) {
  return `你好，${ name }！`;
}

// good
function hello(name) {
  return `你好，${name}！`;
}

永久不运用 eval()

eslint

• no-eval

若非必要，不运用转义字符

eslint

• no-useless-escape

// bad
const foo = '\'this\' \i\s \"quoted\"';

// good
const foo = '\this\' is "quoted"';

// best
const foo = `'this' is "quoted"`;

函数

运用定名函数表达式，而不是函数声明

eslint

• func-styl

运用函数声明，它的作用域会被提早，这意味着很轻易在一个文件内里援用一个还未被定义的函数，如许大大伤害了代码的可读性和可保护性，若一个函数很大很庞杂，那末应当斟酌将该函数零丁提取到一个文件中，抽离成一个模块，同时不要遗忘给表达式显现的定名，这消除了由匿名函数在毛病挪用栈中发生的一切假定。

// bad
function foo() {
  // ...
}

// bad
const foo = function () {
  // ...
}

// good
const foo = function foo() {
  // ...
}

// best
const foo = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
}

把马上实行函数包裹在圆括号里

eslint

• wrap-iife

(function () {
  console.log('Welcome to the ParcMG world.');
}());

不要在非函数块内声明函数

虽然运转环境许可你如许做，然则差别环境的剖析体式格局不一样。

eslint

• no-loop-func

//bad 
for (var i=10; i; i--) {
    (function() { return i; })();
}

while(i) {
    var a = function() { return i; };
    a();
}

do {
    function a() { return i; };
    a();
} while (i);

let foo = 0;
for (let i = 0; i < 10; ++i) {
    // Bad, `foo` is not in the loop-block's scope and `foo` is modified in/after the loop
    setTimeout(() => console.log(foo));
    foo += 1;
}

for (let i = 0; i < 10; ++i) {
    // Bad, `foo` is not in the loop-block's scope and `foo` is modified in/after the loop
    setTimeout(() => console.log(foo));
}
foo = 100;

// good
var a = function() {};

for (var i=10; i; i--) {
    a();
}

for (var i=10; i; i--) {
    var a = function() {}; // OK, no references to variables in the outer scopes.
    a();
}

for (let i=10; i; i--) {
    var a = function() { return i; }; // OK, all references are referring to block scoped variables in the loop.
    a();
}

var foo = 100;
for (let i=10; i; i--) {
    var a = function() { return foo; }; // OK, all references are referring to never modified variables.
    a();
}

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

// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

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

不许可运用 arguments 定名参数

arguments 的优先级高于高于每一个函数作用域自带的 arguments 对象，这会致使函数自带的 arguments 值被掩盖。

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

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

不要在函数体内运用 arguments，运用 ...rest 替代

eslint

• prefer-rest-params

... 邃晓出你想用谁人参数，同时，
rest 是一个真数组，而不是一个类数组的
arguments

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

// good
function concatenateAll(...args) {
  return args.join('');
}

运用默许参数，而不是在函数体内对参数从新赋值

// really bad
function handleThings(options) {
  options = options || {};
}

// still bad
function handleTings(options) {
  if (options === void 0) {
    options = {};
  }
}

// good
function handleThings(options = {}) {
}

默许参数要防备副作用

// bad
let v = 1;
const count = function count(a = v++) {
  console.log(a);
}

count();   // => 1
count();   // => 2
count(3);  // => 3
count();   // => 3

// maybe
const v = 1;
const count = function count(a = v) {
  console.log(a);
}

把默许参数放在末了

// bad
function handleTings(options = {}, name) {
  // ...
}

// good
function handleTings(name, options = {}) {
  // ...
}

不要运用函数组织器组织函数

eslint

• no-new-func

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

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

// good
const subtract = (a, b) => a + b;

函数署名部份要有空格

eslint

• space-before-function-paren
• space-before-blocks

// bad
const f = function(){};
const g = function (){};
const h = function() {};

// good
const f = function a() {};

不修正参数

eslint

• no-param-reassign

函数署名时定义的参数，在函数体内不许可被从新赋值（包括参数自身，若参数为对象，还包括该对象一切属性的值），

一个函数应当是没有任何副作用的。

// bad
function f1 (obj) {
  obj.key = 1;
};

function f2 (a) {
  a = 1;
  // ...
}

function f3 (a) {
  if (!a) { a = 1; }
  // ...
}

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

function f5(a) {
  const b = a || 1;
  // ...
}

function f6(a = 1) {
  // ...
}

运用 spread 操纵符 ... 挪用多变参数函数

eslint

• prefer-spread

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

若函数署名包括多个参数须要运用多行，那就每行有且唯一一个参数

// bad
function foo(bar,
             baz,
             quux) {
  // ...
}

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

// bad
console.log(foo,
  bar,
  baz);

// good
console.log(
  foo,
  bar,
  baz,
);

箭头函数

当你肯定要用函数表达式的时刻，就运用箭头函数

eslint

• prefer-array-callback
• arrow-spacing

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

假如函数体有且唯一一个没有副作用的表达式，那末删除大括号和 return

eslint

• arrow-parens
• arrow-body-style

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

若表达式包括多行，用圆括号包裹起来

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

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

若函数只需一个参数，且没有大括号，那就删除圆括号，不然，参数老是放在圆括号里。

eslint

• arrow-parens

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

防备箭头函数(=>)和比较操纵符（<=, >=）殽杂.

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

在隐式return中强迫束缚函数体的位置， 就写在箭头背面

eslint

• implicit-arrow-linebreak

// bad
(foo) =>
  bar;

(foo) =>
  (bar);

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

类与组织器

运用组织器，而不是 prototype

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

运用 extends 完成继续

它是一种内置的要领来继续原型功用而不突破 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];
  }
}

要领能够返回 this 完成要领链

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

只需保证能够一般事变且没有副作用，能够自已定制 toString 要领

class Jedi {
  constructor(options = {}) {
    this.name = options.name || 'no name';
  }

  getName() {
    return this.name;
  }

  toString() {
    return `Jedi - ${this.getName()}`;
  }
}

不要写无用的组织函数

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

防备反复类成员

eslint

• no-dupe-class-members

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

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

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

模块

运用 import / export

// bad
const Button = require('./Button');
module.exports = Button.es6;

// ok
import Button from './Button';
export default Button.es6;

// best
import { es6 } from './Button';
export default es6;

不要 import 通配符

// bad
import * as Component from './Component';

// good
import Component from './Component';

不要直接从 import 中 export

虽然一行是简约的，有一个邃晓的体式格局入口和一个邃晓的出口体式格局来保证一致性。

// bad
export { es6 as default } from './Component';

// good
import { es6 } from './Component';
export default es6;

一个途径只 import 一次

eslint

• no-duplicate-imports

从统一个途径下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';

若非必要，不要 export 可变量

eslint

• import/no-mutable-exports

变化一般都是须要防备，特别是当你要输出可变的绑定。虽然在某些场景下能够须要这类手艺，但总的来说应当导出常量。

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

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

在一个单一导出模块里，运用 export default

eslint

• import/prefer-default-export

勉励运用更多文件，每一个文件只做一件事变并导出，如许可读性和可保护性更好。

// bad
export function foo() {}

// good
export default function foo() {}

import 应当放在一切别的语句之前

eslint

• import/first

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

import bar from 'bar';

// good
import foo from 'foo';
import bar from 'bar';

foo.init();

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

花括号与款式指南中每一个其他花括号块遵照雷同的缩进划定规矩，逗号也是。

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

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

若运用 webpack，不许可在 import 中运用 webpack loader 语法

eslint

• import/no-webpack-loader-syntax

一旦用 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';

迭代器与生成器

不要运用遍历器

eslint

• no-iterator
• no-restricted-syntax

用JavaScript高等函数替代 for-in、for-of

• 这强调了我们不可变的划定规矩。 处置惩罚返回值的纯函数比副作用更轻易。
• 用数组的这些迭代要领： 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);

不要用 generator

eslint

• generator-star-spacing

它在es5上支撑的不好

假如肯定要用，那末肯定须要注重一点：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* () {
  // ...
}

属性

接见属性运用 . 号

eslint

• dot-notation

这条，触及一个曾阿里出过一个看似简朴，实则很难的面试题，你就算猜对一个，你也不肯定能说出道理：

a.b.c.d和a’b'[‘d’]，哪一个机能更高

到这里，倏忽想起这个梗，有兴致的能够翻看一下 这里。

const luke = {
  jedi: true,
  age: 28,
};

// bad
const isJedi = luke['jedi'];

// good
const isJedi = luke.jedi;

当猎取属性称号自身是一个变量是，运用 [] 接见

const luke = {
  jedi: true,
  age: 28,
};

function getProp(prop) {
  return luke[prop];
}

const isJedi = getProp('jedi');

幂等运用 ** 操纵符

eslint

• no-restricted-properties

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

// good
const binary = 2 ** 10;

变量

永久运用 const 或许 let，不运用 var

eslint

• no-undef
• prefer-const

// bad
superPower = new SuperPower();

// good
const superPower = new SuperPower();

每一个变量都用一个 const 或许 let

eslint

• one-var

扯蛋的来由：这类体式格局很轻易去声明新的变量，你不用去斟酌把;调换成,，或许引入一个只需标点的差别的变化。

真正的来由：做法也能够是你在调试的时刻单步每一个声明语句，而不是一下跳过一切声明。

// bad
const items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

const items = getItems(),
    goSportsTeam = true;
    dragonball = 'z';

// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';

尘归尘，土归土

在统一个块中，一切的 const 放在一同，一切的 let 放在一同

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

在你须要的处所声明变量，但要放在合理的位置

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

不运用链接变量分派

eslint

• no-multi-assign

链接变量分派会藏匿建立全局变量

// 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` 也是云云

不运用一元自增自减运算（++、--）

eslint

• no-plusplus

依据 eslint 文档，一元增量和减量语句遭到自动分号插进去的影响，而且能够会致使应用顺序中的值递增或递减的无声毛病。 运用 num + = 1 而不是 num ++ 或 num ++ 语句来表达你的值也是更有表现力的。 制止一元增量和减量语句还会阻挠您无意地预增/预减值，这也会致使顺序涌现不测行动。

// bad

let 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

let 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;

赋值时不换行

eslint

• operator-linebreak

假如赋值语句超出了 max-len 设置，那末给值前面加上括号。

// bad
const foo =
  superLongLongLongLongLongLongLongLongFunctionName();

// bad
const foo
  = 'superLongLongLongLongLongLongLongLongString';

// good
const foo = (
  superLongLongLongLongLongLongLongLongFunctionName()
);

// good
const foo = 'superLongLongLongLongLongLongLongLongString';

不许可声明不运用的变量

eslint

• no-unused-vars

// bad

var some_unused_var = 42;

// 写了没用
var y = 10;
y = 5;

// 变量改了本身的值，也没有用这个变量
var z = 0;
z = z + 1;

// 参数定义了但未运用
function getX(x, y) {
    return x;
}

// good
function getXPlusY(x, y) {
  return x + y;
}

var x = 1;
var y = a + 2;

alert(getXPlusY(x, y));

// 'type' 纵然没有运用也能够能够被疏忽， 由于这个有一个 rest 取值的属性。
// 这是从对象中抽取一个疏忽特别字段的对象的一种情势
var { type, ...coords } = data;
// 'coords' 如今就是一个没有 'type' 属性的 'data' 对象

变量提拔

永久不要运用 var

var 声明会将变量声明提拔到作用域的最前面，然则他的值却只需在运转到代码行时才会被赋值，永久都运用 const 与 let，相识 时效区（Temporal Dead Zones） 的相干学问，也还要晓得为何 typeof 不再平安。

// 我们晓得这个不会事变，假定没有定义全局的notDefined
function example() {
  console.log(notDefined); // => throws a ReferenceError
}

// 在你援用的处所今后声明一个变量，他会一般输出是由于变量作用域上升。
// 注重： declaredButNotAssigned的值没有上升
function example() {
  console.log(declaredButNotAssigned); // => undefined
  var declaredButNotAssigned = true;
}

// 诠释器把变量声明提拔到作用域最前面，
// 能够重写成以下例子， 二者意义雷同
function example() {
  let declaredButNotAssigned;
  console.log(declaredButNotAssigned); // => undefined
  declaredButNotAssigned = true;
}

// 用 const， let就不一样了
function example() {
  console.log(declaredButNotAssigned); // => throws a ReferenceError
  console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
  const declaredButNotAssigned = true;
}

匿名函数表达式与 var 的状况一样

function example() {
  console.log(anonymous); // => undefined

  anonymous(); // => TypeError anonymous is not a function

  var anonymous = function () {
    console.log('anonymous function expression');
  };
}

已定名函数表达式只提拔变量名，而不是函数名或许函数体

function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  superPower(); // => ReferenceError superPower is not defined

  var named = function superPower() {
    console.log('Flying');
  };
}

// 函数名和变量名一样是也云云
function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  var named = function named() {
    console.log('named');
  };
}

函数声明则提拔了函数名和函数体

function example() {
  superPower(); // => Flying

  function superPower() {
    console.log('Flying');
  }
}

比较操纵符

永久运用 === 与 !==，而不是 == 与 !=

eslint

• eqeqeq

if 前提语句的强迫 toBoolean

if 前提语句的强迫 toBoolean 老是遵照以下划定规矩：

• Objects 老是盘算成 true
• Undefined 老是盘算 成 false
• Null 老是盘算成 false
• Booleans 盘算成它自身的布尔值

• Numbers

  • +0、-0 或许 NaN 老是盘算成 false
  • 别的的悉数为 true

• Strings

  • ” 盘算成 false
  • 别的悉数为 true

注重：
NaN 是不等于
NaN 的，请运用
isNaN() 检测。

if ([0] && []) {
  // true
  // 数组（纵然是空数组）是对象，对象会盘算成true
}

console.log(NaN === NaN) // => false
console.log(isNaN(NaN))  // => true

布尔值要运用缩写，然则字符串与数字要邃晓比较对象

// bad
if (isValid === true) {
  // ...
}

// good
if (isValid) {
  // ...
}

// bad
if (name) {
  // ...
}

// good
if (name !== '') {
  // ...
}

// bad
if (collection.length) {
  // ...
}

// good
if (collection.length > 0) {
  // ...
}

在 switch 的 case 与 default 分句中运用大括号建立语法声明地区

eslint

• no-case-declarations

语法声明在全部 switch 的代码块里都可见，然则只需当其被分派后才会初始化，他的初始化时当这个 case 被实行时才发生。 当多个 case 分句试图定义统一个事变时就出题目了

// bad
switch (foo) {
  case 1:
    let x = 1;
    break;
  case 2:
    const y = 2;
    break;
  case 3:
    function f() {
      // ...
    }
    break;
  default:
    class C {}
}

// good
switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {
      // ...
    }
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
}

三元运算符不能被嵌套

eslint

• no-nested-ternary

// bad
const foo = maybe1 > maybe2
  ? "bar"
  : value1 > value2 ? "baz" : null;

// better
const maybeNull = value1 > value2 ? 'baz' : null;

const foo = maybe1 > maybe2
  ? 'bar'
  : maybeNull;

// best
const maybeNull = value1 > value2 ? 'baz' : null;

const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

防备不必要的三元表达式

// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;

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

除非优先级不言而喻，不然运用圆括号来夹杂操纵符

eslint

• no-mixed-operators

开辟者须要以最不言而喻的体式格局邃晓本身的企图与逻辑

// bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;

// bad
const bar = a ** b - 5 % d;

// bad
// 他人会堕入(a || b) && c 的疑惑中
if (a || b && c) {
  return d;
}

// good
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);

// good
const bar = (a ** b) - (5 % d);

// good
if (a || (b && c)) {
  return d;
}

// good
const bar = a + b / c * d;

区块

用大括号包裹多行代码

eslint

• nonblock-statement-body-position

// bad
if (test)
  return false;

// good
if (test) return false;

// good
if (test) {
  return false;
}

// bad
function foo() { return false; }

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

if 以及 else 与 if 的封闭大括号在统一行

eslint

• brace-style

// bad
if (test) {
  thing1();
  thing2();
}
else {
  thing3();
}

// good
if (test) {
  thing1();
  thing2();
} else {
  thing3();
}

if 语句中的 return

eslint

• no-else-return
• 假如 if 语句中老是须要用 return 返回，那末后续的 else 就不须要写了
• 假如 if 块中包括 return，它背面的 else if 也包括了 return，那就应当把 else if 的 return 分到多个 if 语句块中去。

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

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

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

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

  return y;
}

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

  if (y) {
    return y;
  }
}

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

掌握语句

当你的掌握语句 (if、while）等太长，或许凌驾最大长度限定时，把每一个推断前提都放到零丁一行去，逻辑操纵符放在行首

// bad
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
  thing1();
}

// bad
if (foo === 123 &&
  bar === 'abc') {
  thing1();
}

// bad
if (foo === 123
  && bar === 'abc') {
  thing1();
}

// bad
if (
  foo === 123 &&
  bar === 'abc'
) {
  thing1();
}

// good
if (
  foo === 123
  && bar === 'abc'
) {
  thing1();
}

// good
if (
  (foo === 123 || bar === 'abc')
  && doesItLookGoodWhenItBecomesThatLong()
  && isThisReallyHappening()
) {
  thing1();
}

// good
if (foo === 123 && bar === 'abc') {
  thing1();
}

不要用挑选操纵符替代掌握语句

// bad
!isRunning && startRunning();

// good
if (!isRunning) {
  startRunning();
}

解释

多行解释运用 /** ... */

// bad
// make() 基于传入的 `tag` 名返回一个新元素
//
// @param {String} 标署名
// @return {Element} 新元素
function make(tag) {

  // ...

  return element;
}

// good
/**
 * make() 基于传入的 `tag` 名返回一个新元素
 * @param {String} 标署名
 * @param {Element} 新元素
 */
function make(tag) {

  // ...

  return element;
}

单行解释用 //

将单行解释放在被解释地区上面。假如解释不是在第一行，那末解释前面就空一行

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

// good
// 当前激活状态的 tab
const active = true;

// bad
function getType() {
  console.log('fetching type...');
  // 设置默许 `type` 为 'no type'
  const type = this._type || 'no type';

  return type;
}

// good
function getType() {
  console.log('fetching type...');

  // 设置默许 `type` 为 'no type'
  const type = this._type || 'no type';

  return type;
}

// also good
function getType() {
  // 设置默许 `type` 为 'no type'
  const type = this._type || 'no type';

  return type;
}

一切解释开首空一个，轻易浏览

eslint

• space-comment

// bad
//当前激活的 tab
const active = true;

// good
// 当前激活的 tab
const active = true;

// bad
/**
 *make() 基于传入的 `tag` 名返回一个新元素
 *@param {String} 标署名
 *@param {Element} 新元素
 */
function make(tag) {

  // ...

  return element;
}

// good
/**
 * make() 基于传入的 `tag` 名返回一个新元素
 * @param {String} 标署名
 * @param {Element} 新元素
 */
function make(tag) {

  // ...

  return element;
}

主动运用 FIXME 与 TODO

当你的解释须要向解释浏览者或许代码的后继开辟者邃晓的表述一种希冀时，应当主动运用 FIXME 以及 TODO 前缀，这有助于其他的开辟邃晓你指出的须要从新接见的题目，也轻易本身往后有时间的时刻再次回忆当时没有处理或许设计去做而没有做的事变。

• FIXME：这里有一个题目，如今还没有影响大局，然则更愿望处理这个题目或许找到一个更文雅的体式格局去完成
• TODO：设计在这里去完成某些功用，如今还没有完成

// 运用 FIXME: 
class Calculator extends Abacus {
  constructor() {
    super();

    // FIXME: 不该当在此处运用全局变量
    total = 0;
  }
}

// 运用 TODO: 
class Calculator extends Abacus {
  constructor() {
    super();

    // TODO: total 应当应当从一个参数中猎取并初始化
    this.total = 0;
  }
}

空格

代码缩进老是运用两个空格

eslint

• indent

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

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

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

在大括号前空一格

eslint

• space-before-blocks

// bad
function test(){
  console.log('test');
}

// good
function test() {
  console.log('test');
}

// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

关键字空格

eslint

• keyword-spacing

在掌握语句( if, while 等)的圆括号前空一格。在函数挪用和定义时，参数列表和函数名之间不空格。

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

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

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

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

用空格来离隔运算符

eslint

• space-infix-ops

// bad
const x=y+5;

// good
const x = y + 5;

文件末端加一个换行

eslint

• eol-last

// bad
function doSmth() {
  var foo = 2;
}

// good
function doSmth() {
  var foo = 2;
}\n

运用多行缩进的体式格局举行一个长要领链挪用

eslint

• newline-per-chained-call
• no-whitespace-before-property

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

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

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

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

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

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

在一个代码块后下一条语句前空一行

// bad
if (foo) {
  return bar;
}
return baz;

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

return baz;

// bad
const obj = {
  foo() {
  },
  bar() {
  },
};
return obj;

// good
const obj = {
  foo() {
  },

  bar() {
  },
};

return obj;

// bad
const arr = [
  function foo() {
  },
  function bar() {
  },
];
return arr;

// good
const arr = [
  function foo() {
  },

  function bar() {
  },
];

return arr;

不要用空白行添补块

eslint

• padded-blocks

// bad
function bar() {

  console.log(foo);

}

// also bad
if (baz) {

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

}

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

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

圆括号里不加空格

eslint

• space-in-parens

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

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

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

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

方括号里，首尾都不要加空格与元素分开

eslint

• array-bracket-spacing

// bad
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);

// good， 逗号分开符照样要空格的
const foo = [1, 2, 3];
console.log(foo[0]);

花括号里要加空格

eslint

• object-curly-spacing

// bad
const foo = {clark: 'kent'};

// good
const foo = { clark: 'kent' };

防备一行代码凌驾100个字符（包括空格）

eslint

• max-len

为了确保代码的人类可读性与可保护性，代码行应防备凌驾肯定的长度

// bad
const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;

// bad
$.ajax({ method: 'POST', url: 'https://parcmg.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));

// good
const foo = jsonData
  && jsonData.foo
  && jsonData.foo.bar
  && jsonData.foo.bar.baz
  && jsonData.foo.bar.baz.quux
  && jsonData.foo.bar.baz.quux.xyzzy;

// good
$.ajax({
  method: 'POST',
  url: 'https://apis.parcmg.com/',
  data: { name: 'John' },
})
  .done(() => console.log('Congratulations!'))
  .fail(() => console.log('You have failed this city.'));

作为语句的花括号里不该当加空格

eslint

• block-spacing

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

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

, 前不要空格，,后须要空格

eslint

• comma-spacing

// bad
var foo = 1,bar = 2;
var arr = [1 , 2];

// good
var foo = 1, bar = 2;
var arr = [1, 2];

盘算属性内要空格

eslint

• computed-property-spacing

// bad
obj[foo ]
obj[ 'foo']
var x = {[ b ]: a}
obj[foo[ bar ]]

// good
obj[foo]
obj['foo']
var x = { [b]: a }
obj[foo[bar]]

挪用函数时，函数名和小括号之间不要空格

eslint

• func-call-spacing

// bad
func ();

func
();

// good
func();

在对象的字面量属性中， key 与 value 之间要有空格

eslint

• key-spacing

// bad
var obj = { "foo" : 42 };
var obj2 = { "foo":42 };

// good
var obj = { "foo": 42 };

行末不要空格

eslint

• no-trailing-spaces

防备涌现一连多个空行，文件末端只许可空一行

eslint

• no-multiple-empty-lines

// bad
var x = 1;



var y = 2;

// good
var x = 1;

var y = 2;

逗号

不要前置逗号

eslint

• comma-style

// bad
const story = [
    once
  , upon
  , aTime
];

// good
const story = [
  once,
  upon,
  aTime,
];

// bad
const hero = {
    firstName: 'Ada'
  , lastName: 'Lovelace'
  , birthYear: 1815
  , superPower: 'computers'
};

// good
const hero = {
  firstName: 'Ada',
  lastName: 'Lovelace',
  birthYear: 1815,
  superPower: 'computers',
};

分外末端逗号

eslint

• comma-dangle

就算项目有能够运转在旧版本的浏览器中，然则像
Babel 如许的转换器都会在转换代码的过程当中删除这些过剩逗号，所以，斗胆勇敢运用它，完整不会有副作用发生，相反的，他能让我们更轻易的给对象或许多行数组增添、删除属性或许元素，同时，还能让我们的
git diffs 更洁净。

// bad - 没有末端逗号的 git diff
const hero = {
     firstName: 'Florence',
-    lastName: 'Nightingale'
+    lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing']
};

// good - 有末端逗号的 git diff
const hero = {
     firstName: 'Florence',
     lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing'],
};

// bad
const hero = {
  firstName: 'Dana',
  lastName: 'Scully'
};

const heroes = [
  'Batman',
  'Superman'
];

// good
const hero = {
  firstName: 'Dana',
  lastName: 'Scully',
};

const heroes = [
  'Batman',
  'Superman',
];

// bad
function createHero(
  firstName,
  lastName,
  inventorOf
) {
  // does nothing
}

// good
function createHero(
  firstName,
  lastName,
  inventorOf,
) {
  // does nothing
}

// good (在一个 "rest" 元素背面，相对不能涌现逗号)
function createHero(
  firstName,
  lastName,
  inventorOf,
  ...heroArgs
) {
  // does nothing
}

// bad
createHero(
  firstName,
  lastName,
  inventorOf
);

// good
createHero(
  firstName,
  lastName,
  inventorOf,
);

// good (在一个 "rest" 元素背面，相对不能涌现逗号)
createHero(
  firstName,
  lastName,
  inventorOf,
  ...heroArgs
)

分号

永久邃晓的运用分号完毕你的代码行

eslint

• semi

当 JavaScript 碰到没有分号末端的一行，它会实行
自动插进去分号 Automatic Semicolon Insertion 这一划定规矩来决议行末是不是加分号。假如JavaScript在你的断行里毛病的插进去了分号，就会涌现一些离奇的行动。当新的功用加到JavaScript里后， 这些划定规矩会变得更庞杂难明。显现的完毕语句，并经由过程设置代码搜检去捕捉没有带分号的处所能够协助你防备这类毛病。

// bad
(function () {
  const name = 'Skywalker'
  return name
})()

// good
(function () {
  const name = 'Skywalker';
  return name;
}());

// good, 行首加分号，防备文件被连接到一同时马上实行函数被当作变量来实行。
;(() => {
  const name = 'Skywalker';
  return name;
}());

强范例转换

在语句最先实行强迫范例转换

运用 String 举行字符范例转换

eslint

• no-new-wrappers

// => this.reviewScore = 9;

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

// bad
const totalScore = this.reviewScore + ''; // invokes this.reviewScore.valueOf()

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

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

运用 Number 举行数字范例转换

eslint

• radix

运用 parseInt 转换 string 一般都须要带上基数。

const inputValue = '4';

// bad
const val = new Number(inputValue);

// bad
const val = +inputValue;

// bad
const val = inputValue >> 0;

// bad
const val = parseInt(inputValue);

// good
const val = Number(inputValue);

// good
const val = parseInt(inputValue, 10);

在解释中申明为何要运用移位运算

假如你觉得 parseInt 满足不要你的需求，想运用移位举行运算，那末你肯定要写邃晓，这是由于 机能题目，同时，你还须要注重，数字运用 64 位 示意的，但移位运算经常返回的是 32 位的整形，移位运算关于大于 32 位的整数会致使一些 不测行动，最大的32位整数是 2,147,483,647。

// good
/**
 * parseInt是代码运转慢的缘由
 * 用Bitshifting将字符串转成数字使代码运转效力大幅增进
 */
const val = inputValue >> 0;

2147483647 >> 0 //=> 2147483647
2147483648 >> 0 //=> -2147483648
2147483649 >> 0 //=> -2147483647

布尔

const age = 0;

// bad
const hasAge = new Boolean(age);

// good
const hasAge = Boolean(age);

// best
const hasAge = !!age;

定名划定规矩

防备运用一个字母定名

eslint

• id-length

// bad
function q() {
  // ...
}

// good
function query() {
  // ...
}

运用小驼峰式定名对象、函数、实例

eslint

• camelcase

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

运用大驼峰式定名类

eslint

• new-cap

// bad
function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'nope',
});

// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'yup',
});

不要运用前置或后置下划线（除非引入的第三方库自身运用）

eslint

• no-underscore-dangle

JavaScript 没有私有属性或私有要领的观点。只管前置下划线一般的观点上意味着“private”，事实上，这些属性是完整公有的，因而这部份也是你的API的内容。这一观点能够会致使开辟者误以为变动这个不会致使崩溃或许不须要测试。 假如你想要什么东西变成“private”，那就不要让它在这里涌现。

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

// good
this.firstName = 'Panda';

不要保留援用 this

用箭头函数或函数绑定——Function#bind

// bad
function foo() {
  const self = this;
  return function () {
    console.log(self);
  };
}

// bad
function foo() {
  const that = this;
  return function () {
    console.log(that);
  };
}

// good
function foo() {
  return () => {
    console.log(this);
  };
}

保证文件名、export 模块名以及 import 模块名一致

// file 1 contents
class CheckBox {
  // ...
}
export default CheckBox;

// file 2 contents
export default function fortyTwo() { return 42; }

// file 3 contents
export default function insideDirectory() {}

// in some other file
// bad
import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export

// bad
import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
import forty_two from './forty_two'; // snake_case import/filename, camelCase export
import inside_directory from './inside_directory'; // snake_case import, camelCase export
import index from './inside_directory/index'; // requiring the index file explicitly
import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly

// good
import CheckBox from './CheckBox'; // PascalCase export/import/filename
import fortyTwo from './fortyTwo'; // camelCase export/import/filename
import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
// ^ supports both insideDirectory.js and insideDirectory/index.js

export default 一个函数时、函数名小驼峰式，文件与函数名一致

function makeStyleGuide() {
  // ...
}

export default makeStyleGuide;

当 export 一个组织体、类、单例、函数库或许对象时，运用大驼峰式

const Helpers = {
  guid: () => return uuid(),
};

export default Helpers;

简称或缩写应当悉数大写或许悉数小写

名字是给人读的，不是为了顺应电脑的算法

// bad
import SmsContainer from './containers/SmsContainer';

// bad
const HttpRequests = [
  // ...
];

// good
import SMSContainer from './containers/SMSContainer';

// good
const HTTPRequests = [
  // ...
];

// best
import TextMessageContainer from './containers/TextMessageContainer';

// best
const Requests = [
  // ...
];

运用全大写字母设置静态变量

1. 导出变量
2. 是 const 定义的， 保证不能被转变
3. 这个变量是可托的，他的子属性都是不能被转变的

平常我们都将项目的全局参数运用这类
全大写+下划线分开的常量 来定义一些系统设置参数导出，比方
const LIST_VIEW_PAGE_SIZE = 10 能够示意列表页每次加载10条数据；

假如导出项目是一个对象，那末必需保证这个对象的一切属性都是不可变的，同时，它的属性不再是全大写，而是运用小写驼峰式。

// bad
const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';

// bad
export const THING_TO_BE_CHANGED = 'should obviously not be uppercased';

// bad
export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';

// ---

// allowed but does not supply semantic value
export const apiKey = 'SOMEKEY';

// better in most cases
export const API_KEY = 'SOMEKEY';

// ---

// bad - unnecessarily uppercases key while adding no semantic value
export const MAPPING = {
  KEY: 'value'
};

// good
export const MAPPING = {
  key: 'value'
};

接见器

若非必要，不要运用接见器

由于 JavaScript 的 getters/setters 是有副作用的，而且会让他人在检察代码的时刻难以邃晓，后期也会难以保护，所以不引荐运用接见器函数，假如非要运用，能够运用本身完成的 getVal() 与 setVal()。

// bad
class Dragon {
  get age() {
    // ...
  }

  set age(value) {
    // ...
  }
}

// good
class Dragon {
  getAge() {
    // ...
  }

  setAge(value) {
    // ...
  }
}

假如属性或许要领是一个布尔推断值，那末运用 isVal() 或许 hasVal()。

// bad
if (!dragon.age()) {
  return false;
}

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

假如非要运用 get() 与 set()，那末它们二者必需同时运用

class Jedi {
  constructor(options = {}) {
    const lightsaber = options.lightsaber || 'blue';
    this.set('lightsaber', lightsaber);
  }

  set(key, val) {
    this[key] = val;
  }

  get(key) {
    return this[key];
  }
}

事宜

当你须要向事宜附加数据时，将数据封装成为一个对象，而不是运用原始值，这会使得今后能够很轻易的增添附加值的字段。

// bad
$(this).trigger('listingUpdated', listing.id);

// ...

$(this).on('listingUpdated', (e, listingID) => {
  // do something with listingID
});

而是：

// good
$(this).trigger('listingUpdated', { listingID: listing.id });

// ...

$(this).on('listingUpdated', (e, data) => {
  // do something with data.listingID
});

jQuery

为一切 jQuery 对象加上 $ 前缀

// bad
const sidebar = $('.sidebar');

// good
const $sidebar = $('.sidebar');

// good
const $sidebarBtn = $('.sidebar-btn');

缓存 jQuery 效果

// bad
function setSidebar() {
  $('.sidebar').hide();

  // ...

  $('.sidebar').css({
    'background-color': 'pink',
  });
}

// good
function setSidebar() {
  const $sidebar = $('.sidebar');
  $sidebar.hide();

  // ...

  $sidebar.css({
    'background-color': 'pink',
  });
}

运用级联查询 $('.sidebar ul') 或许子父级查询 $('.sidebar > ul')

在 jQuery 对象查询作用域下运用 find 要领

// bad
$('ul', '.sidebar').hide();

// bad
$('.sidebar').find('ul').hide();

// good
$('.sidebar ul').hide();

// good
$('.sidebar > ul').hide();

// good
$sidebar.find('ul').hide();

ES5 兼容性

直接参考 Kangax 供应的 ES5 兼容性列表