# ES 新特性

ECMAScript

ECMAScript 是一种由 Ecma 国际（前身为欧洲计算机制造商协会）在标准 ECMA-262 中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMA-262 标准的实现和扩展。

至发 2020.01.03 为止有九个 ECMA-262 版本发表。其历史版本如下：

1997 年 6 月：第一版
1998 年 6 月：修改格式，使其与 ISO/IEC16262 国际标准一样
1999 年 12 月：强大的正则表达式，更好的词法作用域链处理，新的控制指令，异常处理，错误定义更加明确，数据输出的格式化及其它改变
2009 年 12 月：添加严格模式("use strict")。修改了前面版本模糊不清的概念。增加了 getters，setters，JSON 以及在对象属性上更完整的反射。
2011 年 6 月：ECMAScript 标 5.1 版形式上完全一致于国际标准 ISO/IEC 16262:2011。
2015 年 6 月：ECMAScript 2015（es2015），第 6 版，最早被称作是 ECMAScript 6（ES6），添加了类和模块的语法，其他特性包括迭代器，Python 风格的生成器和生成器表达式，箭头函数，二进制数据，静态类型数组，集合（maps，sets 和 weak maps），promise，reflection 和 proxies。作为最早的 ECMAScript Harmony 版本，也被叫做 ES6 Harmony。
2016 年 6 月：ECMAScript 2016（es2016），第 7 版，多个新的概念和语言特性。
2017 年 6 月：ECMAScript 2017（es2017），第 8 版，多个新的概念和语言特性。
2018 年 6 月：ECMAScript 2018 （es2018），第 9 版，包含了异步循环，生成器，新的正则表达式特性和 rest/spread 语法。
2019 年 6 月：ECMAScript 2019 （es2019），第 10 版。
2020 年 6 月：ECMAScript 2020 （es2020），第 11 版。
2021 年 6 月：ECMAScript 2021 （es2021），第 12 版。
2022 年 6 月 22 日，第 123 届 ECMA 大会批准了 ECMAScript 2022 语言规范

# es2022

Top-level Await
Object.hasOwn()
at()
error.cause
正则表达式匹配索引
类的实例成员

# Top-level Await

在 ES2017 中，引入了 async 函数和 await 关键字，以简化 Promise 的使用，但是 await 关键字只能在 async 函数内部使用。尝试在异步函数之外使用 await 就会报错：SyntaxError - SyntaxError: await is only valid in async function。

TIP

顶层 await 允许我们在 async 函数外面使用 await 关键字。它允许模块充当大型异步函数，通过顶层 await，这些 ECMAScript 模块可以等待资源加载。这样其他导入这些模块的模块在执行代码之前要等待资源加载完再去执行。

// a.js
const resp = await fetch("https://jsonplaceholder.typicode.com/users");
const users = resp.json();
export { users };

// usingAwait.js
import { users } from "./a.js";

console.log(users);
console.log("usingAwait module");

1
2
3
4
5
6
7
8
9
10

# 我们还可以立即调用顶层 async 函数（IIAFE）

import fetch from "node-fetch";
(async () => {
  const resp = await fetch("https://jsonplaceholder.typicode.com/users");
  users = resp.json();
})();
export { users };

1
2
3
4
5
6

WARNING

这样会有一个缺点，直接导入的 users 是 undefined，需要在异步执行完成之后才能访问它：

// usingAwait.js
import { users } from "./a.js";
console.log("users:", users); // undefined
setTimeout(() => {
  console.log("users:", users);
}, 100);
console.log("usingAwait module");

1
2
3
4
5
6
7

当然，这种方法并不安全，因为如果异步函数执行花费的时间超过 100 毫秒，它就不会起作用了，users 仍然是 undefined。

另一个方法是导出一个 promise，让导入模块知道数据已经准备好了：

//a.js
import fetch from "node-fetch";
export default (async () => {
  const resp = await fetch("https://jsonplaceholder.typicode.com/users");
  users = resp.json();
})();
export { users };

//usingAwait.js
import promise, { users } from "./a.js";
promise.then(() => {
  console.log("usingAwait module");
  setTimeout(() => console.log("users:", users), 100);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

虽然这种方法似乎是给出了预期的结果，但是有一定的局限性：导入模块必须了解这种模式才能正确使用它。

而顶层 await 就可以解决这些问题：

// a.js
const resp = await fetch("https://jsonplaceholder.typicode.com/users");
const users = resp.json();
export { users };

// usingAwait.js
import { users } from "./a.mjs";
console.log(users);
console.log("usingAwait module");

1
2
3
4
5
6
7
8
9

顶级 await 在以下场景中将非常有用：

// 动态加载模块：
const strings = await import(`/i18n/${navigator.language}`);
// 资源初始化：
const connection = await dbConnector();
// 依赖回退：
let translations;
try {
  translations = await import("https://app.fr.json");
} catch {
  translations = await import("https://fallback.en.json");
}

1
2
3
4
5
6
7
8
9
10
11

# Object.hasOwn()

在 ES2022 之前，可以使用Object.prototype.hasOwnProperty() 来检查一个属性是否属于对象。

Object.hasOwn 特性是一种更简洁、更可靠的检查属性是否直接设置在对象上的方法：

const example = {
  property: "123",
};

console.log(Object.prototype.hasOwnProperty.call(example, "property"));
console.log(Object.hasOwn(example, "property"));

1
2
3
4
5
6

# at()

at() 是一个数组方法，用于通过给定索引来获取数组元素。当给定索引为正时，这种新方法与使用括号表示法访问具有相同的行为。当给出负整数索引时，就会从数组的最后一项开始检索：

除了数组，字符串也可以使用 at()方法进行索引

const array = [0, 1, 2, 3, 4, 5];

console.log(array[array.length - 1]); // 5
console.log(array.at(-1)); // 5

console.log(array[array.lenght - 2]); // 4
console.log(array.at(-2)); // 4

const str = "hello world";

console.log(str[str.length - 1]); // d
console.log(str.at(-1)); // d

1
2
3
4
5
6
7
8
9
10
11
12

# error.cause

在 ECMAScript 2022 规范中，new Error() 中可以指定导致它的原因：

function readFiles(filePaths) {
  return filePaths.map((filePath) => {
    try {
      // ···
    } catch (error) {
      throw new Error(`While processing ${filePath}`, { cause: error });
    }
  });
}

1
2
3
4
5
6
7
8
9

# 正则表达式匹配索引

该特性允许我们利用 d 字符来表示我们想要匹配字符串的开始和结束索引。以前，只能在字符串匹配操作期间获得一个包含提取的字符串和索引信息的数组。在某些情况下，这是不够的。因此，在这个规范中，如果设置标志 /d，将额外获得一个带有开始和结束索引的数组。

const matchObj = /(a+)(b+)/d.exec("aaaabb");

console.log(matchObj[1]); // 'aaaa'
console.log(matchObj[2]); // 'bb'

1
2
3
4

由于 /d 标识的存在，matchObj 还有一个属性.indices，它用来记录捕获的每个编号组：

console.log(matchObj.indices[1]); // [0, 4]
console.log(matchObj.indices[2]); // [4, 6]

1
2

我们还可以使用命名组：

const matchObj = /(?<as>a+)(?<bs>b+)/d.exec("aaaabb");
console.log(matchObj.groups.as); // 'aaaa'
console.log(matchObj.groups.bs); // 'bb'

1
2
3

这里给两个字符匹配分别命名为as和bs，然后就可以通过 groups 来获取到这两个命名分别匹配到的字符串。

它们的索引存储在 matchObj.indices.groups 中：

console.log(matchObj.indices.groups.as); // [0, 4]
console.log(matchObj.indices.groups.bs); // [4, 6]

1
2

匹配索引的一个重要用途就是指向语法错误所在位置的解析器。下面的代码解决了一个相关问题：它指向引用内容的开始和结束位置。

const reQuoted = /“([^”]+)”/dgu;
function pointToQuotedText(str) {
  const startIndices = new Set();
  const endIndices = new Set();
  for (const match of str.matchAll(reQuoted)) {
    const [start, end] = match.indices[1];
    startIndices.add(start);
    endIndices.add(end);
  }
  let result = "";
  for (let index = 0; index < str.length; index++) {
    if (startIndices.has(index)) {
      result += "[";
    } else if (endIndices.has(index + 1)) {
      result += "]";
    } else {
      result += " ";
    }
  }
  return result;
}
console.log(pointToQuotedText("They said “hello” and “goodbye”.")); // '           [   ]       [     ]  '

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 类的实例成员

# 公共实例字段

公共类字段允许我们使用赋值运算符 (=) 将实例属性添加到类定义中。下面是一个计数器的例子：

import React, { Component } from "react";
export class Incrementor extends Component {
  constructor() {
    super();
    this.state = { count: 0 };
    this.increment = this.increment.bind(this);
  }
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <button onClick={this.increment}>Increment: {this.state.count}</button>
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这个例子中，在构造函数中定义了实例字段和绑定方法，通过新的类语法，可以使代码更加直观。新的公共类字段语法允许我们直接将实例属性作为属性添加到类上，而无需使用构造函数方法。这样就简化了类的定义，使代码更加简洁、可读：

import React from "react";
export class Incrementor extends React.Component {
  state = { count: 0 };
  increment = () => this.setState({ count: this.state.count + 1 });
  render = () => (
    <button onClick={this.increment}>Increment: {this.state.count}</button>
  );
}

1
2
3
4
5
6
7
8

# es2021

🔝🔝返回顶部

# replaceAll

返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉

const str = "hello world";
str.replaceAll("l", ""); // "heo word"

1
2

# Promise.any

Promise.any() 接收一个 Promise 可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise

const promise1 = new Promise((resolve, reject) =>
  reject("我是失败的Promise_1")
);
const promise2 = new Promise((resolve, reject) =>
  reject("我是失败的Promise_2")
);
const promiseList = [promise1, promise2];
Promise.any(promiseList)
  .then((values) => {
    console.log(values);
  })
  .catch((e) => {
    console.log(e);
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 逻辑运算符和赋值表达式

逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&，||，??）和赋值表达式而 JavaScript 已存在的复合赋值运算符有：

a ||= b;
//等价于
a = a || (a = b);

let a = ""; // null undefined 0
a ||= "8"; // a = '8'

a &&= b;
//等价于
a = a && (a = b);

let a = ""; // null undefined 0
a &&= "9"; // a = ''

a ??= b;
//等价于
a = a ?? (a = b);

let a = ""; // 0
a ??= "7"; // a = ''; a = 0

let b = null; // undefined
b ??= 9; // b = 9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 5. 数字分隔符

数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性

const money = 1_000_000_000;
//等价于
const money = 1000000000;

1_000_000_000 === 1000000000; // true

1
2
3
4
5

# es2020

🔝🔝返回顶部

# Nullish coalescing Operator(空值处理)

表达式在 ?? 的左侧运算符求值为undefined或null，返回其右侧。【但是对于0或者''】则不会跳过

let user = {
    u1: 0,
    u2: false,
    u3: null,
    u4: undefined
    u5: '',
}
let u1 = user.u1 ?? '用户1'  // 0
let u2 = user.u2 ?? '用户2'  // false
let u3 = user.u3 ?? '用户3'  // 用户3
let u4 = user.u4 ?? '用户4'  // 用户4
let u5 = user.u5 ?? '用户5'  // ''

1
2
3
4
5
6
7
8
9
10
11
12

# Optional chaining（可选链）

?.用户检测不确定的中间节点

# Promise.allSettled

返回一个在所有给定的 promise 已被决议或被拒绝后决议的 promise，并带有一个对象数组，每个对象表示对应的 promise 结果

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) =>
  reject("我是失败的Promise_1")
);
const promise4 = new Promise((resolve, reject) =>
  reject("我是失败的Promise_2")
);
const promiseList = [promise1, promise2, promise3, promise4];
Promise.allSettled(promiseList).then((values) => {
  console.log(values);
});

1
2
3
4
5
6
7
8
9
10
11
12

# import()

按需导入

# 新基本数据类型 BigInt

任意精度的整数

# globalThis

浏览器：window
worker：self
node：global

# es2019

🔝🔝返回顶部

globalThis
import()
Legacy RegEx
私有的实例方法和访问器

# 更加友好的 JSON.stringify

JavaScript（JS）是最流行的编程语言之一，也是 Web 开发的主要语言之一，它在不断发展，每一次迭代都会带来一些新的内部变化。让我们来看看 es2019 的一些新功能，它们可能很快就会进入我们的日常代码:

# ES 新特性

# es2022

# Top-level Await

# 我们还可以立即调用顶层 async 函数（IIAFE）

# Object.hasOwn()

# at()

# error.cause

# 正则表达式匹配索引

# 类的实例成员

# 公共实例字段

# es2021

# replaceAll

# Promise.any

# 逻辑运算符和赋值表达式

# 5. 数字分隔符

# es2020

# Nullish coalescing Operator(空值处理)

# Optional chaining（可选链）

# Promise.allSettled

# import()

# 新基本数据类型 BigInt

# globalThis

# es2019

# 更加友好的 JSON.stringify

# 行段分隔符

# 新增了 Array 的 flat()方法和 flatMap()方法

# Array_flatMap

# 新增了 String 的 trimStart()方法和 trimEnd()方

# Object.fromEntries()

# 简化 try {} catch {},修改 catch 绑定

# 新的基本数据类型 BigInt

# Symbol.prototype.description

# String.prototype.matchAll

# Function.prototype.toString()现在返回精确字符，包括空格和注释

# JSON_parse

# es2018

# 异步迭代

# pf

# rs 属性

# 命名捕获组

# 反向断言

# dotAll

# unicode 转义

# 模板字符串

# es2017

# aa

# ov

# oe

# 填充字符串

# padStart

# padEnd

# 逗号结尾

# og

# 共享

# Atomics

# es2016

# es2015

# es2015 类

# es2015 模块化

# 导出(export)

# 导入(import)

# es2015 箭头

# 箭头函数的结构

# es2015 函数参数默认值

# es2015 模板字符串

# es2015 解构赋值

# es2015 延展操作符

# 在 React 中的应用

# es2015 对象属性简写

# es2015Promise

# es2015Let 与 Const