原文链接:Airbnbs js代码优化建议
1.类型
1.1 当目标浏览器或环境可能不支持symbol类和bigint类时，请避免使用这两个数据类型；
2.定义
2.1 使用let或者const来定义变量或常量而避免使用var，因为var没有块级作用域，且会造成声明提前，导致难以阅读和理解代码；
3.对象
3.1 声明对象时，使用缩写 var obj={} 而不是 var obj=new Object();
3.2 在创建对象时，尽量不使用强行赋值，把所有的属性和方法都写进去;
3.3 对象的方法使用简写而不使用全写，如:
// bad
const atom = {
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
value: 1,
addValue(value) {
return atom.value + value;
},
};
3.4 当属性名和属性值地变量同名时，使用缩写;
3.5 将所有使用缩写的属性写在一起，并都将其置于对象的最前面;
3.6 只给使用-连接的属性名添加单引号;
3.7 使用对象的原型对象中的方法来对对象进行操作，而不是直接调用对象中的该方法，这是为了避免该对象重写了该方法，或该对象是一个彻底的空对象;
// bad
console.log(object.hasOwnProperty(key));
// good
console.log(Object.prototype.hasOwnProperty.call(object, key));
// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
console.log(has.call(object, key));
/* or */
import has from 'has'; // https://www.npmjs.com/package/has
console.log(has(object, key));
3.8 使用对象解构来进行浅拷贝
// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 });// 这会更改原对象
delete copy.a; // so does this
// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
4.数组
4.1 使用简写来定义数组 var arr=[]而不是var arr=new Array();
4.2 使用arr.push替代arr[length]=1来对数组进行扩充;
4.3 使用数组解构来拷贝数组;
// bad
const len = items.length;
const itemsCopy = [];let i;
for (i = 0; i < len; i += 1) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];
4.4 将一个可迭代对象转换为数组，使用数组解构而不是Array.from();
const foo = document.querySelectorAll('.foo');
// good
const nodes = Array.from(foo);
// best
const nodes = [...foo];
4.5 将一个类数组对象转化为数组，使用Array.from();
const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };
// bad
const arr = Array.prototype.slice.call(arrLike);
// good
const arr = Array.from(arrLike);
4.6 使用Array.from 而不是数组解构来遍历可迭代对象
// bad
const baz = [...foo].map(bar);
// good
const baz = Array.from(foo, bar);
4.7 使用map等有返回值地api时，记得return，能缩写就使用缩写
4.8 数组套对象时，请勤用换行
5.解构
5.1 当方法需要使用到对象中多个属性时，使用对象解构
// bad
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
return `${firstName} ${lastName}`;
}
// good
function getFullName(user) {
const { firstName, lastName } = user;
return `${firstName} ${lastName}`;
}
// best
function getFullName({ firstName, lastName }) {
return `${firstName} ${lastName}`;
}
5.2 常用数组解构
const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;
5.3 当有多个返回值时，使用对象解构而不是数组解构，因为对象解构允许不相邻;
// 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, top } = processInput(input);
6.字符串
6.1 使用单引号来定义字符串
// bad
const name = "Capt. Janeway";
// bad - 可以,但没必要
const name = `Capt. Janeway`;
// good
const name = 'Capt. Janeway';
6.2 过长的字符串不建议使用拼接
6.3 能用模板字符串就不用字符串拼接
6.4 别用eval,bug多
6.5 不要滥用转义字符
7.函数
7.1 使用函数全程来声明函数,函数简称来接住函数
// bad 不用它是为了阻止声明提前
function foo() {
// ...
}
// bad 不用它是为了防止函数名过长
const foo = function () {
// ...
};
// good 不能理解
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() {
// ...
};
7.2 将一段立即调用的代码写在匿名函数中,并执行自调用;
7.3 不要在非块级作用域(比如if和while)中声明函数,如果要调用的话,使用命名函数;
7.4 Note: ECMA-262 defines a block as a list of statements. A function declaration is not a statement.
// bad
if (currentUser) {
function test() {
console.log('Nope.');
}
}
// good
let test;if (currentUser) {
test = () => {
console.log('Yup.');
};
}
7.5 不要用arguments作为形参的变量名
7.6 选用剩余参数...rest而不用arguments
7.7 使用默认参数而不是在函数体中写判断
7.8 不要使用带副作用的默认参数
var b = 1;// bad
function count(a = b++) {
console.log(a);
}
count(); // 1
count(); // 2
count(3); // 3
count(); // 3
7.9 默认参数写在所有参数最后面
7.10 不要使用构造函数来构造函数......听起来很诡异,意思是用构造函数来构造函数会使用eval,前面说过,这玩意bug多
7.11 多用格式化
7.12 不要直接操作参数
// bad
function f1(obj) {
obj.key = 1;
}
// good
function f2(obj) {
const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
}
7.13 不要重复给变量赋值(和上条差不多)
7.14 使用解构进行传参
// 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]);
7.15 多用格式化
8.箭头函数
8.1 当你想要内外的函数的this指向保持一致时,使用箭头函数
8.2 当函数体只有一句话时,省略大括号和return
8.3 如果返回的东西过多,请用大括号将其括起来
8.4 参数用括号括起来
8.5 避免箭头=>和小于等于<=以及大于等于>=混用,将后者包裹在括号内
9.类和构造函数
9.1 直接用class来构造类,避免直接操作原型对象,这是为了增加代可读性;
9.2 使用extends代替inherits来进行继承;
9.3 要用到this的方法应当定义在构造函数中,如果定义在原型对象里,会导致this指向window;
9.4 可以考虑重写toString方法,前提是它能用,而且不会产生什么副作用;
9.5 Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary.
// bad
class Jedi {
constructor() {}
getName() {
return this.name;
}
}
// bad
class Rey extends Jedi {
constructor(...args) {
super(...args);
}
}
// goodclass Rey extends Jedi {
constructor(...args) {
super(...args);
this.name = 'Rey';
}
}
9.6 不要在类中重复声明一个类成员,有重复的成员会默认选择最后一个,而且一般说来,有两个同名成员八成也许大概或者可能是你一定写了个bug
9.7 Class methods should use this or be made into a static method unless an external library or framework requires to use specific non-static methods. Being an instance method should indicate that it behaves differently based on properties of the receiver.
// bad
class Foo {
bar() {
console.log('bar');
}
}
// good - this is used
class Foo {
bar() {
console.log(this.bar);
}
}
// good - constructor is exempt
class Foo {
constructor() {
// ...
}
}
// good - static methods aren't expected to use this
class Foo {
static bar() {
console.log('bar');
}
}
10.模块
11.迭代器和生成器(暂时理解为替换for循环的数组遍历函数s)
11.1 使用js中的高阶函数forEach,map,reduce来替代for...of和for...in循环
11.2 因为生成器与ES5的兼容性不佳,因此现在不建议用
11.3 叫你不要用就不要用
12.属性
12.1 当获取属性时,使用obj.name而不是obj['name']
12.2 当需要获取的属性是用变量声明的,使用obj[变量名]来获取
12.3 使用**来替换Math.pow()来进行幂运算
13.变量
13.1 使用let和const替代var来声明变量
13.2 不要使用一个const或let来同时声明多个变量,多写几次
13.3 将你的变量声明写在一起,let和let一起,const和const一起
13.4 尽量让把变量的声明和使用放在一起
13.5 不要使用链式变量声明,如let a=b=c=5,这会导致生成全局变量
13.6 避免使用a++或a--,因为可能导致意外的情况,可以使用a += 1这种更具语义化的代码
13.7 避免在=之前出现换行,实在没办法,可以试试这种方法:
const foo = (
superLongLongLongLongLongLongLongLongFunctionName()
);
13.8 清除所有未使用的变量,包括声明之后没有下文的,只写的,我读我自己的,用不到的函数参数等等,因为这一般也是函数重写时的遗留问题,并且会给读代码的人造成困惑
14.变量/函数提升
14.1 var会造成函数和变量提升,这也就导致了typeof的不可靠
14.2 使用匿名函数声明的函数(var fn=function(){...})只提升其变量名,而不会提升函数本身
14.3 使用命名函数声明的函数(var fn=function a(){...})只提升其变量名,而不会提升函数名,也不会提升函数本身
14.4 使用function直接声明的函数会被整体提升
15.比较运算符&等于
15.1 使用===和!==以替代==和!=
15.2 条件表达式(比如if语句)会将奇特其他类型转换为boolean类,规则如下
- 对象会被视为true
- Undefined会被视为false
- Null 会被视为 false
- Booleans 略
- Numbers 当为 +0, -0, or NaN时false,否则为 true
- Strings 当为''的时候为false,否则为 true
- 数组无论为[]还是为[0]都是true
15.3 如果可以简写,直接简写,比如
var isValid=true;
// bad
if (isValid === true) {
// ...
}
// good
if (isValid) {
// ...
}
15.4 在switch-case语句中,将case语句中的内容用{}包裹起来
15.5 不建议对三目运算进行嵌套(我偏不)
15.6 避免滥用三目运算符,如:
// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;
// good
const foo = a || b;
const bar = !!c;
const baz = !c;
15.7 在做混合运算时,尽量将该括起来的括起来,反正,怎么易读怎么来
16.块级作用域
16.1 要用{},请换行,要么就不用
// bad
if (test)
return false;
// good
if (test) return false;
// good
if (test) {
return false;
}
16.2 如果你要用if...else...,将else和它前面的}写在同一行
16.3 这一条纯属闲的
17.控制声明
17.1 如果你if或者while后面的判断语句过长,请换行
17.2 不要使用&&或者||来做坏事(i refuse)
18.注释
没什么可说的
19.缩进
建议tabsize:2
20.其他
多用代码格式化