ES6编程风格
块级作用域
用let全面取代var
全局使用常量
// bad
var a=2,b=2,c=3
//best
const [a,b,c]=[1,2,3]
字符串
多用模板字符串
// bad
const a = "foobar";
const b = 'foo' + a + 'bar';
//best
const a="foobar"
const b=`foo${a}bar`//foofoobarbar
使用解构赋值
数组成员成对赋值时
const arr = [1, 2, 3, 4];
//bad
const first=arr[0]
const second=arr[1]
//best
const [first,second]=arr
函数的参数是对象的成员
// bad
function getFullName(obj) {
const firstName = obj.firstName;
const lastName = obj.lastName;
}
//good
function getFullName(obj) {
const { firstName, lastName } = obj;
}
//best
function getFullName({firstName, lastName}) {
}
函数多个返回值时,优先使用对象的解构.
不建议数组的解构,好处是以便后续添加和修改.
// bad
function processInput() {
return [left, right, top, bottom];
}
//good
function processInput() {
return {left, rigit, top, bottom}
}
对象
单行和多行写法
// bad
const a = { k1: v1, k2: v2, };
const b = {
k1: v1,
k2: v2
};
//good
const a = { k1: v1, k2: v2 };//单号不以逗号结尾
const b = {
k1: v1,
k2: v2,//多行以逗号结尾
}
静态化
// bad
const a = {};
a.x = 3;
//good
const a = {}
Object.assign(a, { x: 3 })//对象的合并方法
//或者下面写法
const a = { x: null }
a.x = 3
属性名是动态获取的,采用属性表达式定义
// bad
const obj = {
id: 5,
name: 'San Francisco',
};
obj[getKey('enabled')] = true;
//good
const obj={
id:5,
name:'San Francisco',
[getKey('enable')]:true
}
属性和方法名,使用简介写法
var ref = 'some value';
// bad
const atom = {
ref: ref,
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
ref,
value: 1,
addValue(value) {
return atom.value + value;
},
};
数组
使用扩展运算符拷贝数组
// bad
const len = items.length;
const itemsCopy = [];
for (let i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];
使用Array.from(对象),可以把伪数组或者类似数组的对象转换为真数组
//案例1
const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);
//案例2
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
//转成真数组
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
函数
使用箭头函数
// bad
[1, 2, 3].map(function (x) {
return x * x;
});
//best
[1, 2, 3].map(x => x * x) // [1, 4, 9]
箭头函数直接绑定this
// bad
const self = this;
const boundMethod = function(...params) {
return method.apply(self, params);
}
//best
const boundMethod=(...params)=>{method.apply(this,params)}
使用…arg代替arguments 变量
// bad
function concatenateAll1() {
console.log(arguments);//arguments对象
const args = Array.prototype.slice.call(arguments);//slice截取,得到args数组[1, 2, 3]
console.log(args);
return console.log(args.join(''));//字符串:123
;
}
// good
function concatenateAll2(...args) {
return console.log(args.join(''));//同样得到字符串:123
}
concatenateAll2(1,2,3)
使用默认值语法设置函数参数的默认值
// bad
function handleThings(opts) {
opts = opts || {};
}
// good
function handleThings(opts = {}) {
// ...
}
布尔值不可以直接作为参数,所有配置项都应该集中在一个对象，放在最后一个参数.
// bad
function divide1(a, b, option = false ) {
console.log(option);//true
}
// good
function divide2(a, b, { option = false }={}) {
//解释:第三个参数要传递对象,后面的={}代表第三个参数不传默认给一个空对象;里面option=false代表传递的对象有一个option属性,默认赋值为false
console.log(option);//true
}
// divide1(1,2,true);
divide2(1,2,{option:true});
class类
使用class类取代 prototype 的操作
// bad
function Queue1(contents = []) {
this._queue = [...contents];
}
Queue1.prototype.pop = function() {
const value = this._queue[0];
this._queue.splice(0, 1);//slice截取
return value;
}
// good
class Queue2 {
constructor(contents = []) {
this._queue = [...contents];
}
pop() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
}
console.log(new Queue1([1,2,3]).pop());//1
console.log(new Queue2([1,2,3]).pop());//1
使用继承
// good
class PeekableQueue extends Queue {
peek() {
return this._queue[0];
}
}
模块
使用es6导入导出
//es6导入
import { func1, func2 } from 'moduleA';
es6导出
import React from 'react';
class Breadcrumbs extends React.Component {
render() {
return <nav />;
}
};
export default Breadcrumbs;
模块小细节
不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一个默认输出（export default）
// bad
import * as myObject from './importModule';
// good
import myObject from './importModule';
如果模块默认输出一个函数，函数名的首字母应该小写。
function makeStyleGuide() {
}
export default makeStyleGuide;
如果模块默认输出一个对象，对象名的首字母应该大写。
const StyleGuide = {
es6: {
}
};
export default StyleGuide;