ES6提出了两个新的声明变量的命令：let 和 const
1. 建议不再使用var，而使用let 和const 。优先使用const。
//bad
var a = 1, b =2 , c = 3;
// good
const [a,b,c] = [1,2,3];2.静态字符串一律使用单引号或反引号，不建议使用双引号。动态字符使用反引号。
//bad
const a = "foobar";
const b = 'foo'+a+'bb';
// good
const a = 'foobar';
const b = `foo${a}bar`;3.优先使用解构赋值
const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;函数的参数如果是对象的成员，优先使用解构赋值。
// bad
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
}
// good
function getFullName(obj) {
const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {
}如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。
// bad
function processInput(input) {
return [left, right, top, bottom];
}
// good
function processInput(input) {
return { left, right, top, bottom };
}
const { left, right } = processInput(input);
5.对象的属性和方法尽量采用简洁表达法，这样易于描述和书写
// bad
var ref = 'some value';
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;
}
}
使用扩展运算符（…） 复制数组，使用Array.from 方法将类似数组的对象转为数组。
不在使用arguments （伪数组） 而是用…rest 运算符（真数组）。
学习链接：
Airbnb前端规范
比较合理的建议：（airbnb）
Object
// 它们允许您在一个地方定义一个对象的所有属性
// bad
function getKey(k){
return `a key named ${key}`
}
const obj = {
id:5,
name:'turbo'
};
obj[getKey('key')] = true;
// good
const obj = {
id:6,
name:'turbo',
[getKey('key)]:true,
}
使用对象方法缩写：
// bad
const atom = {
value:1,
addValue:function(val){
return atom.value + val;
}
};
// good
const atom = {
value:1,
addValue(val){
return atom.value +val
}
}// 描述尽可能短
const lukeSky = 'Luke sky';
// bad
const obj = {
lukeSky : lukeSky,
}
// good
const obj = {
lukeSky
}在对象声明的开头将您的简写属性分组 (写到一起)
const aa = 'aa';
const bb = 'bb';
// bad
const obj = {
a:1,
b:2,
bb,
c:3,
aa,
};
// good
const obj = {
aa,
bb,
a:1,
b:2,
c:3
}
只引用无效标识符的属性.因为：一般来说，我们认为它在主观上更容易阅读。它改进了语法高亮显示，并且更容易被许多js引擎优化。
const bad = {
'foo':3,
'bar':4,
'data-blah':5
}
const good = {
foo:3,
bar:4,
'data-blah':5
}对象copy 正确姿势
// very bad
const original = { a:1,b:2 };
const copy = Object.assign( original ,{ c:3 });
delete copy.a ; //
// bad
const original = { a:1,b:2 }
const copy = Object.assign( {},original,{ 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 }
Arrays
// 善于使用解构（…）
// bad
const len = items.length;
const itemsCopy = [];
let i;
for( i=0;i<len;i++ ){
itemsCopy = items[i];
}
// good
const itemsCopy = [...items];
// 把伪数组转成真数组
const nodes = [...foo];
// 对象写法的约束
// bad
const arr =[
[0,1],[2,3],[4,5],
]
const objectInArray = [{
id:1,
},{
id:2,
}]
const numberInArray = [
1,2
]
// good
const arr = [[0,1],[2,3],[4,5]];
const objectInArray = [
{
id : 1,
},
{
id : 2,
}
];
const numberInArray = [
1,
2
]
// 解构
// good
function getFullName(user){
const { firstName ,lastName } = user;
return `${firstName} ${ lastName }`;
}
// best
function getFullName({ firstName ,lastName }){
return `${firstName} ${lastName}`;
}
// best
const [first ,second ] = arr;
// good
function processInput(input){
return { left ,right,top,bottom };
}// Function
// bad
function concateAll(){
const args = Array.prototype.slice.call( arguments );
return args.join('');
}
// good
function concateAll(...args){
return args.join('');
}
// good opts = opts || {}
function handleThing(opts = {}){
}
// always put default param last
// bad
function handleThing(opts = {},name){
}
function handleThing(name,opts = {}){
}// Classes & Constructors 类的构造函数
//bad
function Queue(contents = []){
this.queue = [...contends];
}
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;
}
}// 模块 modules