likes
comments
collection
share

ECMAScript 2023 (ES14) 的新特性你都了解了吗？🔥🔥🔥

作者站长头像
站长
· 阅读数 40

介绍

ECMAScript (ES) 是指导 JavaScript 语言引入新功能的规范。即将发布的版本 ES2023 或 ES14 在 Chrome 中提供了一些新功能。请注意，早期的 Chrome 版本可能没有这些功能。

新的数组方法：

ES14 引入了三种新的数组方法。这些方法为修改原始数组的现有数组方法提供了非变异替代方法。让我们看看如何使用它们：

  • toReversed()
  • toSpliced()
  • toSorted()

ES14

// Define an array
const array = [1, 2, 3];

// Using the `toReversed` method
const array2 = array.toReversed();
console.log(array2);
console.log(array); // (original array remains unchanged)

// Using the `toSorted` method
const sortedArray = array.toSorted((a, b) => a - b);
console.log(sortedArray); // 
console.log(array); // (original array remains unchanged)

// Using the `toSpliced` method
const splicedArray = array.toSpliced(1, 2);
console.log(splicedArray); // 
console.log(array); // (original array remains unchanged)

[3, 2, 1]
[1, 2, 3]
[1, 2, 3]
[1, 2, 3]
[2]
[1, 2, 3]

从最后查找元素：

ES14 引入了两个新方法 findLast 和 findLastIndex ，它们允许从数组的最后一个位置查找元素。

  • 查找最后一个
  • 查找最后一个索引
const array = [1, 2, 3, 2, 1];

const lastElement = array.findLast((num) => num > 1);
console.log(lastElement); 

const lastIndex = array.findLastIndex((num) => num > 1);
console.log(lastIndex);

2
3

Symbols 作为 WeakMap 键：

使用 ES14，现在可以在 WeakMap 中使用 Symbols 作为键。Symbols 具有唯一的标识，使其适合唯一的键。

示例：使用上述方法。

const keyA = Symbol("version");
const keyB = Symbol("version");

const map = new WeakMap();
map.set(keyA, "ES2023");

console.log(map.get(keyA)); // "ES2023"
console.log(map.get(keyB)); // undefined

"ES2023"
undefined

Hashbang语法：

ES14 使 JS 引擎能够处理脚本文件开头的 hashbang 注释 (#!)。以前，操作系统在将脚本传递给 JS 引擎之前会剥离这些注释。通过此更新，JS 引擎将直接处理这些注释。

示例：使用上述方法

#!/usr/bin/env node

console.log("Hello, world!");

Hello, world!

Record 和 Tuple 类型：

const person = {
  name: "John Doe",
  age: 30,
  hobbies: ["coding", "reading", "playing guitar"]
};

这段代码定义了一个名为 person 的 Record，其中包含三个元素：姓名、年龄和爱好。name 元素是一个字符串，age 元素是一个整数，hobbies 元素是一个字符串数组。

以下是 ES14 之后的 ECMAScript 2023 中的元组示例：

const colors = ["red", "green", "blue", "purple"];

此代码定义了一个名为颜色的元组，其中包含四个元素：红色、绿色、蓝色和紫色。元组的元素现在可以是任何类型的数据。

管道运算符：

管道运算符由符号 |> 表示。它允许我们以更易读的方式将多个函数链接在一起。在上面的示例中，我们首先过滤数字数组以仅包含偶数。然后，将每个数字映射到它的双精度数。最后，将数组减少到其总和。

管道运算符是一个强大的新功能，可以帮助我们编写更简洁、可读的代码。它仍然没有被所有浏览器支持，但预计在不久的将来会得到广泛支持。

const numbers = [1, 2, 3, 4, 5];

const sum = numbers
  |> filter(number => number % 2 === 0)
  |> map(number => number * 2)
  |> reduce((accumulator, number) => accumulator + number, 0);

console.log(sum);

12

箭头函数中的命名参数：

ES14 通过引入命名参数简化了箭头函数语法，提高了代码可读性和可维护性。开发人员不再需要依赖对象解构来将命名参数传递给箭头函数；相反，他们可以直接在函数定义中定义它们。

异步迭代器和生成器：

支持异步迭代器。

生成器仍然受支持，但它们现在被认为是遗留功能。

异步迭代器是使用 async function*() 关键字定义的。

wait 关键字用于暂停异步函数的执行并等待 Promise 解析。

出于兼容性原因，next() 方法仍然可用，但不建议使用它。

async function* getNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = getNumbers();

for await (const number of iterator) {
  console.log(number);
}

1
2
3

结论：

ES14 为 JavaScript 带来了一些令人兴奋的功能，包括非变异数组方法、从最后查找元素、使用符号作为 WeakMap 键以及处理 hashbang 注释。这些功能增强了 JavaScript 的功能并提高了开发人员的工作效率。要使用这些新功能要确保浏览器是否是最新版本，也要做好向下兼容。如果在 Node.js 中使用这些功能，请检查兼容性或使用 core.js 等库进行填充。

转载自:https://juejin.cn/post/7282758586108182528
评论
请登录