ES2015+ cheatsheet

Let

function fn () {
  let x = 0
  if (true) {
    let x = 1 // 只在`if`条件块内
  }
}

Const

const a = 1

let是新版本的var，const与let类似，但无法重新分配。查看: Let and const

字符串模板

const message = `Hello ${name}`

多行文本

const str = `
hello
world
`

字符串模板和多行文本。查看: Template strings

let bin = 0b1010010
let oct = 0o755

查看: Binary and octal literals

string的新方法

"hello".repeat(3)
"hello".includes("ll")
"hello".startsWith("he")
"hello".padStart(8) // "   hello"
"hello".padEnd(8) // "hello   " 
"hello".padEnd(8, '!') // hello!!!
"\u1E9B\u0323".normalize("NFC")

更多: New methods

class Circle extends Shape {

构造器

  constructor (radius) {
    this.radius = radius
  }

方法

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

调用父类方法

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

静态方法

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

原型的语法糖，查看: Classes

const byte = 2 ** 8
// Same as: Math.pow(2, 8)

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

更多异步操作，查看: Promises

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

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

无论promise最终状态如何，finally都会执行。

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

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

await必须在async内部，不能单独使用。更多: async function

Arrays

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

Objects

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

更多: Destructuring

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

// Result:
// math === 22, sci === 33, arts === 50

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

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

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

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

function greet({ name = 'Rauno' } = {}) {
  console.log(`Hi ${name}!`);
}

greet() // Hi Rauno!
greet({ name: 'Larry' }) // Hi Larry!

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

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

本例将keyleft的值赋予x。

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

赋值表达式在循环中一样可以使用。

const { id, ...detail } = song;

使用余下的（...）运算符，逐一提取剩余的key。

使用对象扩展

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])
// same as fn(1, 2, 3)

默认, 余下和扩展。查看: Function arguments

箭头函数

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

带参数

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

隐式返回

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

numbers.map(n => ({ result: n * 2 }))
// 隐式返回对象需要在对象周围加上括号

类似于函数，除非类似func.call(this)调用，否则不会产生新的this，查看: Fat arrows

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

更多: Object literal enhancements

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

更多: Object literal enhancements

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

const fatherJS = { age: 57, name: "Brendan Eich" }

Object.keys(fatherJS)     
// ["age", "name"]
Object.values(fatherJS)
// [57, "Brendan Eich"]
Object.entries(fatherJS)
// [["age", 57], ["name", "Brendan Eich"]]

import 'helpers'
// aka: require('···')

import Express from 'express'
// aka: const Express = require('···').default || require('···')

import { indent } from 'helpers'
// aka: const indent = require('···').indent

import * as Helpers from 'helpers'
// aka: const Helpers = require('···')

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

import 是新版 require()。更多: Module imports

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

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

export const pi = 3.14159
// aka: module.exports.pi = ···

export 是新版 module.exports。更多: Module exports

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

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

很复杂，查看: Generators

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

更多: For..of iteration