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;