## 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开发规范