寫更漂亮的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;
```