JavaScript 高级 ES7-ES13 新特性详解

在这里，我们将介绍 JavaScript ES7 到 ES13 所引入的一些新特性。

1. ES7 新特性

1.1 includes 方法

includes() 方法可用于判断一个数组是否包含一个特定的值，并返回 true 或 false。这个方法在 ES7 中被正式引入，可以通过以下的方式来调用：

let arr = [1, 2, 3, 4, 5];

arr.includes(3);   // 返回 true
arr.includes(6);   // 返回 false

1.2 指数运算符

ES7 引入了一个新的运算符 —— 指数运算符。它用于计算幂运算。通过它，我们可以更加方便地进行幂运算，而不需要使用 Math.pow() 方法了。例如：

2 ** 3;  // 返回 8
4 ** 0.5;  // 返回 2

2. ES8 新特性

2.1 async / await

在 ES8 中，我们可以使用 async / await 关键字来更加方便地处理异步代码，而不需要过多的使用回调函数，它使异步代码的写法更加简洁。例如：

async function getData() {
  let data = await fetch('/api/data');
  let json = await data.json();
  return json;
}

在这个例子中，我们使用 async / await 关键字来处理异步请求。它代替了使用 Promise 的方式，并让代码更加可读。

2.2 其他方法

在 ES8 中，还有很多其它的方法被引入了，如 Object.values()、Object.entries()、String#padStart()、String#padEnd() 等。它们大大增强了 JavaScript 的能力。

3. ES9 新特性

3.1 异步迭代器

在 ES9 中，我们可以使用异步迭代器来处理异步数据的迭代。以下是一个使用异步迭代器的例子：

async function getData() {
  let response = await fetch('/api/data');
  let reader = response.body.getReader();

  while (true) {
    let { done, value } = await reader.read();
    if (done) break;

    console.log(value);
  }
}

在这个例子中，我们使用了一个异步迭代器来读取一个异步请求返回的数据流。

3.2 Promise.finally()

在 ES9 中，我们可以使用 Promise.finally() 方法来注册当 Promise 完成（resolve）或失败（reject）时都会执行的代码。例如：

let promise = new Promise((resolve, reject) => {
  // 执行异步操作
});

promise.then(() => {
  // 当 Promise 完成时执行
}).catch(() => {
  // 当 Promise 失败时执行
}).finally(() => {
  // 当 Promise 完成或失败时都执行
});

4. ES10 新特性

4.1 Array.prototype.flat()

在 ES10 中，我们可以使用 Array.prototype.flat() 方法来将多维数组展开成一维数组，将数组彻底地扁平化。例如：

let arr = [1, [2], [3, [[4]]]];

arr.flat();  // 返回 [1, 2, 3, 4]

4.2 Object.fromEntries()

在 ES10 中，我们可以使用 Object.fromEntries() 方法将一个由键值对数组转换成一个对象。例如：

let entries = [['foo', 1], ['bar', 2]];

let obj = Object.fromEntries(entries);

// obj => { foo: 1, bar: 2 };

5. ES11 新特性

5.1 可选链操作符

在 ES11 中，我们可以使用可选链操作符（?.）来简化我们操作深层嵌套的对象属性或方法时的代码。例如：

let obj = {
  foo: {
    bar: {
      baz: 'Hello'
    }
  }
};

let value = obj?.foo?.bar?.baz;

在这个例子中，我们使用了可选链（?.）来访问嵌套的属性。如果任意一个属性不存在，那么它将返回 undefined。

5.2 String.prototype.replaceAll()

在 ES11 中，我们可以使用 String.prototype.replaceAll() 方法来替换字符串中的所有匹配项。例如：

let str = 'Hello, world!';

str.replaceAll('l', 'x');   // 返回 'Hexxo, worxd!'

6. ES12 新特性

6.1 Promise.any()

在 ES12 中，我们可以使用 Promise.any() 方法来并行地执行多个 Promise，一旦其中一个 Promise 被 resolve，它就会返回这个 Promise 的结果。例如：

let p1 = Promise.resolve(1);
let p2 = Promise.reject(2);
let p3 = new Promise(resolve => setTimeout(resolve, 100, 3));

Promise.any([p1, p2, p3]).then(
  value => console.log(value),  // 输出 1
  error => console.log(error)   // 永远不会执行
);

在这个例子中，我们使用了 Promise.any() 方法来并行地执行多个 Promise，一旦其中一个 Promise 被 resolve，它就会返回这个 Promise 的结果。

6.2 WeakRefs

ES12 引入了 WeakRefs，用于获取对象的弱引用，它们可以用来编写更高效的 JavaScript 代码。例如：

let obj = { data: 'Hello, world!' };
let weakRef = new WeakRef(obj);

let newObj = weakRef.deref();   // 获取弱引用对象

// newObj 初始时等于 obj
obj = null;

// 这时，newObj 被释放，等于 undefined

在这个例子中，我们使用了 WeakRefs 来获取一个对象的弱引用。弱引用会在对象被垃圾回收时自动释放，从而避免了内存泄漏。

7. ES13 新特性

7.1 BigInt

在 ES13 中，我们可以使用 BigInt 来表示非常大的整数。例如：

let x = BigInt('12345678901234567890');
let y = BigInt(42);

x + y;   // 返回 12345678901234567932n

7.2 String.prototype.matchAll()

在 ES13 中，我们可以使用 String.prototype.matchAll() 方法来返回一个迭代器，它能够找到字符串中的所有匹配项。例如：

let regex = /(\d+)/g;
let str = 'Hello 123, world 456!';

for (let match of str.matchAll(regex)) {
  console.log(match[1]);   // 输出 '123' 和 '456'
}

在这个例子中，我们使用了 String.prototype.matchAll() 方法来查找一个字符串中的所有匹配项。它返回的是一个迭代器，我们可以在 for 循环中遍历匹配项。