1. 块级作用域
1.1. let取代var,let可以完全取代var,因为两者语义相同,且let没有副作用:
var会注册全局变量;
var会存在变量提升;
1.2. let和const之间,优先使用const。原因:
const可以提醒别人,这个变量不应该改变;
const符合函数式编程思想,运算不改变值,只新建值;
Javascript编译器会对const进行优化,效率更高;
2. 字符串
2.1. 静态字符串一律使用单引号,不使用双引号。
const a = ‘football’;
2.2. 动态字符串一律使用反引号(字符串拼接)。
const a = `foot${ballName}`
3. 结构赋值
3.1. 使用数组成员时,优先使用解构赋值:
const arr = [1, 2, 3, 4];
const [first, second] = arr;
3.2. 函数参数如果是对象,优先使用解构赋值:
// good
function getFullName (obj) {
const {firstname, lastname} = obj;
}
// best
function getFullName ({firstname, lastname}) {
}
3.3. 函数返回结果,优先使用对象解构赋值,避免数组解构赋值:
function getFullName () {
return {firstname, lastname};
}
4. 对象
4.1. 单行定义的对象,最后一个成员不要逗号;多行定义的对象,最后一个成员要有逗号:
const a = {a: 1, b: 2};
const a = {
a: 1,
b: 2,
}
4.2. 对象尽量(不强制)静态化,如果需要添加新属性时,用Object.assign方法:
const a = {a: 1};
Object.assign(a, {b: 2});
4.3. 如果属性名是动态的,创建时使用属性表达式定义:
const a = {
a: 1,
b: 2,
[getName()]: true,
};
4.4. 对象的定义尽量采用简洁表达法:
const a = {
a,
b,
getName() {
return ‘hello’;
},
};
5. 数组
5.1. 使用扩展运算符(。。。)复制数组:
const items = [1, 2, 3];
const myCopy = [...items];
5.2. 使用Array.from方法将类数组对象转化成数组:
const a = {0: ‘hi’, 1: ‘hello’};
const b = Array.from(a);
6. 函数
6.1. 立即执行函数写成箭头函数形式:
(() => {
console.log(‘Hello’);
})();
6.2. 使用函数表达式的场合,要使用箭头函数(带{}体的箭头函数,参数要有括号;反之,不要有括号):
// good
[1, 2, 3].map((x) => {
return x + 1;
});
// best
[1, 2, 3].map(x => x + 1);
6.3. 箭头函数不应再用self、_this、that绑定this对象:
// bad
const that/_this/self = this;
6.4. 不要再使用arguments参数集合,用扩展运算符(。。。)代替:
function myFunc (。。。args) {
return args.join(‘’);
}
6.5. 在参数定义时,设置参数的默认值:
function myFunc (name, sex = ‘female’, skills = {}, {option = false} = {}) {
// …
}
7. Map结构
7.1. 如果只是需要key:value的数据结构,建议使用Map,因为Map有更好的遍历机制:
let map = new Map(arr);
for (let key of map.keys()) {
console.log(key);
}
for (let value of map.values()) {
console.log(value);
}
for (let [key, value] of map.entries()) {
console.log(key, value);
}
8. Class
8.1. 总是用Class取代需要prototype的操作。因为Class的写法更简洁,更易于理解。
// Class的用法这里就不详细介绍了,可以自己去查。
9. 模块
9.1. Module是JS的模块的标准写法,要坚持使用。使用import取代require:
// bad
const moduleA = require(‘moduleA’);
const func1 = moduleA.func1;
const func2 = moduleA.func2;
// good
import {func1, func2} from ‘moduleA’;
9.2. 使用export代替modules.exports
// bad
module.exports = Breadcrumbs;
// good
export default Beadcrumbs;
9.3. 如果模块只有一个输出值,就使用export default;如果有多个输出值,就不用使用export default;
9.4. 不要在模块输入中使用通配符,因为这样可以确保模块中有一个默认输出(export default)。
// bad
import * as myObject ‘./importModule’;
// good
import myObject from ‘./importModule’;
10. Eslint规范
ESLint是一个语法规则和代码风格的检查工具。可以保准写出的语法正确、风格统一。
vue-cli的脚手架已经集成eslint,并且安装了Airbnb语法风格,请用自己的编辑器配置根目录下的.eslintrc.js文件。如果遇到令人讨厌的规范,可以适当在此文件中配置个性化风格。
另外package.json里也有lint的命令用来检查代码规范。