写更漂亮的javascript

用更合理的方式写 JavaScript

声明变量

1.1 使用let和const代替var

不会变的声明用const

//bad 
var $cat = $('.cat')//good
const $cat = $('.cat')

会变动的声明用let

//bad 
var count = 1
if (count<10) {count += 1
}//good
let count = 1
if (count<10) {count += 1
}

1.2 将所有的 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;

1.3 在你需要的地方给变量赋值，但请把它们放在一个合理的位置。

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

// bad - unnecessary function call
const checkName = function (hasName) {const name = getName();if (hasName === 'test') {return false;}if (name === 'test') {this.setName('');return false;}return name;
};// good
const checkName = function (hasName) {if (hasName === 'test') {return false;}const name = getName();if (name === 'test') {this.setName('');return false;}return name;
};

⬆ 返回目录

对象 Objects

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

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

2.2 创建有动态属性名的对象时，使用可被计算的属性名称。

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

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

2.3 使用对象方法的简写。eslint: object-shorthand

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

2.4 使用对象属性值的简写。eslint: object-shorthand

为什么？因为这样更短更有描述性。

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

2.5 在对象属性声明前把简写的属性分组。

为什么？因为这样能清楚地看出哪些属性使用了简写。

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

2.6 ==只==把对象中是无效标识符的属性用引号括起来。 eslint: quote-props
为什么？通常认为这样写更容易阅读，更好的支持语法高亮，也更容易被许多 JS 引擎优化。
```
// bad
const bad = {'foo': 3,'bar': 4,'data-blah': 5,
};// good
const good = {foo: 3,bar: 4,'data-blah': 5,
};
```

2.7 不要直接调用 Object.prototype 方法，比如 hasOwnProperty, propertyIsEnumerable,和 isPrototypeOf。

为什么？这些方法有可能被对象本身的方法所遮蔽 - 比如{ hasOwnProperty: false } - 或者, 这个对象是个 null object (Object.create(null))。

// bad
console.log(object1.hasOwnProperty(key));// good
console.log(Object.prototype.hasOwnProperty.call(object, key));// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
/* or */
import has from 'has'; // https://www.npmjs.com/package/has
// ...
console.log(has.call(object, key));

2.8 使用对象字面量创建对象时，大括号必须换行。使用对象解构赋值时，如果对象属性超过2个，必须换行。eslint: object-curly-newline

// bad
const original = {a: 1, b: 2};
const {height, largeSize, smallSize} = item;// good
const original = {a: 1, b: 2,
};
const {height,largeSize,smallSize,
} = item;
const {height, largeSize} = item;

2.9
单行定义对象时，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。
```javascript
// bad
const foo = { k1: v1, k2: v2, };
const bar = {
k1: v1,
k2: v2
};

// good
const foo = { k1: v1, k2: v2 };
const bar = {
k1: v1,
k2: v2,
};
```
⬆ 返回目录

数组 Arrays

3.1 使用字面值创建数组。eslint: no-array-constructor
```
// bad
const items = new Array();// good
const items = [];
```

3.2 向数组添加元素时使用 Array#push 替代直接赋值。

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

3.3 使用扩展运算符 ... 复制数组。

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

3.4 使用扩展运算符 ... 代替 Array.from 把一个类数组对象转换成数组。

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

3.5 使用 Array.from 代替扩展运算符 ... 来映射迭代器，因为这样可以避免创建一个中间数组。(array.from可以把类数组或者字符串转化为数组)
```
// bad
const baz = [...foo].map(bar);// good
const baz = Array.from(foo, bar);
```

3.6 在数组方法的回调中使用return语句。如果函数只有一行代码，并且只返回了一个表达式，那么可以省略返回值。关联 7.2. eslint: array-callback-return

// good
[1, 2, 3].map((x) => {const y = x + 1;return x * y;
});// good
[1, 2, 3].map(x => x + 1);// bad - no returned value means `memo` becomes undefined after the first iteration
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {const flatten = memo.concat(item);memo[index] = flatten;
});// good
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {const flatten = memo.concat(item);memo[index] = flatten;return flatten;
});// bad
inbox.filter((msg) => {const {subject, author} = msg;if (subject === 'Mockingbird') {return author === 'Harper Lee';} else {return false;}
});// good
inbox.filter((msg) => {const {subject, author} = msg;if (subject === 'Mockingbird') {return author === 'Harper Lee';}return false;
});

3.7 如果数组有多行，请在打开和关闭数组括号前使用换行符。eslint: array-bracket-newline

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

3.8 禁止使用稀疏数组。eslint: no-sparse-arrays

// bad
const color = ['red',, 'blue'];// good
const color = ['red', 'blue'];

⬆ 返回目录

字符串 Strings

4.1 字符串使用单引号 '' 。eslint: quotes

// bad
const name = "Capt. Janeway";// bad - template literals should contain interpolation or newlines
const name = `Capt. Janeway`;// good
const name = 'Capt. Janeway';

4.2 字符串超过 ==80== 个字节应该使用字符串连接号换行。

4.3 注：过度使用字串连接符号可能会对性能造成影响。jsPerf 和讨论。但是打包工具会在打包压缩后的代码中处理好字符串的拼接。而且字串连接符号对性能影响有限。

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

4.4 程序化生成字符串时，使用模板字符串代替字符串连接。eslint: prefer-template template-curly-spacing

为什么？模板字符串更为简洁，更具可读性。

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

4.5 不要在字符串中使用 eval()，这个方法有要多缺陷。eslint: no-eval

4.6 不要在字符串中使用不必要的转义字符。 eslint: no-useless-escape
为什么？反斜杠导致代码不可读，因此应该在必要的时候使用。
```
// bad
const foo = '\'this\' \i\s \"quoted\"';// good
const foo = '\'this\' is "quoted"';
const foo = `my name is '${name}'`;
```

⬆ 返回目录

函数 Functions

5.1 使用函数表达式代替函数声明（顶级函数不受限制）。eslint: func-style
为什么？函数声明会把整个函数提升（hoisted），这导致在函数定义之前就可以引用该函数。这会影响代码的可读性和可维护性。
```
// bad
function foo() {// ...
}// good
const foo = function () {// ...
};
```
5.2 用括号包裹立即执行函数表达式。 eslint: wrap-iife
为什么？立即执行函数表达式是个单独的模块，用括号将函数和表示函数执行的括号包裹起来，会使代码更清晰。
```
// 立即执行函数表达式 (IIFE)
(function () {console.log('Welcome to the Internet. Please follow me.');
}());
```
5.3 永远不要在一个非函数代码块（if、while 等）中声明一个函数，应该把函数赋给代码块外部的一个变量。浏览器允许你这么做，但它们的解析表现不一致。eslint: no-loop-func
注意: ECMA-262 把 block 定义为一组语句。函数声明不是语句。阅读 ECMA-262 关于这个问题的说明

//bad
if (foo) {function test () {...}
//good
let test;
if(foo) {test = () => {...}
}

5.4 永远不要把参数命名为 arguments。这将取代原来函数作用域内的 arguments 对象。

// bad
const nope = function (name, options, arguments) {// ...stuff...
};// good
const yup = function (name, options, args) {// ...stuff...
};

5.5 不要使用 arguments。可以选择 rest 语法 ... 替代。eslint: prefer-rest-params
为什么？使用 ... 能明确你要传入的参数。另外 rest 参数是一个真正的数组，而 arguments 是一个类数组。
```
// bad
const concatenateAll = function () {const args = Array.prototype.slice.call(arguments);return args.join('');
};// good
const concatenateAll = function (...args) {return args.join('');
};
```

5.6 直接给函数的参数指定默认值，不要使用一个变化的函数参数。

// really bad
const handleThings = function (opts) {// 不！我们不应该改变函数参数。// 更加糟糕: 如果参数 opts 是 false 的话，它就会被设定为一个对象。// 但这样的写法会造成一些 Bugs。//（译注：例如当 opts 被赋值为空字符串，opts 仍然会被下一行代码设定为一个空对象。）opts = opts || {};// ...
};// still bad
const handleThings = function (opts) {if (opts === void 0) {opts = {};}// ...
};// good
const handleThings = function (opts = {}) {// ...
};

5.7 直接给函数参数赋值时需要避免副作用。

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

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

5.8 不要使用构造函数的方式创建一个新函数。 eslint: no-new-func

为什么？用构造函数的方式创建函数类似于用 eval() 创建字符串，会有很多缺陷。
```
// bad
var add = new Function('a', 'b', 'return a + b');// still bad
var subtract = Function('a', 'b', 'return a - b');
```
（所以是不使用class语法的意思吗）
6.9 function 关键词的空格。 eslint: space-before-function-paren space-before-blocks
为什么？保持一致性，这样在添加和删除函数时就不需要修改空格了。
```
// bad
const fetch = function(){};
const get = function (){};
const hold = function() {};// good
const fetch = function () {};
```

5.10 优先使用扩展运算符 ... 来调用参数可变的函数。 eslint: prefer-spread

为什么？这样写代码更干净，不必提供上下文。

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

5.11 有默认值的参数总是放在最后一个。

```javascript
// bad
const handleThings = function (opts = {}, name) {
// ...
};
// good
const handleThings = function (name, opts = {}) {
// ...
};
``` ```
5.12 建议函数的圈复杂度(代码的独立现行路径条数)==在20以内==。 eslint: complexity

为什么？这样可以减少函数的复杂度，使函数容易看懂。

⬆ 返回目录

箭头函数

6.1 当你必须使用函数表达式（或传递一个匿名函数）时，使用箭头函数符号。eslint: prefer-arrow-callback, arrow-spacing
为什么？因为箭头函数创造了新的一个 this 执行环境（译注：参考 Arrow functions - JavaScript | MDN 和 ES6 arrow functions, syntax and lexical scoping），通常情况下都能满足你的需求，而且这样的写法更为简洁。

为什么不？如果你有一个相当复杂的函数，你或许可以把逻辑部分转移到一个函数声明上。
```
// bad
[1, 2, 3].map(function (num) {const sum = num + 1;return num * sum;
});// good
[1, 2, 3].map((num) => {const sum = num + 1;return num * sum;
});
```

6.2 如果一个函数适合用一行写出并且只有一个参数，那就把花括号、圆括号和 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,
}));// No implicit return with side effects
const foo = function (callback) {const val = callback();if (val === true) {// Do something if callback returns true}
};let bool = false;// bad
foo(() => bool = true);// good
foo(() => {bool = true;
});

6.3 如果一个表达式跨行了，必须用括号括起来增强可读性。

为什么？这使得函数开始和结束的位置非常清晰。

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

6.4 入参必须用括号括起来。eslint: arrow-parens

为什么？保持代码清晰和一致性。

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

6.5 避免混用箭头函数的语法 (=>) 和比较运算符 (<=, >=)。 eslint: no-confusing-arrow

// bad
const itemHeight = item => item.height > 1000 ? item.largeSize : item.smallSize;// bad
const itemHeight = (item) => item.height > 1000 ? item.largeSize : item.smallSize;// good
const itemHeight = (item) => (item.height > 1000 ? item.largeSize : item.smallSize);// good
const itemHeight = (item) => {const {height,largeSize,smallSize,} = item;return height > 1000 ? largeSize : smallSize;
};

⬆ 返回目录

模块 Modules

7.1 总是使用模组 (import/export) 而不是其他非标准模块系统。你可以编译为你喜欢的模块系统。

为什么？模块化是未来趋势。

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

7.2 不要使用通配符 import。

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

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

7.3 不要从 import 中直接 export。

为什么？虽然一行代码简洁明了，但让 import 和 export 各司其职让事情能保持一致。

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

7.4 不要多次 import 同一个文件。eslint: no-duplicate-imports

Why? 多个地方引入同一个文件会使代码难以维护。

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

⬆ 返回目录

Iterators and Generators

8.1 不要使用 iterators。使用高阶函数例如 map() 和 reduce() 替代 for-of 和 for-in。eslint: no-iterator no-restricted-syntax
为什么？这加强了我们不变的规则。处理纯函数的回调值更易读，这比它带来的副作用更重要。

使用 map()、every()、filter()、find()、findIndex()、reduce()、some()...来遍历数组，使用 Object.keys()、Object.values()、Object.entries() 生成数组以便遍历对象。
```
const numbers = [1, 2, 3, 4];// bad
let sum = 0;
for (let num of numbers) {sum += num;
}sum === 10;// good
let sum = 0;
numbers.forEach((num) => {sum += num;
});
sum === 10;// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 10;
```
8.2 现在还不要使用 generators。

为什么？因为它们现在还没法很好地编译到 ES5。

⬆ 返回目录

属性 Properties

9.1 使用 . 来访问对象的属性。eslint: dot-notation

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

9.2 当通过变量访问属性时使用中括号 []。

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

⬆ 返回目录

变量 Variables

11.1 不要链式的给变量赋值。eslint: no-multi-assign

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

// bad
(function example() {// JavaScript interprets this as// let a = ( b = ( c = 1 ) );// The let keyword only applies to variable a; variables b and c become// global variables.let cat = dog = bird = 1;
}());console.log(cat); // throws ReferenceError
console.log(dog); // 1
console.log(bird); // 1// good
(function example() {let cat = 1;let dog = cat;let bird = cat;
}());console.log(cat); // throws ReferenceError
console.log(dogb); // throws ReferenceError
console.log(bird); // throws ReferenceError// the same applies for `const`

10.2 避免使用累加和累减符号 (++, --)。 eslint no-plusplus

为什么？根据 eslint 文档，累加和累减会受到自动插入分号的影响，并可能导致一些意外情况发生。

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

10.3 避免使用魔法数字（白名单如下）。 eslint no-magic-numbers

为什么？魔法数字让人难难以明白开发者的意图是什么，破坏代码的可读性和可维护性。

// 以下为魔法数字白名单
let magicNumberIgnore = [];// baisc number
magicNumberIgnore = magicNumberIgnore.concat([-1, 0, 100, 1000, 10000
]);// datetime number
magicNumberIgnore = magicNumberIgnore.concat([12, 24, 60, 3600
]);// httpcode number
magicNumberIgnore = magicNumberIgnore.concat([200,301, 302, 303, 304,400, 401, 402, 403, 404,500, 501, 502, 503, 504
]);// bit number
magicNumberIgnore = magicNumberIgnore.concat([1024
]);// number 1-49
for (i = 1; i <= 49; i++) {if (magicNumberIgnore.indexOf(i) === -1) {magicNumberIgnore.push(i);}}

// bad
let soldNum = 102;
let initNum = 80;// good
const APPLE = 102;
const STOCK = 80;
let soldNum = APPLE;
let initNum = STOCK;

⬆ 返回目录

Hoisting

11.1 var 声明会被提升至该作用域的顶部，但它们赋值不会提升。let 和 const 被赋予了一种称为「暂时性死区（Temporal Dead Zones, TDZ）」的概念。这对于了解为什么 typeof 不再安全相当重要。

// 我们知道这样运行不了
// （假设 notDefined 不是全局变量）
const example = function () {console.log(notDefined); // => throws a ReferenceError
};// 由于变量提升的原因，
// 在引用变量后再声明变量是可以运行的。
// 注：变量的赋值 `true` 不会被提升。
const example = function () {console.log(declaredButNotAssigned); // => undefinedvar declaredButNotAssigned = true;
};// 编译器会把函数声明提升到作用域的顶层，
// 这意味着我们的例子可以改写成这样：
const example = function () {let declaredButNotAssigned;console.log(declaredButNotAssigned); // => undefineddeclaredButNotAssigned = true;
};// 使用 const 和 let
const example = function () {console.log(declaredButNotAssigned); // => throws a ReferenceErrorconsole.log(typeof declaredButNotAssigned); // => throws a ReferenceErrorconst declaredButNotAssigned = true;
};

11.2 匿名函数表达式的变量名会被提升，但函数内容并不会。

const example = function () {console.log(anonymous); // => undefinedanonymous(); // => TypeError anonymous is not a functionvar anonymous = function() {console.log('anonymous function expression');};
};

11.3 命名的函数表达式的变量名会被提升，但函数名和函数内容并不会。

const example = function () {console.log(named); // => undefinednamed(); // => TypeError named is not a functionsuperPower(); // => ReferenceError superPower is not definedvar named = function superPower() {console.log('Flying');};
};// the same is true when the function name
// is the same as the variable name.
const example = function () {console.log(named); // => undefinednamed(); // => TypeError named is not a functionvar named = function named() {console.log('named');}
};

11.4 函数声明的名称和函数体都会被提升。

const example = function () {superPower(); // => Flyingfunction superPower() {console.log('Flying');}
};

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

⬆ 返回目录

比较运算符和等号

12.1 使用 === 和 !== 而不是 == 和 !=。eslint: eqeqeq
12.2 条件表达式例如 if 语句通过抽象方法 ToBoolean 强制计算它们的表达式并且总是遵守下面的规则：
- 对象被计算为 true
- Undefined 被计算为 false
- Null 被计算为 false
- 布尔值 被计算为 布尔的值
- 数字如果是 +0、-0、或 NaN 被计算为 false, 否则为 true
- 字符串 如果是空字符串 '' 被计算为 false，否则为 true
```
if ([0] && []) {// true// an array (even an empty one) is an object, objects will evaluate to true
}
```

12.3 布尔值使用简写，但是需要显示比较字符串和数字。

// bad
if (isValid === true) {// ...
}// good
if (isValid) {// ...
}// bad
if (name) {// ...
}// good
if (name !== '') {// ...
}// bad
if (collection.length) {// ...
}// good
if (collection.length > 0) {// ...
}

12.4 想了解更多信息，参考 Angus Croll 的 Truth Equality and JavaScript。

12.5 当 case 和 default 包含的子句中有词法声明时，用大括号包裹。(例如 let, const, function, and class). eslint: no-case-declarations

为什么？词法声明在整个 switch 块中是可见的，但只有在代码执行到 case 中变量被赋值时才会被初始化，当多个 case 子句中定义相同的变量是时会出现问题。
```
// bad
switch (foo) {case 1:let xx = 1;break;case 2:const yy = 2;break;case 3:const func = function () {// ...};break;default:get();
}// good
switch (foo) {case 1: {let xx = 1;break;}case 2: {const yy = 2;break;}case 3: {const func = function () {// ...};break;}case 4:bar();break;default: {get();}
}
```

12.6 三元表达式不能嵌套使用。 eslint: no-nested-ternary

// bad
const foo = maybe1 > maybe2? "bar": value1 > value2 ? "baz" : null;// split into 2 separated ternary expressions
const maybeNull = value1 > value2 ? 'baz' : null;// better
const foo = maybe1 > maybe2? 'bar': maybeNull;// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

12.7 避免出现不必要的三元表达式。 eslint: no-unneeded-ternary

// bad
const foo = maybe1 ? maybe1 : maybe2;
const bar = correct ? true : false;
const baz = wrong ? false : true;// good
const foo = maybe1 || maybe2;
const bar = !!correct;
const baz = !wrong;

12.8 当混用操作符时，要用括号括起来。唯一的例外是标准的算术运算符 (+, -, *, & /)，因为它们很容易理解。 eslint: no-mixed-operators

为什么？这提高了代码的可读性，并且使得开发者的意图很清晰。

// bad
const foo = p1 && p2 < 0 || p3 > 0 || p4 + 1 === 0;// bad
const bar = p1 ** p2 - 5 % p4;// bad
// one may be confused into thinking (p1 || p2) && p3
if (p1 || p2 && p3) {return p4;
}// good
const foo = (p1 && p2 < 0) || p3 > 0 || (p4 + 1 === 0);// good
const bar = (p1 ** p2) - (5 % p4);// good
if (p1 || (p2 && p3)) {return p4;
}// good
const bar = p1 + (p2 / p3 * p4);

⬆ 返回目录

代码块 Blocks

13.1 使用大括号包裹所有的多行代码块。eslint: nonblock-statement-body-position

// bad
if (test)return false;// good
if (test) {return false;
}// good
if (test) {return false;
}// bad
const func = function () {return false};// good
const func = function () {return false;
};

13.2 如果通过 if 和 else 使用多行代码块，把 else 放在 if 代码块关闭括号的同一行。eslint: brace-style
```
// bad
if (test) {thing1();thing2();
}
else {thing3();
}// good
if (test) {thing1();thing2();
} else {thing3();
}
```

13.3 如果 if 代码块中肯定会执行 return 语句，那么后面的 else 就没必要写了。如果在 else if 代码块中又有 if，并且 if 代码块会执行return 语句，那么可以分拆成多个 if 代码块。 eslint: no-else-return

// bad
const foo = function () {if (correct) {return correct;} else {return wrong;}
};// bad
const cats = function () {if (correct) {return correct;} else if (wrong) {return wrong;}
};// bad
const dogs = function () {if (correct) {return correct;} else {if (wrong) {return wrong;}}
};// good
const foo = function () {if (correct) {return correct;}return wrong;
};// good
const cats = function () {if (correct) {return correct;}if (wrong) {return wrong;}return false;
};//good
const dogs = function (correct) {if (correct) {if (confuse) {return wrong;}} else {return confuse;}
};

⬆ 返回目录

注释 Comments

14.1 所有的注释开头都加一个空格，这样更利于阅读。eslint: spaced-comment

// bad
//is current tab
const active = true;// good
// is current tab
const active = true;// bad
/***make() returns a new element*based on the passed-in tag name*/
const make = function (tag) {// ...return element;
};// good
/*** make() returns a new element* based on the passed-in tag name*/
const make = function (tag) {// ...return element;
};

14.2 给注释增加 FIXME 或 TODO 的前缀可以帮助其他开发者快速了解这是一个需要复查的问题，或是给需要实现的功能提供一个解决方式。这将有别于常见的注释，因为它们是可操作的。使用 FIXME -- need to figure this out 或者 TODO -- need to implement。

14.3 使用 // FIXME: 标注问题。

class Calculator {constructor() {// FIXME: shouldn't use a global heretotal = 0;}
}

14.4 使用 // TODO: 标注问题的解决方式。

class Calculator {constructor() {// TODO: total should be configurable by an options paramthis.total = 0;}
}

⬆ 返回目录

空格 Whitespace

15.1 使用 4 个空格作为缩进。eslint: indent

// bad
const func = function () {
∙∙const name = '';
}// bad
const func = function () {
∙const name = '';
}// good
const func = function () {
∙∙∙∙const name = '';
}

15.2 在大括号前放一个空格。eslint: space-before-blocks

// bad
const test = function (){console.log('test');
}// good
const test = function () {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',
});

15.3 在控制语句（if、while 等）的小括号前放一个空格。在函数调用及声明中，不要在函数的参数列表前加空格。eslint: keyword-spacing

// bad
if(isJedi) {fight ();
}// good
if (isJedi) {fight();
}// bad
const fight = function() {console.log ('Swooosh!');
}// good
const fight = function () {console.log('Swooosh!');
}

15.4 使用空格把运算符隔开。eslint: space-infix-ops
```
// bad
const i=j+5;// good
const i = j + 5;
```

15.5 在文件末尾插入一个空行。eslint: eol-last

// bad
import {es6} from './AirbnbStyleGuide';// ...
export default es6;

// bad
import {es6} from './AirbnbStyleGuide';// ...
export default es6;↵
↵

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

15.6 在使用长方法链时进行缩进。使用前面的点 . 强调这是方法调用而不是新语句。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').class('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);

15.7 在块末和新语句前插入空行。

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

15.8 不要在 block 代码块中加空行。 eslint: padded-blocks

// bad
const bar = function () {console.log(foo);};// bad
if (baz) {console.log(qux);
} else {console.log(foo);}// bad
class Foo {constructor(bar) {this.bar = bar;}
}// good
const bar = function () {console.log(foo);
};// good
if (baz) {console.log(qux);
} else {console.log(foo);
}

15.9 不要在小括号中加空格。 eslint: space-in-parens

// bad
const bar = function ( foo ) {return foo;
};// good
const bar = function (foo) {return foo;
};// bad
if ( foo ) {console.log(foo);
}// good
if (foo) {console.log(foo);
}

15.10 不要在中括号中加空格。 eslint: array-bracket-spacing

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

15.11 不要在大括号中加空格。 eslint: object-curly-spacing

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

15.12 尽量控制一行代码在==100==个字符以内（包括空格）。字符串、字符串模板和 URL 不受限制。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://airbnb.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://airbnb.com/',data: {name: 'John',},
}).done(() => {// do something...}).fail(() => {// do something...});

⬆ 返回目录

逗号 Commas

16.1 行首逗号：禁用。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',
};

16.2 增加结尾的逗号：需要。eslint: comma-dangle

为什么? 这会让 git diffs 更干净。另外，像 babel 这样的转译器会移除结尾多余的逗号，也就是说你不必担心老旧浏览器的尾逗号问题。

// bad - git diff without trailing comma
const hero = {firstName: 'Florence',
-    lastName: 'Nightingale'
+    lastName: 'Nightingale',
+    inventorOf: ['coxcomb graph', 'modern nursing']
};// good - git diff with trailing comma
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
const createHero = function (firstName,lastName,inventorOf
) {// does nothing
};// good
const createHero = function (firstName,lastName,inventorOf,
) {// does nothing
};// good (note that a comma must not appear after a "rest" element)
const createHero = function (firstName,lastName,inventorOf,...heroArgs
) {// does nothing
};// bad
createHero(firstName,lastName,inventorOf
);// good
createHero(firstName,lastName,inventorOf,
);// good
createHero(firstName,lastName,inventorOf,...heroArgs
);

⬆ 返回目录

分号 Semicolons

17.1 使用分号。eslint: semi

Why? When JavaScript encounters a line break without a semicolon, it uses a set of rules called Automatic Semicolon Insertion to determine whether or not it should regard that line break as the end of a statement, and (as the name implies) place a semicolon into your code before the line break if it thinks so. ASI contains a few eccentric behaviors, though, and your code will break if JavaScript misinterprets your line break. These rules will become more complicated as new features become a part of JavaScript. Explicitly terminating your statements and configuring your linter to catch missing semicolons will help prevent you from encountering issues.

// bad - raises exception
const luke = {}
const leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')// bad - raises exception
const reaction = "No! That's impossible!"
(async function meanwhileOnTheFalcon(){// handle `leia`, `lando`, `chewie`, `r2`, `c3p0`// ...
}())// bad - returns `undefined` instead of the value on the next line - always happens when `return` is on a line by itself because of ASI!
const foo = foo() {return'search your feelings, you know it to be foo'
};// good
const luke = {};
const leia = {};
[luke, leia].forEach((jedi) => {jedi.father = 'vader';
});// good
const reaction = "No! That's impossible!";
(async function meanwhileOnTheFalcon(){// handle `leia`, `lando`, `chewie`, `r2`, `c3p0`// ...
}());// good
const foo = foo() {return 'search your feelings, you know it to be foo';
};

类型转换

18.1 在语句开始时执行类型转换。

18.2 字符串：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(); // isn’t guaranteed to return a string// good
const totalScore = String(this.reviewScore);

18.3 对数字使用 parseInt 转换，并带上类型转换的基数。（不强制）eslint: radix no-new-wrappers

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

18.4 如果因为某些原因 parseInt 成为你所做的事的瓶颈而需要使用位操作解决性能问题时，留个注释说清楚原因和你的目的。
```
// good
/*** 使用 parseInt 导致我的程序变慢，* 改成使用位操作转换数字快多了。*/
const val = inputValue >> 0;
```
18.5 注: 小心使用位操作运算符。数字会被当成 64 位值，但是位操作运算符总是返回 32 位的整数（参考）。位操作处理大于 32 位的整数值时还会导致意料之外的行为。关于这个问题的讨论。最大的 32 位整数是 2,147,483,647：
```
2147483647 >> 0 //=> 2147483647
2147483648 >> 0 //=> -2147483648
2147483649 >> 0 //=> -2147483647
```

18.6 布尔：eslint: no-new-wrappers

const age = 0;// bad
const hasAge = new Boolean(age);// good
const hasAge = Boolean(age);// good
const hasAge = !!age;

⬆ 返回目录

命名规则

19.1 避免单字母命名（e、i、j、v、k、t除外）。避免超长变量名（长度不超过60）。命名应具备描述性和可读性。eslint: id-length

// bad
const q = function () {// ...stuff...
};// bad
const getWebBeibei11MaylikeRecommendPageSize20Page1XidMTcxNTM2Njcxsa = function () {// ...stuff...
};// good
const query = function () {// ...stuff..。
};

19.2 使用驼峰式命名对象、函数和实例。（对象的属性不限制）eslint: camelcase

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

19.3 使用帕斯卡式命名构造函数或类。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',
});

19.4 别保存 this 的引用。使用箭头函数或 Function#bind。

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

19.5 如果你的文件只输出一个类，那你的文件名必须和类名完全保持一致。

// file contents
class CheckBox {// ...
}
export default CheckBox;// in some other file
// bad
import CheckBox from './checkBox';// bad
import CheckBox from './check_box';// good
import CheckBox from './CheckBox';

19.6 当你导出默认的函数时使用驼峰式命名。你的文件名必须和函数名完全保持一致。
```
const makeStyleGuide = function () {
}export default makeStyleGuide;
```
19.7 当你导出单例、函数库、空对象时使用帕斯卡式命名。
```
const AirbnbStyleGuide = {es6: {}
};export default AirbnbStyleGuide;
```