首页 > 文章 > 前端

JavaScript 的新增功能：ECMAScript 版本

来源：dev.to

时间：2024-09-10 20:06:59 262浏览收藏

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JavaScript 的新增功能：ECMAScript 版本》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

tl;dr: 探索 javascript ecmascript 2024 的突破性功能。本指南探讨了旨在改变您的编码体验的最新创新。从用于轻松数据分组的新 groupby 方法到简化日期和时间管理的改变游戏规则的 temporal api，ecmascript 2024 配备了可提高效率和精度的工具。

ecmascript 是 javascript 的基本组件。自 20 世纪 90 年代中期以来，ecmascript 不断发展，为开发人员提供了新的功能，丰富了 web 体验的动态性和用户友好性。从简单的脚本到复杂的框架，它影响着数字景观并激发了网络开发的创造力和创新。

多年来，ecmascript 已经发布了多个版本，每个版本都带来了新功能和改进。在本指南中，我将解释最新的 ecmascript 2024（第 15 版）中的新增内容。准备好探索将彻底改变我们编码方式的最新功能！

使用 groupby 方法对同步 iterables 进行分组

javascript 开发人员经常需要根据特定标准将数据组织成组。 ecmascript 2024 中的新 groupby 方法使此任务变得轻而易举。想象一下，您有一个项目集合，并希望按特定属性对它们进行分组 - groupby 是您的首选工具！

什么是groupby？

groupby 方法是一个静态方法，可在 object 和 map 上使用。它允许您根据从每个项目派生的键快速有效地对集合中的项目进行分组。结果是一个新对象，其中每个键对应一个组，值是属于该组的项目数组。

假设您有一群人，并且您想按年龄对他们进行分组。以下是使用 groupby 方法实现此操作的方法。

const people = [
  { name: "alice", age: 25 },
  { name: "bob", age: 30 },
  { name: "charlie", age: 25 },
  { name: "david", age: 30 },
  { name: "eve", age: 35 }
];
const groupedbyage = object.groupby(people, person => person.age);
console.log(groupedbyage);

输出

{
  "25": [
    { "name": "alice", "age": 25 },
    { "name": "charlie", "age": 25 }
  ],
  "30": [
    { "name": "bob", "age": 30 },
    { "name": "david", "age": 30 }
  ],
  "35": [
    { "name": "eve", "age": 35 }
  ]
}

promise.withresolvers()

javascript promise 一直是我们管理异步操作的可靠伙伴。但在 ecmascript 2024 中，出现了一个新工具：promise.withresolvers()。这个强大的静态方法为您提供了直接从外部代码完全控制承诺命运的关键，无论它是解决还是拒绝。

这个 promise.withresolvers() 函数返回一个具有三个属性的对象：一个新的 promise 以及 resolve 和 reject 函数与之相关。

假设您正在管理一项可以根据用户输入完成或取消的任务。以下是如何使用 promise.withresolvers() 函数。

function createcontrollablepromise() {
  const { promise, resolve, reject } = promise.withresolvers();

  // simulate an async task.
  settimeout(() => {
    console.log("task is pending...");
  }, 1000);

  return { promise, resolve, reject };
}

const { promise, resolve, reject } = createcontrollablepromise();

// somewhere in your code, you can resolve or reject the promise.
settimeout(() => {
  resolve("task completed successfully!");
  // or if something goes wrong.
  reject("task failed due to an error.");
}, 3000);

promise
  .then(result => console.log(result))
  .catch(error => console.error(error));

颞

您是否曾经在 javascript 的 date api 上遇到过困难？这可能非常具有挑战性。

在 ecmascript 2024 中，一个名为 temporal 的现代而强大的 api 旨在使日期和时间的处理变得更容易、更直观、更准确。这个改变游戏规则的 api 修复了旧 date 对象的怪癖，并带来了许多新功能。

temporal api 是 javascript 处理日期和时间的新方法。与繁琐且容易出错的旧 date api 不同，temporal 提供了更精确、更灵活的方法。

例如，如果您计划将项目截止日期从今天起 90 天，temporal 可以轻松计算确切的日期。

请参考以下代码示例。

// getting the current date in iso format.
const today = temporal.now.plaindateiso();
console.log(today.tostring()); // output: "2024-07-02"

// adding 90 days to the current date to calculate the deadline.
const deadline = today.add({ days: 90 });
console.log(deadline.tostring()); // output: "2024-09-30"

// checking how many days remain until the deadline.
const daysuntildeadline = deadline.since(today).days;
console.log(`days until deadline: ${daysuntildeadline}`); // output: "days until deadline: 90"

此示例展示了 temporal 如何简化调度任务，使其成为任何处理基于时间的操作的 javascript 开发人员的必备工具。

正则表达式 v 标志

ecmascript 2024 引入了正则表达式的新增强功能：v 标志。此添加允许更复杂的模式匹配和字符串操作，使开发人员能够更好地控制处理复杂的文本处理任务。

v 标志 与正则表达式的精度和表达力有关。它引入了集合表示法，这使得定义匹配特定字符组的模式变得更加容易，尤其是那些具有特定 unicode 属性的模式。这意味着您可以创建更准确和可读的正则表达式模式。

让我们探索如何在正则表达式中使用 v 标志 来根据 unicode 属性匹配一组字符。

// regular expression to match any character with the unicode property "letter" (l).
const regex = /\p{l}/v;

// test string containing various unicode characters.
const teststring = "abc123ΩΩß漢字";

// matching all characters with the "letter" property.
const matches = [...teststring.matchall(regex)];
console.log(matches.map(match => match[0])); // output: ["a", "b", "c", "Ω", "Ω", "ß", "漢", "字"]

使用顶级 await 简化异步代码

javascript ecmascript 2024 引入了 顶级 await，这是一个用于在模块级别处理异步操作的游戏规则改变者。此功能消除了将代码包装在异步函数中的需要，使您的代码更简单且更易于维护。

传统上，await 只能在异步函数中使用，这意味着您必须为任何异步操作创建包装函数。顶级等待改变了这一点，允许您直接在模块的顶级范围内使用等待。这使得在首次加载模块时处理异步任务（例如获取数据或加载资源）变得更加容易。

// data.js
const response = await fetch('https://api.example.com/data');
export const data = await response.json();

// main.js
import { data } from './data.js';
console.log(data); // logs the fetched data

格式良好的方法

在全球化的 web 环境中，应用程序必须支持多种语言和符号，处理 unicode 字符串至关重要。 ecmascript 2024 引入了格式良好的 unicode 字符串的概念，它确保 javascript 在不同环境中一致且可靠地处理 unicode 数据。

格式良好的 unicode 字符串遵循正确的编码规则，确保正确表示字符。以前，格式错误的 unicode 字符串（即具有无效序列的字符串）可能会导致 javascript 中出现意外行为或错误。这项新功能有助于识别和纠正这些问题，使您的代码更加健壮。

让我们看看如何检查字符串的格式是否正确以及如何纠正格式错误的字符串。

// Example of a well-formed Unicode string.
const string1 = "Hello, InfoWorld!";

// Example of a malformed Unicode string.
const string2 = "Hello, \uD800world!"; // \uD800 is an unpaired surrogate

// Checking if strings are well-formed.
console.log(string1.isWellFormed()); // Output: true (well-formed)
console.log(string2.isWellFormed()); // Output: false (malformed)

// Correcting the malformed string.
console.log(string2.toWellFormed()); // Output: 'Hello, �world!'

在上面的代码示例中，我们使用了以下方法：

iswellformed()：检查字符串是否根据 unicode 标准正确编码。如果字符串包含任何无效序列，则返回 false。
towellformed()：返回一个新字符串，其中任何格式错误的序列都被 unicode 替换字符 � 替换（通常称为 替换字符）。 这可确保字符串正确 -已形成，即使最初包含错误。

结论

感谢您的阅读！ ecmascript 2024（第 15 版）引入了一系列强大的功能，增强了 javascript 的灵活性、可靠性和效率，使其更有能力应对现代 web 开发挑战。

使用 groupby 方法对同步迭代进行分组提供了一种优雅的方式来分类和管理数据集合，从而简化了数据处理任务。
promise.withresolvers 方法提供了一种更受控制且更易于访问的方式来处理异步操作，为开发人员提供了一种在代码中管理 promise 的简化方法。
temporal api 彻底改变了 javascript 中的日期和时间管理方式，为传统 date 对象提供了现代、精确且用户友好的替代方案。
顶级 await 通过允许在模块级别使用 wait 来简化异步编程，使代码更清晰、更易于理解。
正则表达式 v flag 引入了复杂模式匹配和字符串操作的新可能性，为开发人员提供了更具表现力和更强大的正则表达式。
格式良好的 unicode 字符串 确保 javascript 在不同环境中一致且准确地处理文本数据，防止数据损坏并增强国际化应用程序的可靠性。