ES2015+ cheatsheet

块级作用域

Let

function fn () {
  let x = 0
  if (true) {
    let x = 1 // only inside this `if`
  }
}

Const

const a = 1

let 新的 var，有块级作用域。 const 的工作类似于 let, 但是声明后值不能改变。查看: Let and const

反引号字符串

插值

var message = `Hello ${name}`

多行字符串

var str = `
hello
world
`

模板字符串和多行字符串。查看: 模板字符串

二进制和八进制字面量

let bin = 0b1010010
let oct = 0o755

查看: 二进制和八进制字面量

新方法

新的字符串方法

"hello".repeat(3)
"hello".includes("ll")
"\u1E9B\u0323".normalize("NFC")

See: 新方法

Classes （类）

class Circle extends Shape {

Constructor（构造函数）

  constructor (radius) {
    this.radius = radius
  }

Methods（方法）

  getArea () {
    return Math.PI * 2 * this.radius
  }

Calling superclass methods（调用超类方法）

  expand (n) {
    return super.expand(n) * Math.PI
  }

Static methods（静态方法）

  static createFromDiameter(diameter) {
    return new Circle(diameter / 2)
  }
}

原型的语法糖。查看 Classes

指数运算符

const byte = 2 ** 8
// 等同于: Math.pow(2, 8)

Promises

创建 promises

new Promise((resolve, reject) => {
  if (ok) { resolve(result) }
  else { reject(error) }
})

对于异步编程。查看：Promises

使用 promises

promise
  .then((result) => { ··· })
  .catch((error) => { ··· })

Promise 函数

Promise.all(···)
Promise.race(···)
Promise.reject(···)
Promise.resolve(···)

Async-await

async function run () {
  const user = await getUsers()
  const tweets = await getTweets(user)
  return [user, tweets]
}

async 函数是使用函数的另一种方式。

查看： async 函数

解构

解构赋值

Arrays（数组）

var [first, last] = ['Nikola', 'Tesla']

Objects（对象）

let {title, author} = {
  title: 'The Silkworm',
  author: 'R. Galbraith'
}

支持匹配数组和对象。查看： Destructuring（解构）

默认值

var scores = [22, 33]
var [math = 50, sci = 50, arts = 50] = scores

// 结果:
// math === 22, sci === 23, arts === 50

在解构数组或对象时可以分配默认值。

函数参数

function greet({ name, greeting }) {
  console.log(`${greeting}, ${name}!`)
}

greet({ name: 'Larry', greeting: 'Ahoy' })

对象和数组的解构也可以在函数参数中完成。

重新分配键

function printCoordinates({ left: x, top: y }) {
  console.log(`x: ${x}, y: ${y}`)
}

printCoordinates({ left: 25, top: 90 })

这个例子将 x 的值分配给 left 键。

循环

for (let {title, artist} in songs) {
  ···
}

赋值表达式也能运行在循环中。

展开操作符

对象展开

使用对象展开

const options = {
  ...defaults,
  visible: true
}

不使用对象展开

const options = Object.assign(
  {}, defaults,
  { visible: true })

对象展开操作符允许你从其他对象构建新的对象。

查看： Object spread

数组展开

使用数组展开

const users = [
  ...admins,
  ...editors,
  'rstacruz'
]

不使用数组展开

const users = admins
  .concat(editors)
  .concat([ '@rstacruz' ])

展开操作符让你可以以相同的方式构建新数组。

查看： Spread operator

函数

函数参数

默认参数

function greet (name = "Jerry") {
  return `Hello ${name}`
}

剩余参数

function fn(x, ...y) {
  // y is an Array
  return x * y.length
}

展开

fn(...[1, 2, 3])
// 等价于 fn(1, 2, 3)

默认、剩余、展开参数。查看：函数参数

箭头函数

setTimeout(() => {
  ···
})

传参

readFile('text.txt', (err, data) => {
  ...
})

隐形返回

numbers.map(n => n * 2)
// 没有大括号 = 隐式返回
// 等同于: numbers.map(function (n) { return n * 2 })

类似于普通函数，但是 this 保持对外界上下文的引用。查看：Fat arrows

对象

简写语法

module.exports = { hello, bye }
// 等同于: module.exports = { hello: hello, bye: bye }

查看： Object literal enhancements

方法

const App = {
  start () {
    console.log('running')
  }
}
// Same as: App = { start: function () {···} }

查看: Object literal enhancements

Getters 和 setters

const App = {
  get closed () {
    return this.status === 'closed'
  },
  set closed (value) {
    this.status = value ? 'closed' : 'open'
  }
}

查看: Object literal enhancements

计算属性名

let event = 'click'
let handlers = {
  ['on' + event]: true
}
// 等同于: handlers = { 'onclick': true }

查看： Object literal enhancements

Modules（模块）

Imports（导入）

import 'helpers'
// 也称: require('···')

import Express from 'express'
// 也称: Express = require('···').default || require('···')

import { indent } from 'helpers'
// 也称: indent = require('···').indent

import * as Helpers from 'helpers'
// 也称: Helpers = require('···')

import { indentSpaces as indent } from 'helpers'
// 也称: indent = require('···').indentSpaces

import 是一个新的 require()。查看： Module imports

Exports（导出）

export default function () { ··· }
// 也称: module.exports.default = ···

export function mymethod () { ··· }
// 也称: module.exports.mymethod = ···

export const pi = 3.14159
// 也称: module.exports.pi = ···

export 是一个新的 module.exports. 查看：Module exports

Generators（生成器）

function* idMaker () {
  var id = 0
  while (true) { yield id++ }
}

var gen = idMaker()
gen.next().value  // → 0
gen.next().value  // → 1
gen.next().value  // → 2

完整内容详见： Generators

For..of 迭代

for (let i of iterable) {
  ···
}

用于遍历 generators 函数和数组。查看：For..of iteration

块级作用域

Let

Const

反引号字符串

插值

多行字符串

二进制和八进制字面量

新方法

新的字符串方法

Classes （类）

Constructor（构造函数）

Methods（方法）

Calling superclass methods（调用超类方法）

Static methods（静态方法）

指数运算符

Promises

创建 promises

使用 promises

Promise 函数

Async-await

解构

解构赋值

Arrays（数组）

Objects（对象）

默认值

函数参数

重新分配键

循环

展开操作符

对象展开

使用对象展开

不使用对象展开

数组展开

使用数组展开

不使用数组展开

函数

函数参数

默认参数

剩余参数

展开

箭头函数

箭头函数

传参

隐形返回

对象

简写语法

方法

Getters 和 setters

计算属性名

Modules（模块）

Imports（导入）

Exports（导出）

Generators（生成器）

Generators（生成器）

For..of 迭代

推荐阅读最新关于 ECMAScript 的文章