ES6中也要使用好严格的代码规范，助力你写出优雅的代码

经常使用约定

启用eslint

必需开启eslint检测, 且使用 standard规范检测，这样你们写出来的代码风格就能够保持一致

语法

类型规范

• 对于常量或不修改的变量声明使用const，对于只在当前做用域下有效的变量，应使用let，再也不使用var；
• 优先使用const；
• 将全部 const 变量放在一块儿，而后将全部 let 变量放在一块儿。

const foo = 2222

let foo1 = 222222
let bar = foo
bar = 93333
foo1 = 33333
复制代码

直接存取基本类型

• 字符串
• 数值
• 布尔类型
• null
• undefined

const foo = 1222;

let bar = foo;

bar = 9222222;

console.log(foo, bar);
复制代码

经过引用的方式存取复杂类型,对全部的引用使用 const

• 对象
• 数组
• 函数

const foo = [1, 2, 3, 10];

const bar = foo;

bar[0] = 90000;

复制代码

优先使用模板字符串,静态字符串一概使用单引号或反引号，不建议使用双引号。

//bad
 const a = "foobar";
 const b = 'foo'+a+'bb';

// good
const a = 'foobar';
const b = `foo${a}bar`;
复制代码

使用字面量语法建立数组

// bad
const items = new Array();

// good
const items = [];
复制代码

使用字面值建立对象

// bad

const item = new Object();

// good

const item = {};
复制代码

解构规范

优先使用解构赋值

const arr = [1, 2, 3, 4, 10];

// 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);
复制代码

解构语句中统一不使用圆括号

// bad
[(a)] = [11]; // a未定义
let { a: (b) } = {}; // 解析出错


// good
let [a, b] = [11, 22];
复制代码

使用对象属性值的简写

const aSkywalker = 'a Skywalker';

// bad

const obj = {

    aSkywalker: aSkywalker,

};

// good

const obj = {

    aSkywalker,

};
复制代码

在对象属性声明前把简写的属性分组

const a = 'Anakin Skywalker';

const b = 'a Skywalker';

// bad

const obj = {

    a: 1,

    b: 2,

    c: 3,

    d: 3,

    e: 4,

    z: 10,

};

// good

const obj = {

    a,

    b,

    c,

    d,

    e,

    f

};
复制代码

函数

使用函数声明而不是函数表达式

函数声明拥有函数名，在调用栈中更加容易识别。而且，函数声明会总体提高，而函数表达式只会提高变量自己。这条规则也能够这样描述，始终使用箭头函数来代替函数表达式。

// bad
const foo = function () {
};

// good
function foo() {
}
复制代码

绝对不要在一个非函数块（if，while，等等）里声明一个函数，把那个函数赋给一个变量。浏览器容许你这么作，可是它们解析不一样注：ECMA-262 把 块 定义为一组语句，函数声明不是一个语句。阅读 ECMA-262 对这个问题的说明

// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// good
if (currentUser) {
  var test = function test() {
    console.log('Yup.');
  };
}
复制代码

绝对不要把参数命名为 arguments, 这将会覆盖函数做用域内传过来的 arguments 对象

// bad
function nope(name, options, arguments) {
  // ...stuff...
}

// good
function yup(name, options, args) {
  // ...stuff...
}

复制代码

不要使用 arguments。能够选择 rest 语法 ... 替代。

使用 ... 能明确你要传入的参数。另外 rest 参数是一个真正的数组，而 arguments 是一个类数组。

// bad

function concatenateAll() {

    const args = Array.prototype.slice.call(arguments);

    return args.join('');

}

// good

function concatenateAll(...args) {

    return args.join('');

}
复制代码

使用函数参数默认值语法，而不是修改函数的实参

// really bad
function handleThings(opts) {
  opts = opts || {};
}

// still bad
function handleThings(opts) {
  if (opts === void 0) {
    opts = {};
  }
}

// good
function handleThings(opts = {}) {
  // ...
}
复制代码

箭头函数

当你必须使用函数表达式（或传递一个匿名函数）时，使用箭头函数符号。

// bad

[1, 2, 3].map(function (x) {

    return x * x;

});

// good

[1, 2, 3].map((x) => {

    return x * x;

});
复制代码

若是一个函数适合用一行写出而且只有一个参数，那就把花括号、圆括号和 return 都省略掉。若是不是，那就不要省略。

// good

[1, 2, 3].map(x => x * x);

// good

[1, 2, 3].reduce((total, n) => {

    return total + n;

}, 0);

复制代码

类

老是使用 class 关键字，避免直接修改 prototype，class 语法更简洁，也更易理解。

// bad
function Queue(contents = []) {
  this._queue = [...contents];
}
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;
  }
}
复制代码

定义类时，方法的顺序以下：

• constructor
• public get/set 公用访问器，set只能传一个参数
• public methods 公用方法，公用相关命名使用小驼峰式写法(lowerCamelCase)
• private get/set 私有访问器，私有相关命名应加上下划线 _ 为前缀
• private methods 私有方法

// good
class SomeClass {
  constructor() {
    // constructor
  }

  get aval() {
    // public getter
  }

  set aval(val) {
    // public setter
  }

  doSth() {
    // 公用方法
  }

  get _aval() {
    // private getter
  }

  set _aval() {
    // private setter
  }

  _doSth() {
    // 私有方法
  }
}
复制代码

若是不是class类，不使用new

// not good
function Foo() {

}
const foo = new Foo();

// good
class Foo {

}
const foo = new Foo();
复制代码

使用 extends 关键字来继承

这是一个内置的继承方式，而且不会破坏 instanceof 原型检查。

// bad
  const inherits = require('inherits');
  function PeekableQueue(contents) {
    Queue.apply(this, contents);
  }
  inherits(PeekableQueue, Queue);
  PeekableQueue.prototype.peek = function() {
    return this._queue[0];
  }

  // good
  class PeekableQueue extends Queue {
    peek() {
      return this._queue[0];
    }
  }
复制代码

模块

老是在非标准的模块系统中使用标准的 import 和 export 语法，咱们老是能够将标准的模块语法转换成支持特定模块加载器的语法。

推荐使用import和export来作模块加载

// bad

const AirbnbStyleGuide = require('./AirbnbStyleGuide');

module.exports = AirbnbStyleGuide.es6;

// ok

import AirbnbStyleGuide from './AirbnbStyleGuide';

export default AirbnbStyleGuide.es6;

// best

import { es6 } from './AirbnbStyleGuide';

export default es6;

复制代码

不要使用通配符 * 的 import，这样确保了一个模块只有一个默认的 export 项

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';
复制代码

不要直接从一个 import 上 export

虽然一行代码看起来更简洁，可是有一个明确的 import 和一个明确的 export 使得代码行为更加明确。

// bad
// filename es6.js
export default { es6 } from './airbnbStyleGuide';

// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;
复制代码

多变量要导出时应采用对象解构形式

// not good
export const a= 'a';
export const b= 'b';

// good
export const a= 'a';
export const b= 'b';

export default { a, b };
复制代码

导出单一一个类时，确保你的文件名就是你的类名

// file contents
class CheckB {
  // ...
}
module.exports = CheckB;

// in some other file
// bad
const checkB = require('./checkBox');

// bad
const checkB = require('./check_box');

// good
const checkB = require('./CheckB');
复制代码

导出一个默认小驼峰命名的函数时，文件名应该就是导出的方法名

function makeGuid() {
}

export default makeGuid;
复制代码

属性访问

使用点 . 操做符来访问常量属性

const a = {
  b: true,
  age: 28
};

// bad
const b = a['b'];

// good
const b = a.b;
复制代码

使用中括号[] 操做符来访问变量属性

var a = {
  b: true,
  age: 28
};

function getProps(prop) {
  return a[prop];
}

var b = getProps('b');
复制代码