# ECMAScript 6 规范

# 最佳原则

坚持制定好的代码规范。

无论团队人数多少，代码应该同出一门。

如果你想要为这个规范做贡献或觉得有不合理的地方，请联系架构设计组相关成员。

# ES6 基本规范

# 1、引用

对所有的引用使用 const ；不要使用 var；

为什么？这能确保你无法对引用重新赋值，也不会导致出现 bug 或难以理解。

// bad
var a = 1
var b = 2

// good
const a = 1
const b = 2

如果你一定需要可变动的引用，使用 let 代替 var；

为什么？因为 let 是块级作用域，而 var 是函数作用域。

// bad
var count = 1
if (true) {
  count += 1
}

// good, use the let.
let count = 1
if (true) {
  count += 1
}

注意 let 和 const 都是块级作用域；

// const 和 let 只存在于它们被定义的区块内。
{
  let a = 1
  const b = 1
}
console.log(a) // ReferenceError
console.log(b) // ReferenceError

# 2、对象

使用字面值创建对象；

// bad
const item = new Object()

// good
const item = {}

使用对象方法的简写；

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value
  },
}

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value
  },
}

使用对象属性值的简写；

const lukeSkywalker = 'Luke Skywalker'

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
}

// good
const obj = {
  lukeSkywalker,
}

# 3、数组

使用字面值创建数组；

// bad
const items = new Array()

// good
const items = []

向数组添加元素时使用 Arrary.push 替代直接赋值；

const someStack = []


// bad
someStack[someStack.length] = 'abracadabra'

// good
someStack.push('abracadabra')

使用拓展运算符 ... 复制数组；

// bad
const len = items.length
const itemsCopy = []
let i

for (i = 0 i < len i++) {
  itemsCopy[i] = items[i]
}

// good
const itemsCopy = [...items]

使用 Array.from 把一个类数组对象转换成数组；

const foo = document.querySelectorAll('.foo')
const nodes = Array.from(foo)

# 4、解构

使用解构存取和使用多属性对象；

// bad
function getFullName(user) {
  const firstName = user.firstName
  const lastName = user.lastName

  return `${firstName} ${lastName}`
}

// good
function getFullName(obj) {
  const { firstName, lastName } = obj
  return `${firstName} ${lastName}`
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`
}

对数组使用解构赋值；

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

// bad
const first = arr[0]
const second = arr[1]

// good
const [first, second] = arr

# 5、String字符处理

程序化生成字符串时，使用模板字符串代替字符串连接。

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?'
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join()
}

// good
function sayHi(name) {
  return `How are you, ${name}?`
}

# 6、箭头函数

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

为什么？因为箭头函数创造了新的一个 this 执行环境，通常情况下都能满足你的需求，而且这样的写法更为简洁。

什么时候不使用？如果你有一个相当复杂的函数，你或许可以把逻辑部分转移到一个函数声明上。

// bad
[1, 2, 3].map(function (x) {
  const y = x + 1
  return x * y
})

// good
[1, 2, 3].map((x) => {
  const y = x + 1
  return x * y
})

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

语法糖。在链式调用中可读性很高。

什么时候不使用？当你打算回传一个对象的时候。

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

// good
[1, 2, 3].reduce((total, n) => {
  return total + n
}, 0)

# 7、构造器

使用 class。避免直接操作 prototype；

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

用 extends 继承。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]
  }
}

方法可以返回 this 来帮助链式调用；

// bad
Jedi.prototype.jump = function() {
  this.jumping = true
  return true
}

Jedi.prototype.setHeight = function(height) {
  this.height = height
}

const luke = new Jedi()
luke.jump() // => true
luke.setHeight(20) // => undefined

// good
class Jedi {
  jump() {
    this.jumping = true
    return this
  }

  setHeight(height) {
    this.height = height
    return this
  }
}

const luke = new Jedi()

luke.jump()
  .setHeight(20)

# 8、函数参数

不要使用 arguments。可以选择 rest 语法 ... 替代；

// 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 是 false 的话，它就会被设定为一个对象。
  // 但这样的写法会造成一些 Bugs。
  //（译注：例如当 opts 被赋值为空字符串，opts 仍然会被下一行代码设定为一个空对象。）
  opts = opts || {}
  // ...
}

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

// good
function handleThings(opts = {}) {
  // ...
}

# 9、迭代器

不要使用 iterators。使用高阶函数例如 map() 和 reduce() 替代 for-of；

const numbers = [1, 2, 3, 4, 5]

// bad
let sum = 0
for (let num of numbers) {
  sum += num
}

sum === 15

// good
let sum = 0
numbers.forEach((num) => sum += num)
sum === 15

// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0)
sum === 15

# 10、模块

使用模组 (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 { es6 as default } from './airbnbStyleGuide'

// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide'
export default es6

# 11、用扩展运算符做数组浅拷贝与对象浅拷贝

// bad
const len = items.length
const itemsCopy = []
let i
for (i = 0 i < len i += 1) {
  itemsCopy[i] = items[i]
}
// good
const itemsCopy = [...items]
 
 
// bad
const original = { a: 1, b: 2 }
const copy = Object.assign(original, { c: 3 }) // this mutates `original` ಠ_ಠ
delete copy.a // so does this
// bad
const original = { a: 1, b: 2 }
const copy = Object.assign({}, original, { c: 3 }) // copy => { a: 1, b: 2, c: 3 }
// good es6扩展运算符 ...
const original = { a: 1, b: 2 }
// 浅拷贝
const copy = { ...original, c: 3 } // copy => { a: 1, b: 2, c: 3 }
// rest 赋值运算符
const { a, ...noA } = copy // noA => { b: 2, c: 3 }

# 12、用Array.from而不是...运算符去做map遍历

为什么？因为这样可以避免创建一个临时数组

// bad
const baz = [...foo].map(bar)
// good
const baz = Array.from(foo, bar)

# 13、不要使用不必要的转义字符。eslint:no-useless-escape

为什么? 反斜线可读性差，所以他们只在必须使用时才出现。

// bad
const foo = '\'this\' \i\s \"quoted\"'
// good
const foo = '\'this\' is "quoted"'
//best
const foo = `my name is '${name}'`

# 14、如果函数体由一个没有副作用的表达式语句组成，删除大括号和 return。否则，继续用大括号和 return 语句

Why? 语法糖，当多个函数链在一起的时候好读

// bad
[1, 2, 3].map(number => {
  const nextNumber = number + 1
  `A string containing the ${nextNumber}.`
})
// good
[1, 2, 3].map(number => `A string containing the ${number}.`)
// good
[1, 2, 3].map((number) => {
  const nextNumber = number + 1
  return `A string containing the ${nextNumber}.`
})
// good
[1, 2, 3].map((number, index) => ({
  [index]: number
}))
// 表达式有副作用就不要用隐式return
function foo(callback) {
  const val = callback()
  if (val === true) {
    // Do something if callback returns true
  }
}
let bool = false
// bad
// 这种情况会return bool = true, 不好
foo(() => bool = true)
// good
foo(() => {
  bool = true
})

# 15、避免箭头函数(=>)和比较操作符（<=, >=）混淆. eslint: no-confusing-arrow

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize
// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize
// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize)
// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item
  return height > 256 ? largeSize : smallSize
}

# 16、在一个单一导出模块里，用 export default 更好。 eslint: import/prefer-default-export

Why? 鼓励使用更多文件，每个文件只做一件事情并导出，这样可读性和可维护性更好。

// bad
export function foo() {}
// good
export default function foo() {}

# 17、不要用遍历器。用 JavaScript 高级函数代替。for-in for-of

Why? 这强调了我们不可变的规则。处理返回值的纯函数比副作用更容易。

Why? 用数组的这些迭代方法： map() / every() / filter() / find() / findIndex() / reduce() / some() / ... , 用对象的这些方法 Object.keys() / Object.values() / Object.entries() 去产生一个数组，这样你就能去遍历对象了。

const numbers = [1, 2, 3, 4, 5]
// bad
let sum = 0
for (let num of numbers) {
  sum += num
}
sum === 15
// good
let sum = 0
numbers.forEach(num => sum += num)
sum === 15
// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0)
sum === 15
// bad
const increasedByOne = []
for (let i = 0 i < numbers.length i++) {
  increasedByOne.push(numbers[i] + 1)
}
// good
const increasedByOne = []
numbers.forEach(num => increasedByOne.push(num + 1))
// best (keeping it functional)
const increasedByOne = numbers.map(num => num + 1)

# 18、访问属性时使用点符号

const luke = {
  jedi: true,
  age: 28
}
// bad
const isJedi = luke['jedi']
// good
const isJedi = luke.jedi

# 19、当获取的属性是变量时用方括号取[]

const luke = {
  jedi: true,
  age: 28
}
function getProp(prop) {
  return luke[prop]
}
const isJedi = getProp('jedi')

# 20、额外结尾要逗号： eslint: comma-dangle

Why? 这导致 git diffs 更清洁。此外，像 Babel 这样的转换器会删除转换代码中的额外的逗号，这意味着你不必担心旧版浏览器中的结尾逗号问题。

// bad - 没有结尾逗号的 git diff
const hero = {
  firstName: 'Florence',
  lastName: 'Nightingale'
  lastName: 'Nightingale',
  inventorOf: ['coxcomb chart', 'modern nursing']
}
// good - 有结尾逗号的 git diff
const hero = {
  firstName: 'Florence',
  lastName: 'Nightingale',
  inventorOf: ['coxcomb chart', 'modern nursing'],
}

// bad
const hero = {
  firstName: 'Dana',
  lastName: 'Scully'
}
const heroes = [
  'Batman',
  'Superman'
]
// good
const hero = {
  firstName: 'Dana',
  lastName: 'Scully',
}
const heroes = [
  'Batman',
  'Superman',
]

# 写在最后

# 1、JavaScript代码格式化

JavaScript的代码格式化，能解决部分JavaScript代码规范，如代码缩进、空格、分号、换行、引号、大小括号间隔对称等。所以能解决的这些规范仅供参考。