ES2015+ 前端速查表

块级作用域

Let

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

Const

const a = 1

let 类似于 var. Const 的性质类似于 let, 但是声明后值不能改变. See: Let and const

反引号字符串

字符串插值

var message = `Hello ${name}`

多行字符串

var str = `
hello
world
`

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

二进制和八进制文字

let bin = 0b1010010
let oct = 0o755

查看: 二进制和八进制文字

新方法

新的字符串方法

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

查看: New methods

Classes类

class Circle extends Shape {

Constructor

  constructor (radius) {
    this.radius = radius
  }

Methods

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

调用父级方法

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

静态方法

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

原型的语法糖. 查看: Classes

Exponent operator

const byte = 2 ** 8
// Same as: 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(···)

Destructuring

解构参数

Arrays

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

Objects

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

支持数组和对象. 查看: Destructuring

函数参数

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

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

循环

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

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

Functions

函数参数

Default arguments

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

Rest arguments

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

Spread

fn(...[1, 2, 3])
// same as fn(1, 2, 3)

Default, rest, spread. See: Function arguments

箭头函数

Fat arrows

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

传参

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

隐形返回

numbers.map(n => n * 2)
// No curly braces = implicit return
// Same as: numbers.map(function (n) { return n * 2 })

与 functions 类似但是 this 被隐式创建并且不可变. 查看: Fat arrows

Objects

语法速记

module.exports = { hello, bye }
// Same as: module.exports = { hello: hello, bye: bye }

查看: 对象字面量增强

方法

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

查看: 对象字面量增强

Getters 和 setters

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

查看: 对象字面量增强

计算属性名称

let event = 'click'
let handlers = {
  ['on' + event]: true
}
// Same as: handlers = { 'onclick': true }

查看: 对象字面量增强

Modules

Imports

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

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

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

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

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

import 类似于 require(). 查看: Module imports

Exports

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

Generators

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