## 1.1基本類型:存取直接作用于它自身
* string
* number
* boolean
* null
* undefined
~~~js
var foo = 1;
var bar = foo;
bar = 9;
console.log(foo, bar); // => 1, 9
~~~
## 1.2復雜類型: 存取時作用于它自身值的引用
* object
* array
* function
~~~js
var foo = [1, 2];
var bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9
~~~
## 2.1 對所有的引用使用 const ；避免使用 var。
解釋：為什么？這能確保你無法對引用重新賦值，也不會導致出現 bug 或難以理解。
~~~
// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2;
~~~
## 2.2 如果你一定需要可變動的引用，使用 let 代替 var
解釋：為什么？因為 > let> 是塊級作用域，而 > var> 是函數作用域。
~~~js
// bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
}
~~~
## 2.3 注意 let 和 const 都是塊級作用域。
~~~js
// const 和 let 只存在于它們被定義的區塊內。
{
let a = 1;
const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
~~~
## 3.1 使用字面值創建對象
~~~js
// bad
const item = new Object();
// good
const item = {};
~~~
## 3.2 如果你的代碼在瀏覽器環境下執行，別使用 保留字 作為鍵值。這樣的話在 IE8 不會運行。 但在 ES6 模塊和服務器端中使用沒有問題。
~~~js
// bad
const superman = { default: { clark: 'kent' }, private: true, };
// good
const superman = { defaults: { clark: 'kent' }, hidden: true, };
~~~
## 3.3 使用同義詞替換需要使用的保留字。
~~~js
// bad
const superman = { class: 'alien', };
// bad
const superman = { klass: 'alien', };
// good
const superman = { type: 'alien', };
~~~
## 3.4 創建有動態屬性名的對象時，使用可被計算的屬性名稱。
解釋：為什么？因為這樣可以讓你在一個地方定義所有的對象屬性。
~~~js
function getKey(k) {
return `a key named ${k}`;
}
// bad
const obj = {
id: 5,
name: 'San Francisco',
};
obj[getKey('enabled')] = true;
// good
const obj = {
id: 5,
name: 'San Francisco',
[getKey('enabled')]: true,
};
~~~
## 3.5 使用對象方法的簡寫。
~~~js
// bad
const atom = {
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
value: 1,
addValue(value) {
return atom.value + value;
},
};
~~~
## 3.6 使用對象屬性值的簡寫。
解釋：為什么？因為這樣更短更有描述性
~~~js
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
lukeSkywalker,
};
~~~
## 3.7 在對象屬性聲明前把簡寫的屬性分組。
解釋：為什么？因為這樣能清楚地看出哪些屬性使用了簡寫。
~~~js
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,
};
~~~
## 4.1 使用字面值創建數組。
~~~js
// bad
const items = new Array();
// good
const items = [];
~~~
## 4.2 向數組添加元素時使用 Arrary#push 替代直接賦值。
~~~js
const someStack = [];
// bad
someStack[someStack.length] = 'abracadabra';
// good
someStack.push('abracadabra');
~~~
## 4.3 使用拓展運算符 ... 復制數組。
~~~js
// bad
const len = items.length; const itemsCopy = []; let i;
for (i = 0; i < len; i++) { itemsCopy[i] = items[i]; }
// good
const itemsCopy = [...items];
~~~
## 4.4 使用 Array#from 把一個類數組對象轉換成數組。
~~~js
const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);
~~~
## 5.1 使用解構存取和使用多屬性對象。
解釋：為什么？因為解構能減少臨時引用屬性
~~~js
// bad
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
return `${firstName} ${lastName}`;
}
// good
function getFullName(obj) {
const { firstName, lastName } = obj;
return `${firstName} ${lastName}`;
}
// best
function getFullName({ firstName, lastName }) {
return `${firstName} ${lastName}`;
}
~~~
## 5.2 對數組使用解構賦值。
~~~js
const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;
~~~
## 5.3 需要回傳多個值時，使用對象解構，而不是數組解構。
解釋：為什么？增加屬性或者改變排序不會改變調用時的位置
~~~js
// bad
function processInput(input) {
// then a miracle occurs
return [left, right, top, bottom];
}
// 調用時需要考慮回調數據的順序。
const [left, __, top] = processInput(input);
// good
function processInput(input) {
// then a miracle occurs
return { left, right, top, bottom };
}
// 調用時只選擇需要的數據
const { left, right } = processInput(input);
~~~
## 6.1 字符串使用單引號 '' 。
~~~js
// bad
const name = "Capt. Janeway";
// good
const name = 'Capt. Janeway';
~~~
## 6.2 字符串超過 80 個字節應該使用字符串連接號換行。
## 6.3 注：過度使用字串連接符號可能會對性能造成影響。
~~~js
// bad
const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';
// bad
const errorMessage = 'This is a super long error that was thrown because \ of Batman. When you stop to think about how Batman had anything to do \ with this, you would get nowhere \ fast.';
// good
const errorMessage = 'This is a super long error that was thrown because ' + 'of Batman. When you stop to think about how Batman had anything to do ' + 'with this, you would get nowhere fast.';
~~~
## 6.4 程序化生成字符串時，使用模板字符串代替字符串連接。
解釋：為什么？模板字符串更為簡潔，更具可讀性。
~~~js
// bad
function sayHi(name) {
return 'How are you, ' + name + '?';
}
// bad
function sayHi(name) {
return ['How are you, ', name, '?'].join();
}
// good
function sayHi(name) {
return `How are you, ${name}?`;
}
~~~
## 7.1 使用函數聲明代替函數表達式。
解釋：為什么？因為函數聲明是可命名的，所以他們在調用棧中更容易被識別。此外，函數聲明會把整個函數提升（hoisted），而函數表達式只會把函數的引用變量名提升。這條規則使得> 箭頭函數> 可以取代函數表達式
~~~
// bad
const foo = function () {
};
// good
function foo() {
}
~~~
## 7.2 函數表達式:
~~~js
// 立即調用的函數表達式 (IIFE)
(() => {
console.log('Welcome to the Internet. Please follow me.');
})();
~~~
## 7.3 永遠不要在一個非函數代碼塊（if、while 等）中聲明一個函數，把那個函數賦給一個變量。瀏覽器允許你這么做，但它們的解析表現不一致。
## 7.4 注意: ECMA-262 把 block 定義為一組語句。函數聲明不是語句。
~~~js
// bad
if (currentUser) {
function test() {
console.log('Nope.');
}
}
// good
let test;
if (currentUser) {
test = () => {
console.log('Yup.');
};
}
~~~
## 7.5 永遠不要把參數命名為 arguments。這將取代原來函數作用域內的 arguments 對象。
~~~js
// bad
function nope(name, options, arguments) {
// ...stuff...
}
// good
function yup(name, options, args) {
// ...stuff...
}
~~~
## 7.6 不要使用 arguments。可以選擇 rest 語法 ... 替代。
解釋：為什么？使用 > ...> 能明確你要傳入的參數。另外 rest 參數是一個真正的數組，而 > arguments> 是一個類數組。
~~~js
// bad
function concatenateAll() {
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
// good
function concatenateAll(...args) {
return args.join('');
}
~~~
## 7.7 直接給函數的參數指定默認值，不要使用一個變化的函數參數。
~~~js
// really bad
function handleThings(opts) {
// 不！我們不應該改變函數參數。
// 更加糟糕: 如果參數 opts 是 false 的話，它就會被設定為一個對象。
// 但這樣的寫法會造成一些 Bugs。
//（譯注：例如當 opts 被賦值為空字符串，opts 仍然會被下一行代碼設定為一個空對象。）
opts = opts || {};
// ...
}
// still bad
function handleThings(opts) {
if (opts === void 0) {
opts = {};
}
// ...
}
// good
function handleThings(opts = {}) {
// ...
}
~~~
## 7.8 直接給函數參數賦值時需要避免副作用。
解釋：為什么？因為這樣的寫法讓人感到很困惑。
~~~js
var b = 1;
// bad
function count(a = b++) {
console.log(a);
}
count(); // 1
count(); // 2
count(3); // 3
count(); // 3
~~~
## 8.1 當你必須使用函數表達式（或傳遞一個匿名函數）時，使用箭頭函數符號。
解釋：為什么?因為箭頭函數創造了新的一個 > this> 執行環境（譯注：參考 > Arrow functions - JavaScript | MDN> 和 > ES6 arrow functions, syntax and lexical scoping> ），通常情況下都能滿足你的需求，而且這樣的寫法更為簡潔。
~~~js
// bad
[1, 2, 3].map(function (x) {
return x * x;
});
// good
[1, 2, 3].map((x) => {
return x * x;
});
~~~
## 8.2 如果一個函數適合用一行寫出并且只有一個參數，那就把花括號、圓括號和 return 都省略掉。如果不是，那就不要省略。
解釋：為什么？語法糖。在鏈式調用中可讀性很高。為什么不？當你打算回傳一個對象的時候。
~~~js
// good
[1, 2, 3].map(x => x * x);
// good
[1, 2, 3].reduce((total, n) => {
return total + n;
}, 0);
~~~
## 9.1 總是使用 class。避免直接操作 prototype 。
解釋：為什么? 因為 class 語法更為簡潔更易讀
~~~js
// bad
function Queue(contents = []) {
this._queue = [...contents];
}
Queue.prototype.pop = function() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
// good
class Queue {
constructor(contents = []) {
this._queue = [...contents];
}
pop() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
}
~~~
## 9.2 使用 extends 繼承。
解釋：為什么？因為 extends 是一個內建的原型繼承方法并且不會破壞instanceof 。
~~~js
// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
return this._queue[0];
}
// good
class PeekableQueue extends Queue {
peek() {
return this._queue[0];
}
}
~~~
## 9.3 方法可以返回 this 來幫助鏈式調用。
~~~js
// bad
Jedi.prototype.jump = function() {
this.jumping = true;
return true;
};
Jedi.prototype.setHeight = function(height) {
this.height = height;
};
const luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20); // => undefined
// good
class Jedi {
jump() {
this.jumping = true;
return this;
}
setHeight(height) {
this.height = height;
return this;
}
}
const luke = new Jedi();
luke.jump()
.setHeight(20);
~~~
## 9.4 可以寫一個自定義的 toString() 方法，但要確保它能正常運行并且不會引起副作用。
~~~js
class Jedi {
constructor(options = {}) {
this.name = options.name || 'no name';
}
getName() {
return this.name;
}
toString() {
return `Jedi - ${this.getName()}`;
}
}
~~~
## 10.1 總是使用模組 (import/export) 而不是其他非標準模塊系統。你可以編譯為你喜歡的模塊系統。
解釋：為什么？模塊就是未來，讓我們開始邁向未來吧
~~~js
// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;
// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;
// best
import { es6 } from './AirbnbStyleGuide';
export default es6;
~~~
## 10.2 不要使用通配符 import。
解釋：why？這樣能確保你只有一個默認 export。
~~~js
// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';
// good
import AirbnbStyleGuide from './AirbnbStyleGuide';
~~~
## 10.3 不要從 import 中直接 export。
解釋：雖然一行代碼簡潔明了，但讓 import 和 export 各司其職讓事情能保持一致
~~~js
// bad
// filename es6.js
export { es6 as default } from './airbnbStyleGuide';
// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;
~~~
## 11.1 不要使用 iterators。使用高階函數例如 map() 和 reduce() 替代 for-of。
解釋：why？這加強了我們不變的規則。處理純函數的回調值更易讀，這比它帶來的副作用更重要
~~~js
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;
~~~
## 12.1 使用 . 來訪問對象的屬性。
~~~js
const luke = { jedi: true, age: 28, };
// bad
const isJedi = luke['jedi'];
// good
const isJedi = luke.jedi;
~~~
## 12.2 當通過變量訪問屬性時使用中括號 []。
~~~
const luke = { jedi: true, age: 28, };
function getProp(prop) { return luke[prop]; }
const isJedi = getProp('jedi');
~~~
## 13.1 一直使用 const 來聲明變量，如果不這樣做就會產生全局變量。我們需要避免全局命名空間的污染。地球隊長已經警告過我們了。
（譯注：全局，global 亦有全球的意思。地球隊長的責任是保衛地球環境，所以他警告我們不要造成「全球」污染。）
~~~js
// bad
superPower = new SuperPower();
// good
const superPower = new SuperPower();
~~~
## 13.2 使用 var 聲明每一個變量。
解釋：為什么？增加新變量將變的更加容易，而且你永遠不用再擔心調換錯 ; 跟 ,
~~~js
// bad
const items = getItems(),
goSportsTeam = true,
dragonball = 'z';
// bad
// (compare to above, and try to spot the mistake)
const items = getItems(),
goSportsTeam = true;
dragonball = 'z';
// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';
~~~
## 13.3 將所有的 const 和 let 分組
解釋：為什么？當你需要把已賦值變量賦值給未賦值變量時非常有用
~~~js
// bad
let i, len, dragonball,
items = getItems(),
goSportsTeam = true;
// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;
// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;
~~~
## 13.4 在你需要的地方給變量賦值，但請把它們放在一個合理的位置。
解釋：為什么？ let 和 const 是塊級作用域而不是函數作用域
~~~js
// good
function() {
test();
console.log('doing stuff..');
//..other stuff..
const name = getName();
if (name === 'test') {
return false;
}
return name;
}
// bad - unnecessary function call
function(hasName) {
const name = getName();
if (!hasName) {
return false;
}
this.setFirstName(name);
return true;
}
// good
function(hasName) {
if (!hasName) {
return false;
}
const name = getName();
this.setFirstName(name);
return true;
}
~~~
## 14.1 var 聲明會被提升至該作用域的頂部，但它們賦值不會提升。
let 和 const 被賦予了一種稱為「暫時性死區（Temporal Dead Zones, TDZ）」的概念。
這對于了解為什么 type of 不再安全相當重要。
~~~js
// 我們知道這樣運行不了 // （假設 notDefined 不是全局變量）
function example() { console.log(notDefined); // => throws a ReferenceError }
// 由于變量提升的原因， // 在引用變量后再聲明變量是可以運行的。
// 注：變量的賦值 true 不會被提升。
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;
}
~~~
## 14.2 匿名函數表達式的變量名會被提升，但函數內容并不會。
~~~js
function example() {
console.log(anonymous); // => undefined
anonymous(); // => TypeError anonymous is not a function
var anonymous = function() { console.log('anonymous function expression'); };
}
~~~
## 14.3 函數聲明的名稱和函數體都會被提升。
~~~js
function example() {
superPower(); // => Flying
function superPower() { console.log('Flying'); }
}
~~~
## 15.1 優先使用 === 和 !== 而不是 == 和 !=
## 15.2 條件表達式例如 if 語句通過抽象方法 ToBoolean 強制計算它們的表達式并且總是遵守下面的規則：
對象 被計算為 true Undefined 被計算為 false Null 被計算為 false 布爾值 被計算為 布爾的值 數字 如果是 +0、-0、或 NaN 被計算為 false, 否則為 true 字符串 如果是空字符串 '' 被計算為 false，否則為 true 15.3 使用簡寫。
~~~
// bad
if (name !== '') { // ...stuff... }
// good
if (name) { // ...stuff... }
// bad
if (collection.length > 0) { // ...stuff... }
// good
if (collection.length) { // ...stuff... }
~~~
## 16.1 使用大括號包裹所有的多行代碼塊。
~~~js
// 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;
}
~~~
## 16.2 如果通過 if 和 else 使用多行代碼塊，把 else 放在 if 代碼塊關閉括號的同一行。
~~~
// bad
if (test) {
thing1();
thing2();
}
else {
thing3();
}
// good
if (test) {
thing1();
thing2();
} else {
thing3();
}
~~~
## 17.1 使用 /** ... */ 作為多行注釋。包含描述、指定所有參數和返回值的類型和值。
~~~
// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {
// ...
return element;
}
// good
/**
* make() returns a new element
* based on the passed-in tag name
*/
function make(tag) {
// ...
return element;
}
~~~
## 17.2 使用 // 作為單行注釋。在評論對象上面另起一行使用單行注釋。在注釋前插入空行。
~~~
// bad
const active = true; // is current tab
// good
// is current tab
const active = true;
// bad
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
const type = this.type || 'no type';
return type;
}
// good
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
const type = this.type || 'no type';
return type;
}
// also good
function getType() {
// set the default type to 'no type'
const type = this.type || 'no type';
return type;
}
~~~
## 17.3 給注釋增加 FIXME 或 TODO 的前綴可以幫助其他開發者快速了解這是一個需要復查的問題，或是給需要實現的功能提供一個解決方式。這將有別于常見的注釋，因為它們是可操作的。 使用 FIXME -- need to figure this out 或者 TODO -- need to implement。
## 17.4 使用 // FIXME: 標注問題。
~~~
class Calculator extends Abacus {
constructor() {
super();
// FIXME: shouldn’t use a global here
total = 0;
}
}
~~~
## 17.5 使用 // TODO: 標注問題的解決方式。
~~~
class Calculator extends Abacus {
constructor() {
super();
// TODO: total should be configurable by an options param
this.total = 0;
}
}
~~~
## 18.1 使用 2 個空格作為縮進。
~~~
// bad
function foo() {
????let name;
}
// bad
function bar() {
?let name;
}
// good
function baz() {
??let name;
}
~~~
## 18.2 在花括號前放一個空格。
~~~
// 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',
});
~~~
## 18.3 在控制語句（if、while 等）的小括號前放一個空格。在函數調用及聲明中，不在函數的參數列表前加空格。
~~~
// bad
if(isJedi) {
fight ();
}
// good
if (isJedi) {
fight();
}
// bad
function fight () {
console.log ('Swooosh!');
}
// good
function fight() {
console.log('Swooosh!');
}
~~~
## 18.4 使用空格把運算符隔開。
~~~
// bad
const x=y+5;
// good
const x = y + 5;
~~~
## 18.5 在文件末尾插入一個空行。
## 18.5 在使用長方法鏈時進行縮進。使用前面的點 . 強調這是方法調用而不是新語句。
~~~
// 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);
~~~
## 19.1 行首逗號：不需要。
~~~
// 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',
};
~~~
## 19.2 增加結尾的逗號: 需要。
解釋：這會讓 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',
];
~~~
## 20.1使用分號
~~~
// bad
(function() { const name = 'Skywalker' return name })()
// good
(() => { const name = 'Skywalker'; return name; })();
~~~
## 21.1 在語句開始時執行類型轉換。
## 21.2 字符串：
~~~
// => this.reviewScore = 9;
// bad
const totalScore = this.reviewScore + '';
// good
const totalScore = String(this.reviewScore);
~~~
## 21.3 對數字使用 parseInt 轉換，并帶上類型轉換的基數。
~~~
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);
~~~
## 21.4 如果因為某些原因 parseInt 成為你所做的事的瓶頸而需要使用位操作解決性能問題時，留個注釋說清楚原因和你的目的。
~~~
// good
/**
使用 parseInt 導致我的程序變慢，
改成使用位操作轉換數字快多了。
*/
const val = inputValue >> 0;
~~~
## 21.5注: 小心使用位操作運算符。數字會被當成 64 位值，但是位操作運算符總是返回 32 位的整數（參考）。位操作處理大于 32 位的整數值時還會導致意料之外的行為。關于這個問題的討論。最大的 32 位整數是 2,147,483,647：
~~~
2147483647 >> 0; // => 2147483647
2147483648 >> 0; // => -2147483648
2147483649 >> 0; // => -2147483647
~~~
## 21.6 布爾:
~~~
const age = 0;
// bad
const hasAge = new Boolean(age);
// good
const hasAge = Boolean(age);
// best
const hasAge = !!age;
~~~
## 22.1 避免單字母命名。命名應具備描述性。
~~~
// bad
function q() {
// ...
}
// good
function query() {
// ...
}
~~~
## 22.2 使用駝峰式命名對象、函數和實例。
~~~
// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}
~~~
## 22.3 使用帕斯卡式命名構造函數或類。
~~~
// 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',
});
~~~
## 22.4 使用下劃線 _ 開頭命名私有屬性。
~~~
// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';
// good
this.firstName = 'Panda';
~~~
## 22.5 別保存 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);
};
}
~~~
## 22.6 如果你的文件只輸出一個類，那你的文件名必須和類名完全保持一致。
~~~
// 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';
~~~
## 22.7 當你導出默認的函數時使用駝峰式命名。你的文件名必須和函數名完全保持一致。
~~~
function makeStyleGuide() { }
export default makeStyleGuide;
~~~
## 22.8 當你導出單例、函數庫、空對象時使用帕斯卡式命名。
~~~
const AirbnbStyleGuide = { es6: { } };
export default AirbnbStyleGuide;
~~~
## 23.1 屬性的存取函數不是必須的。
## 23.2 如果你需要存取函數時使用 getVal() 和 setVal('hello')。
~~~
// bad
class Dragon {
get age() {
// ...
}
set age(value) {
// ...
}
}
// good
class Dragon {
getAge() {
// ...
}
setAge(value) {
// ...
}
}
~~~
## 23.3 如果屬性是布爾值，使用 isVal() 或 hasVal()。
~~~
// bad
if (!dragon.age()) {
return false;
}
// good
if (!dragon.hasAge()) {
return false;
}
~~~
## 23.4 創建 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];
}
}
~~~
## 24.1 當給時間附加數據時（無論是 DOM 事件還是私有事件），傳入一個哈希而不是原始值。這樣可以讓后面的貢獻者增加更多數據到事件數據而無需找出并更新事件的每一個處理器
~~~
// 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
});
~~~
## 25.1 使用 $ 作為存儲 jQuery 對象的變量名前綴。
~~~
// bad
const sidebar = $('.sidebar');
// good
const $sidebar = $('.sidebar');
// good
const $sidebarBtn = $('.sidebar-btn');
~~~
## 25.2 緩存 jQuery 查詢。
~~~
// bad
function setSidebar() {
$('.sidebar').hide();
// ...
$('.sidebar').css({
'background-color': 'pink',
});
}
// good
function setSidebar() {
const $sidebar = $('.sidebar');
$sidebar.hide();
// ...
$sidebar.css({
'background-color': 'pink',
});
}
~~~
### 26.1 文件
[建議] JavaScript 文件使用無 BOM 的 UTF-8 編碼。
解釋：UTF-8 編碼具有更廣泛的適應性。BOM 在使用程序或工具處理文件時可能造成不必要的干擾。
[建議] 在文件結尾處，保留一個空行。
## 26.2-結構
[強制] 使用 2 個空格做為一個縮進層級，不允許使用 4 個空格 或 taB字符。
[強制] switch 下的 case 和 default 必須增加一個縮進層級。
~~~
// good
switch (variable) {
case '1':
// do...
break;
case '2':
// do...
break;
default:
// do...
}
~~~
## 26.2.2-空格
[強制] 二元運算符兩側必須有一個空格，一元運算符與操作對象之間不允許有空格。
~~~
var a = !arr.length;
a++;
a = b + c;
~~~
[強制] 用作代碼塊起始的左花括號 { 前必須有一個空格；關鍵字后，必須有一個空格。
~~~
if (condition) {
}
~~~
[強制] 在對象創建時，屬性中的 : 之后必須有空格，: 之前不允許有空格。
~~~
var obj = {
a: 1,
b: 2,
c: 3
};
~~~
[強制] 函數聲明、具名函數表達式、函數調用中，函數名和 ( 之間不允許有空格。
~~~
function funcName() {
}
var funcName = function funcName() {
};
funcName();
~~~
[強制] , 和 ; 前不允許有空格。如果不位于行尾，, 和 ; 后必須跟一個空格。
~~~
callFunc(a, B);
~~~
[強制] 在函數調用、函數聲明、括號表達式、屬性訪問、if / for / while / switch / catch 等語句中，() 和 [] 內緊貼括號部分不允許有空格
~~~
callFunc(param1, param2, param3);
needIncream && (variable += increament);
if (num > list.length) {
}
while (len--) {
}
~~~
[強制] 單行聲明的數組與對象，如果包含元素，{} 和 [] 內緊貼括號部分不允許包含空格。
解釋：聲明包含元素的數組與對象，只有當內部元素的形式較為簡單時，才允許寫在一行。元素復雜的情況，還是應該換行書寫。
~~~
var arr1 = [];
var arr2 = [1, 2, 3];
var obj1 = {};
var obj2 = {name: 'obj'};
var obj3 = {
name: 'obj',
age: 20,
sex: 1
};
~~~
[強制] 行尾不得有多余的空格。
## 26.2.3 換行
[強制] 每行控制在 120 個字符以內。
[建議] 在語句的行長度超過 120 時，根據邏輯條件合理縮進
解釋：超長的不可分割的代碼允許例外，比如復雜的正則表達式。長字符串不在例外之列
~~~
// 當函數調用時，如果有一個或以上參數跨越多行，應當每一個參數獨立一行。
// 這通常出現在匿名函數或者對象初始化等作為參數時，如 `setTimeout` 函數等。
setTimeout(
function () {
alert('hello');
},
200
);
// 三元運算符由3部分組成，因此其換行應當根據每個部分的長度不同，形成不同的情況。
let result = thisIsAVeryVeryLongCondition
? resultA : resultB;
let result = condition
? thisIsAVeryVeryLongResult
: resultB;
// 數組和對象初始化的混用，嚴格按照每個對象的 `{` 和結束 `}` 在獨立一行的風格書寫。
var array = [
{
// ...
},
{
// ...
}
];
~~~
[強制] 運算符處換行時，運算符必須在新行的行首。
~~~
// 較復雜的邏輯條件組合，將每個條件獨立一行，邏輯運算符放置在行首進行分隔，或將部分邏輯按邏輯組合進行分隔。
// 建議最終將右括號 ) 與左大括號 { 放在獨立一行，保證與 `if` 內語句塊能容易視覺辨識。
if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
|| user.hasAuthority('delete-admin')
) {
// Code
}
var result = number1 + number2 + number3
+ number4 + number5;
~~~
[強制] 在函數聲明、函數表達式、函數調用、對象創建、數組創建、for 語句等場景中，不允許在 , 或 ; 前換行。
~~~
var obj = {
a: 1,
b: 2,
c: 3
};
foo(
aVeryVeryLongArgument,
anotherVeryLongArgument,
callback
);
~~~
[建議] 不同行為或邏輯的語句集，使用空行隔開，更易閱讀。
~~~
function setStyle(element, property, value) {
if (element == null) {
return;
}
element.style[property] = value;
};
~~~
[建議] 對于 if...else...、try...catch...finally 等語句，推薦使用在 } 號后添加一個換行 的風格，使代碼層次結構更清晰，閱讀性更好。
~~~
if (condition) {
// some statements;
}
else {
// some statements;
}
try {
// some statements;
}
catch (ex) {
// some statements;
}
~~~
## 26.2.4 語句
[強制] 不得省略語句結束的分號。
[強制] 在 if / else / for / do / while 語句中，即使只有一行，也不得省略塊 {...}。
~~~
if (condition) {
callFunc();
}
~~~
[強制] 函數定義結束不允許添加分號。
~~~
function funcName() {
}
// 如果是函數表達式，分號是不允許省略的。
var funcName = function () {
};
~~~
[強制] IIFE 必須在函數表達式外添加 (，非 IIFE 不得在函數表達式外添加 (。
解釋：IIFE = Immediately-Invoked Function Expression
能夠讓代碼在閱讀的一開始就能判斷函數是否立即被調用，進而明白接下來代碼的用途。而不是一直拖到底部才恍然大悟。
~~~
var task = (function () {
// Code
return result;
})();
var func = function () {
};
~~~
## 26.3-命名
[強制] 變量 使用 Camel命名法。
~~~
var loadingModules = {};
~~~
[強制] 常量 使用 全部字母大寫，單詞間下劃線分隔 的命名方式。
~~~
var HTML_ENTITY = {};
~~~
[強制] 函數 使用 Camel命名法。
~~~
function stringFormat(source) {
}
~~~
[強制] 函數的 參數 使用 Camel命名法。
~~~
function hear(theBells) {
}
~~~
[強制] 類 使用 Pascal命名法
~~~
function TextNode(options) {
}
~~~
[強制] 類的 方法 / 屬性 使用 Camel命名法。
~~~
function TextNode(value, engine) {
this.value = value;
this.engine = engine;
}
TextNode.prototype.clone = function () {
return this;
};
~~~
[強制] 枚舉變量 使用 Pascal命名法，枚舉的屬性 使用 全部字母大寫，單詞間下劃線分隔 的命名方式。
~~~
var TargetState = {
READING: 1,
READED: 2,
APPLIED: 3,
READY: 4
};
~~~
[強制] 命名空間 使用 Camel命名法。
~~~
equipments.heavyWeapons = {};
~~~
[強制] 由多個單詞組成的縮寫詞，在命名中，根據當前命名法和出現的位置，所有字母的大小寫與首字母的大小寫保持一致。
~~~
function XMLParser() {
}
function insertHTML(element, html) {
}
var httpRequest = new HTTPRequest();
~~~
[建議] boolean 類型的變量使用 is 或 has 開頭。
~~~
let isReady = false;
let hasMoreCommands = false;
~~~
- 說明
- Python編程規范
- Python風格規范
- Python語言規范
- Java編程規范
- 一、命名約定
- 二、常量定義
- 三、格式約定
- 四、OOP約定
- 五、集合處理
- 六、并發控制
- 七、控制語句
- 八、注釋約定
- 九、異常日志
- 十、日志約定
- Android開發規范
- 前端開發規范
- HTML
- JavaScript
- CSS
- MySQL約定
- 一、基本規范
- 二、庫表設計規范
- 三、字段設計規范
- 四、索引規范
- 五、SQL設計規范
- 六、業務字段命名規范
- 開發安全約定
- 一、代碼安全
- 二、移動開發安全
- 三、服務器安全
- 四、安全意識
- 版本管理
- Git使用規范
- 技術實踐及可視化
- 一、Code Review
- 二、單元測試
- 三、自動化測試
- 四、技術債
- 五、CI
- IOS開發規范