ES6代码规范(整理)

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// 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

阿里员工前端规范

es6参考标准