Back

2026 年你应该使用的 JavaScript 特性

OpenReplay Team OpenReplay Team

Apr 4, 2026 · 3 min read

2026 年你应该使用的 JavaScript 特性

大多数关于 2026 年 JavaScript 的文章都聚焦于框架趋势、AI 工具和元框架选择。这些内容很有用,但留下了一个空白:语言本身有哪些新特性是你今天就可以开始使用的?

在 2024-2025 年期间,有几个在各浏览器中广泛可用的特性能够用更少的代码解决实际问题。以下是目前已经足够稳定、可以在生产环境中使用的特性。

核心要点

  • Object.groupBy() 和 Map.groupBy() 取代了冗长的 reduce() 模式,用于按键对数组进行分组。
  • 新的 Set 方法如 union()、intersection() 和 difference() 消除了对自定义辅助函数的需求。
  • Iterator helpers(迭代器辅助方法)支持对序列进行惰性、可链式的转换,无需创建中间数组。
  • RegExp.escape()、Promise.try() 和 import attributes(导入属性)完善了一系列实用且可用于生产环境的语言新增特性。

Object.groupBy() 和 Map.groupBy()

过去按属性对数组进行分组意味着要使用 reduce() 或工具库。ES2024 的分组方法将这一操作简化为一行代码。

const products = [
  { name: 'Widget', category: 'hardware' },
  { name: 'Plugin', category: 'software' },
  { name: 'Gadget', category: 'hardware' },
]

const grouped = Object.groupBy(products, (p) => p.category)
// { hardware: [...], software: [...] }

当你的键不是字符串或需要 Map 语义时,使用 Map.groupBy()。现代浏览器和最新的 Node.js 版本已经支持这些方法;你可以在 https://webstatus.dev/features/array-group 查看当前的支持状态。

新的 Set 方法:并集、交集和差集

最实用的现代新增特性之一是扩展的 Set API。现在你可以直接计算集合关系,无需编写辅助函数。

const frontend = new Set(['HTML', 'CSS', 'JavaScript'])
const backend = new Set(['Python', 'JavaScript', 'SQL'])

frontend.intersection(backend)        // Set { 'JavaScript' }
frontend.union(backend)               // Set { 'HTML', 'CSS', 'JavaScript', 'Python', 'SQL' }
frontend.difference(backend)          // Set { 'HTML', 'CSS' }
frontend.symmetricDifference(backend) // Set { 'HTML', 'CSS', 'Python', 'SQL' }

还包括关系检查方法,如 .isSubsetOf()、.isSupersetOf() 和 .isDisjointFrom()。这些方法现在已在现代浏览器中广泛可用;当前兼容性请参见 https://webstatus.dev/features/set-methods。

Iterator Helpers(迭代器辅助方法)

Iterator helpers 允许你惰性地应用 map、filter、take 和其他转换操作——无需先转换为数组。这是 2025 年开始广泛推出的、使用率较低的语言改进之一。

function* numbers() {
  let n = 0
  while (true) yield n++
}

const firstFiveEvens = numbers()
  .filter((n) => n % 2 === 0)
  .take(5)
  .toArray()
// [0, 2, 4, 6, 8]

这避免了创建中间数组,在处理大型或无限序列时特别有用。浏览器支持正在持续扩展;你可以在 https://webstatus.dev/features/iterator-methods 跟踪进度。

RegExp.escape()

在将用户输入传递给 RegExp 构造函数之前进行清理一直需要自定义工具函数。RegExp.escape() 现在是一个内置解决方案。

const userQuery = 'price: $10.00 (sale)'
const pattern = new RegExp(RegExp.escape(userQuery))

如果不进行转义,像 .、$ 和 ( 这样的字符会被解释为正则表达式语法。这个小型 API 新增特性消除了对临时转义工具的需求,并提高了动态构造正则表达式的安全性。你可以在 https://webstatus.dev/features/regexp-escape 跟踪浏览器支持情况。

Promise.try()

Promise.try() 包装一个函数——无论是同步还是异步——并始终返回一个表示结果的 promise。

const p = Promise.try(() => mightThrowSync())

如果函数抛出异常,返回的 promise 会被拒绝。如果它返回一个值或另一个 promise,该值将成为返回的 promise 的完成值。

当你想从可能是同步或异步的代码开始一个 promise 链时,这非常方便,无需手动担心包装逻辑。当前浏览器可用性可以在 https://webstatus.dev/features/promise-try 跟踪。

Import Attributes(导入属性)

加载非 JavaScript 模块的标准化语法使用 with 关键字,取代了旧的 assert 关键字。

import data from './config.json' with { type: 'json' }

这是现代浏览器支持的当前标准化形式。早期的 assert 语法不再是首选方法,因此新代码在导入 JSON 或其他模块类型时应使用 with 关键字。你可以在 https://webstatus.dev/features/json-modules 关注 JSON 模块(包括 JSON 导入属性)的平台支持情况。

结论

这些不是提案或实验性特性。它们是稳定的、广泛支持的,并且今天就可以在生产环境中使用。如果你对现代 JavaScript 的认知模型仍然停留在可选链和 async/await,那么是时候更新了。

从 Object.groupBy() 和新的 Set 方法开始——它们最容易融入现有代码并立即减少样板代码。然后,探索用于惰性数据处理的 iterator helpers 和用于在启动基于 promise 的工作流时更清晰处理的 Promise.try()。

常见问题

大多数是可以的。Object.groupBy、新的 Set 方法和 iterator helpers 在现代浏览器和最新的 Node.js 版本中都得到支持。RegExp.escape 和 Promise.try 的支持时间线稍新一些,因此在发布之前请检查目标环境的兼容性表。

如果你的目标是现代浏览器和最新的 Node.js 版本,大多数这些特性都可以原生工作。对于较旧的环境,core-js 为 groupBy、Set 方法、iterator helpers 和 Promise.try 提供了 polyfill。检查你的构建工具以确认哪些内容会被自动转译。

数组方法在每一步都会创建一个新数组。Iterator helpers 是惰性的,意味着它们一次处理一个元素,并且只在被消费时才处理。这使得它们对于大型数据集或无限序列更具内存效率,因为不会分配中间数组。

Promise.try 主要是一个便利工具。它让你可以从一个可能返回值或抛出错误的函数开始 promise 链,而无需编写额外的包装逻辑。如果函数抛出异常,返回的 promise 会被拒绝;如果它返回一个值或 promise,该结果将成为完成值。

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog