ES2015+ 备忘清单

快速浏览 ES2015、ES2016、ES2017、ES2018 及以后的 JavaScript 新特性

常用

块范围

Let

``js {2,4} function fn () { let x = 0 if (true) { let x = 1 // 只在这个if`里面 } }

  2. #### Const
  4. ```js
  5. const a = 1

let 是新的 var。 常量(const) 就像 let 一样工作，但不能重新分配。 请参阅：Let 和 const

反引号字符串

插值

  1. const message = `Hello ${name}`

多行字符串

  1. const str = `
  2. hello
  3. world
  4. `

模板和多行字符串。 请参阅：模板字符串

二进制和八进制文字

  1. let bin = 0b1010010
  2. let oct = 0o755

请参阅：二进制和八进制文字

指数运算符

```js {1} const byte = 2 ** 8 // 同: Math.pow(2, 8)

  2. ### 新方法
  4. #### 新的字符串方法
  6. ```js
  7. "hello".repeat(3)
  8. "hello".includes("ll")
  9. "hello".startsWith("he")
  10. "hello".padStart(8) // "   hello"
  11. "hello".padEnd(8) // "hello   " 
  12. "hello".padEnd(8, '!') // hello!!!
  13. "\u1E9B\u0323".normalize("NFC")

新的数字方法

  1. Number.EPSILON
  2. Number.isInteger(Infinity) // false
  3. Number.isNaN("NaN") // false

新的 Math 方法

  1. Math.acosh(3) // 1.762747174039086
  2. Math.hypot(3, 4) // 5
  3. Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

新的 Array 方法

  1. // 返回一个真实的数组
  2. Array.from(document.querySelectorAll("*"))
  3. // 类似于 new Array(...)，但没有特殊的单参数行为
  4. Array.of(1, 2, 3)

请参阅: 新方法

类

  1. class Circle extends Shape {

构造函数

```js {1} constructor (radius) { this.radius = radius }

  2. #### 方法
  4. ```js {1}
  5.   getArea () {
  6.     return Math.PI * 2 * this.radius
  7.   }

调用超类方法

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

  2. #### 静态方法
  4. ```js {1}
  5.   static createFromDiameter(diameter) {
  6.     return new Circle(diameter / 2)
  7.   }
  8. }

原型的语法糖。 请参阅: 类

Promises

做出承诺

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

  2. 用于异步编程。
  3. 请参阅：[Promises](https://babeljs.io/learn-es2015/#promises)
  5. ### 使用 Promises
  7. ```js {2,3}
  8. promise
  9.   .then((result) => { ··· })
  10.   .catch((error) => { ··· })

在 finally 中使用 Promise

```js {4} promise .then((result) => { ··· }) .catch((error) => { ··· }) .finally(() => { / 独立于成功/错误的逻辑 / })

  2. 当承诺被履行或被拒绝时，处理程序被调用
  4. ### Promise 函数
  6. ```js
  7. Promise.all(···)
  8. Promise.race(···)
  9. Promise.reject(···)
  10. Promise.resolve(···)

Async-await

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

  2. `async` 函数是使用函数的另一种方式。
  3. 请参阅：[异步函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
  5. 解构 Destructuring
  6. -------------
  8. ### 解构赋值
  10. #### Arrays
  12. ```js {1}
  13. const [first, last] = ['Nikola', 'Tesla']

Objects

```js {1} let {title, author} = { title: ‘The Silkworm’, author: ‘R. Galbraith’ }

  2. 支持匹配数组和对象。
  3. 请参阅：[解构](https://babeljs.io/learn-es2015/#destructuring)
  5. ### 默认值
  7. ```js
  8. const scores = [22, 33]
  9. const [math = 50, sci = 50, arts = 50] = scores
  1. // Result:
  2. // math === 22, sci === 33, arts === 50

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

函数参数

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

  1. ----
  2. ```js
  3. greet({ name: 'Larry', greeting: 'Ahoy' })

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

默认值

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

  1. ----
  2. ```js
  3. greet() // Hi Rauno!
  4. greet({ name: 'Larry' }) // Hi Larry!

重新分配键

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

  1. ----
  2. ```js
  3. printCoordinates({ left: 25, top: 90 })

此示例将 x 分配给 left 键的值

循环

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

  2. 赋值表达式也在循环中工作
  4. ### 对象解构
  6. ```js {1}
  7. const { id, ...detail } = song;

使用 rest(...) 运算符单独提取一些键和对象中的剩余键

扩展运算符 Spread

对象扩展

与对象扩展

```js {2} const options = { …defaults, visible: true }

  2. #### 没有对象扩展
  4. ```js
  5. const options = Object.assign(
  6.   {}, defaults,
  7.   { visible: true })

对象扩展运算符允许您从其他对象构建新对象。 请参阅：对象传播

数组扩展

具有数组扩展

```js {2,3} const users = [ …admins, …editors, ‘rstacruz’ ]

  2. #### 没有数组扩展
  4. ```js
  5. const users = admins
  6.   .concat(editors)
  7.   .concat([ 'rstacruz' ])

扩展运算符允许您以相同的方式构建新数组。 请参阅：扩展运算符

函数 Functions

函数参数

默认参数

``js {1} function greet (name = 'Jerry') { returnHello ${name}` }

  2. #### Rest 参数
  4. ```js {1}
  5. function fn(x, ...y) {
  6.   // y 是一个数组
  7.   return x * y.length
  8. }

扩展

```js {1} fn(…[1, 2, 3]) // 与 fn(1, 2, 3) 相同

  2. Default(默认), rest, spread(扩展)。
  3. 请参阅：[函数参数](https://babeljs.io/learn-es2015/#default--rest--spread)
  5. ### 箭头函数
  6. <!--rehype:wrap-class=row-span-3-->
  8. #### 箭头函数
  10. ```js {1}
  11. setTimeout(() => {
  12.   ···
  13. })

带参数

```js {1} readFile(‘text.txt’, (err, data) => { … })

  2. #### 隐式返回
  4. ```js {1,4,5,6}
  5. arr.map(n => n*2)
  6. // 没有花括号 = 隐式返回
  7. // 同: arr.map(function (n) { return n*2 })
  8. arr.map(n => ({
  9.   result: n*2
  10. }))
  11. // 隐式返回对象需要在对象周围加上括号

类似函数，但保留了 this。 请参阅：箭头函数

参数设置默认值

  1. function log(x, y = 'World') {
  2.   console.log(x, y);
  3. }
  5. log('Hello')          // Hello World
  6. log('Hello', 'China') // Hello China
  7. log('Hello', '')      // Hello

与解构赋值默认值结合使用

  1. function foo({x, y = 5} = {}) {
  2.   console.log(x, y);
  3. }
  5. foo() // undefined 5

name 属性

  1. function foo() {}
  2. foo.name // "foo"

Objects

速记语法

  1. module.exports = { hello, bye }

同下: 

  1. module.exports = {
  2.   hello: hello, bye: bye
  3. }

请参阅：对象字面量增强

方法

```js {2} const App = { start () { console.log(‘running’) } } // 同: App = { start: function () {···} }

  2. 请参阅：[对象文字增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
  4. ### Getters and setters
  6. ```js {2,5}
  7. const App = {
  8.   get closed () {
  9.     return this.status === 'closed'
  10.   },
  11.   set closed (value) {
  12.     this.status = value ? 'closed' : 'open'
  13.   }
  14. }

请参阅：对象字面量增强

计算属性名称

```js {3} let event = ‘click’ let handlers = {

} // 同: handlers = { ‘onclick’: true }

  2. 请参阅：[对象字面量增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
  4. ### 提取值
  6. ```js {3,5}
  7. const fatherJS = { age: 57, name: "张三" }
  8. Object.values(fatherJS)
  9. // [57, "张三"]
  10. Object.entries(fatherJS)
  11. // [["age", 57], ["name", "张三"]]

Modules 模块

Imports 导入

  1. import 'helpers'
  2. // 又名: require('···')
  1. import Express from 'express'
  2. // 又名: const Express = require('···').default || require('···')
  1. import { indent } from 'helpers'
  2. // 又名: const indent = require('···').indent
  1. import * as Helpers from 'helpers'
  2. // 又名: const Helpers = require('···')
  1. import { indentSpaces as indent } from 'helpers'
  2. // 又名: const indent = require('···').indentSpaces

import 是新的 require()。 请参阅：Module imports

Exports 导出

  1. export default function () { ··· }
  2. // 又名: module.exports.default = ···
  1. export function mymethod () { ··· }
  2. // 又名: module.exports.mymethod = ···
  1. export const pi = 3.14159
  2. // 又名: module.exports.pi = ···
  1. const firstName = 'Michael';
  2. const lastName = 'Jackson';
  3. const year = 1958;
  4. export { firstName, lastName, year };
  1. export * from "lib/math";

export 是新的module.exports。 请参阅：Module exports

as 关键字重命名

```js {2,8,12-14} import { lastName as surname // 导入重命名 } from ‘./profile.js’;

function v1() { … } function v2() { … }

export { v1 as default }; // 等同于 export default v1;

export { v1 as streamV1, // 导出重命名 v2 as streamV2, // 导出重命名 v2 as streamLatestVersion // 导出重命名 };

  2. ### 动态加载模块
  4. ```js
  5. button.addEventListener('click', event => {
  6.   import('./dialogBox.js')
  7.     .then(dialogBox => {
  8.       dialogBox.open();
  9.     })
  10.     .catch(error => {
  11.       /* Error handling */
  12.     })
  13. });

ES2020提案 引入 import() 函数

import() 允许模块路径动态生成

  1. const main = document.querySelector('main')
  3. import(`./modules/${someVariable}.js`)
  4.   .then(module => {
  5.     module.loadPageInto(main);
  6.   })
  7.   .catch(err => {
  8.     main.textContent = err.message;
  9.   });

import.meta

ES2020 为 import 命令添加了一个元属性 import.meta，返回当前模块的元信息

  1. new URL('data.txt', import.meta.url)

Node.js 环境中，import.meta.url返回的总是本地路径，即 file:URL 协议的字符串，比如 file:///home/user/foo.js

Generators

Generator 函数

  1. function* idMaker () {
  2.   let id = 0
  3.   while (true) { yield id++ }
  4. }
  1. let gen = idMaker()
  2. gen.next().value  // → 0
  3. gen.next().value  // → 1
  4. gen.next().value  // → 2

情况很复杂。 请参阅：Generators

For..of + 迭代器(iterator)

  1. let fibonacci = {
  2.   [Symbol.iterator]() {
  3.     let pre = 0, cur = 1;
  4.     return {
  5.       next() {
  6.         [pre, cur] = [cur, pre + cur];
  7.         return { done: false, value: cur }
  8.       }
  9.     }
  10.   }
  11. }
  13. for (var n of fibonacci) {
  14.   // 在 1000 处截断序列
  15.   if (n > 1000) break;
  16.   console.log(n);
  17. }

用于迭代生成器和数组。 请参阅：For..of iteration

与 Iterator 接口的关系

  1. var gen = {};
  2. gen[Symbol.iterator] = function* () {
  3.   yield 1;
  4.   yield 2;
  5.   yield 3;
  6. };
  8. [...gen] // => [1, 2, 3]

Generator 函数赋值给 Symbol.iterator 属性，从而使得 gen 对象具有了 Iterator 接口，可以被 ... 运算符遍历了

Symbol.iterator 属性

  1. function* gen() { /* some code */ }
  2. var g = gen();
  4. g[Symbol.iterator]() === g // true

gen 是一个 Generator 函数，调用它会生成一个遍历器对象g。它的 Symbol.iterator 属性，也是一个遍历器对象生成函数，执行后返回它自己

另见