代码规范这是看的Airbnb的,做一些总结。项目中文版地址是 https://github.com/lin-123/javascript
1、使用const和let代替var
2、创建对象的时候使用{},且所有属性都写在对象里,不要在外面。
3、用对象方法简写,如
const atom = {
value: 1,
// 对象的方法
addValue(value) {
return atom.value + value;
},
};
4、属性值简写,且缩写的放在对象属性的前面。如
test='123'
const obj={
test //相当于test:test
a:'1234'
b:'222'
c:'3w33'
}
5、不要直接调用Object.prototype上的方法,如hasOwnProperty, propertyIsEnumerable, isPrototypeOf。使用call,如
Object.prototype.hasOwnProperty.call(object, key)
6、对象浅拷贝时,更推荐使用扩展运算符(就是…运算符),而不是Object.assign。获取对象指定的几个属性时,用对象的rest解构运算符(…)更好。
// good es6扩展运算符 ...
const original = { a: 1, b: 2 };
// 浅拷贝
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
// rest 赋值运算符
const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
7、创建数组的时候直接用[],var arr=[]
8、使用…浅复制数组
const arr=[1,2,3]
const copyArr=[...arr]
9、用 … 运算符而不是Array.from来将一个可迭代的对象转换成数组。
const foo = document.querySelectorAll('.foo');
// good
const nodes = Array.from(foo);
// best
const nodes = [...foo];
10、用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);
11、使用Array.from 而不是 … 运算符去做map遍历。 因为这样可以避免创建一个临时数组。
// bad
const baz = [...foo].map(bar);
// good
const baz = Array.from(foo, bar);
12、回调函数要有返回值,加return,除非是只有一行的可以不用return
13、多使用解构赋值
// 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}`;
}
const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;
14、多个返回值用对象的解构,而不是数据解构。
Why? 你可以在后期添加新的属性或者变换变量的顺序而不会打破原有的调用
// bad
function processInput(input) {
// 然后就是见证奇迹的时刻
return [left, right, top, bottom];
}
// 调用者需要想一想返回值的顺序
const [left, __, top] = processInput(input);
// good
function processInput(input) {
// oops, 奇迹又发生了
return { left, right, top, bottom };
}
// 调用者只需要选择他想用的值就好了
const { left, top } = processInput(input);
15、String使用单引号,而且字数多不用隔断。
16、使用字符串模板,如
function name(name){
return `hello ${name} `
}
17、使用函数表达式代替函数声明
// bad
function foo() {
// ...
}
// bad
const foo = function () {
// ...
};
// good
// lexical name distinguished from the variable-referenced invocation(s)
// 函数表达式名和声明的函数名是不一样的
const short = function longUniqueMoreDescriptiveLexicalFoo() {
// ...
};
18、不要使用arguments,用rest语法…代替。 eslint: prefer-rest-params
Why? ...明确你想用那个参数。而且rest参数是真数组,而不是类似数组的arguments
// bad
function concatenateAll() {
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
// good
function concatenateAll(...args) {
return args.join('');
}
19、扩展运算符很重要,需熟练运用,如
new Date(...[2016, 8, 5]);
20、箭头函数要熟练运用,主要原因在于它的this指向外层,而且更加简洁。
21、如果函数体由一个没有副作用的表达式语句组成,删除大括号和return。
[1, 2, 3].map(number => `A string containing the ${number}.`);
22、使用class和constructor,extends…
23、做幂运算时用幂操作符 **
2**10 // 即Math.pow(2,10)
24、不要用遍历器。用JavaScript高级函数代替for-in、 for-of
Why? 这强调了我们不可变的规则。 处理返回值的纯函数比副作用更容易。
Why? 用数组的这些迭代方法: map() / every() / filter() / find() / findIndex() / reduce() / some() / ... , 用对象的这些方法 Object.keys() / Object.values() / Object.entries() 去产生一个数组, 这样你就能去遍历对象了。
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;
// bad
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
increasedByOne.push(numbers[i] + 1);
}
// good
const increasedByOne = [];
numbers.forEach(num => increasedByOne.push(num + 1));
// best (keeping it functional)
const increasedByOne = numbers.map(num => num + 1);
25、 不要使用一元自增自减运算符(++, –),使用+=1
26、布尔值用缩写,而字符串和数字要明确比较对象,还有使用===和!==
// bad
if (isValid === true) {
// ...
}
// good
if (isValid) {
// ...
}
// bad
if (name) {
// ...
}
// good
if (name !== '') {
// ...
}
// bad
if (collection.length) {
// ...
}
// good
if (collection.length > 0) {
// ...
}
27、在case和default分句里用大括号创建一块包含语法声明的区域(e.g. let, const, function, and class).
28、如果 if 语句中总是需要用 return 返回, 那后续的 else 就不需要写了。 if 块中包含 return, 它后面的 else if 块中也包含了 return, 这个时候就可以把 return 分到多个 if 语句块中。
29、当你的控制语句(if, while 等)太长或者超过最大长度限制的时候, 把每一个(组)判断条件放在单独一行里。 逻辑操作符放在行首。
if (
foo === 123
&& bar === 'abc'
) {
thing1();
}
30、多行注释使用
/**
* 123
* 234
*/
其余还有一些空格,规范之类的,具体还是看原址。