JavaScript 本身在版本管理方面做得已经很不错了。我们会介绍该语言本身的新特性，但作为一名 JavaScript 开发者，掌握的内容远不止语言本身，还延伸到运行时、框架、库和工具链。

JavaScript 的新功能

JavaScript 每年都会发布新版本，这是一种相当不错的做法。

ECMAScript 2025

最新的是 ECMAScript 2025，该版本于 2025 年 6 月发布，完整规范已可查阅。

迭代器辅助方法

现在迭代器上直接提供了 .map()、.filter()、.take()、.drop() 这类支持惰性求值的方法。说实话，作为一个主要做前端开发的人，我觉得这有点深奥。毕竟我们已经可以对数组进行映射操作了，这到底有什么特别的？不过我确实理解性能方面的考量。

const result = array
  .map(x => x * 2)      // 在内存中创建一个新数组
  .filter(x => x > 10)  // 再一次
  .slice(0, 3);         // 再一次

这就是所谓的"缓慢"且"内存占用量大"的方式，尤其是当数组相当大时。新做法是这样的：

const result = Iterator.from(array)
  .map(x => x * 2)
  .filter(x => x > 10)
  .take(3)
  .toArray(); // 不会创建新数组，计算在执行 3 次后停止

有个很好的附加好处：Iterator.from() 功能适用于所有可迭代对象。不仅适用于数组，还适用于集合、映射、生成器等，意味着它们都能使用同一套实用的函数。

Set 集合方法

在 JavaScript 中，Set 相当好用，因为它和数组类似，但能保证每个元素都是唯一的。如果你有两个集合，现在有相关方法可以获取它们之间的有趣关系，比如哪些元素有交集、哪些没有。

const youKnow = new Set(["JS", "Python", "CSS", "SQL"]);
const jobNeeds = new Set(["JS", "TypeScript", "Python"]);

// 你已具备的该岗位所需技能
youKnow.intersection(jobNeeds); // → Set {"JS", "Python"}

// 整合一切：你的完整技术栈与工作需求
youKnow.union(jobNeeds); // → Set {"JS", "Python", "CSS", "SQL", "TypeScript"}

// 这份工作所要求但你目前尚不具备的能力（技能差距）
jobNeeds.difference(youKnow); // → Set {"TypeScript"}

// 那些你具备但职位并不看重的技能
youKnow.difference(jobNeeds); // → Set {"CSS", "SQL"}

// 仅出现在其中一个集合中、而非两个集合都有的技能
youKnow.symmetricDifference(jobNeeds); // → Set {"CSS", "SQL", "TypeScript"}

// 所有岗位要求是否都在你所掌握的知识范畴之内？
jobNeeds.isSubsetOf(youKnow); // → false

// 你是否掌握了所有相关技能，甚至更为出众？
youKnow.isSupersetOf(jobNeeds); // → false

// 你和这份工作完全不匹配吗？
youKnow.isDisjointFrom(jobNeeds); // → false

我觉得这相当实用。

正则表达式更新

场景如下：你正在开发一个站内搜索功能，用户可以输入自己的搜索词，并且你想将其实现为正则表达式搜索。这其中存在一定风险，因为用户输入的某些字符是正则表达式中的"特殊字符"，比如美元符号($)会匹配行尾字符。因此，如果用户搜索 $9，而你直接将其代入正则表达式，程序就会出错。需要对哪些字符进行"转义"才能解决这个问题，取决于所使用的正则表达式实现方式。

经过长达 15 年的漫长历程，RegExp.escape() 终于问世了。

const query = userInput; // e.g. "$5.00 (off!)"

// 之前：会对任何正则表达式特殊字符造成中断
const badRe = new RegExp(query, "g");

// ES2025：一种方法，解决问题
const goodRe = new RegExp(RegExp.escape(query), "g");

正则表达式中"flags"的工作方式也有了更新。最常见的 "i" 标志表示不区分大小写，整个正则表达式末尾加上 /i 意味着整个表达式都不区分大小写。但如果你只想让正则表达式的部分不区分大小写呢？现在你可以将表达式的部分内容用括号包裹起来，并在开头添加这些标志。

// 旧版方式：无法混用大小写敏感设置
/[a-z]+@[A-Z]+/i  // 'i' 标志适用于所有内容

// ES2025：按组内联修饰符
/(?i:[a-z.]+)@(?-i:[A-Z]+)\.(?i:com|org)/
// ^^^^ 不区分大小写部分
//              ^^^^^ 区分大小写部分
//                            ^^^ 不区分大小写部分

Promise 新特性

Promise 迎来了一次小更新，带来了 Promise.try()，帮助简化错误处理。一个函数可能以同步或异步的方式出错，过去你必须分别处理它们，但现在可以统一处理了：

// 一个可能是异步、可能同步抛出异常的函数
function loadUser(id) {
  if (!id) throw new Error("No ID");          // 同步抛出
  return fetch(`/api/users/${id}`);           // 异步
}

// 之前：两条独立的错误处理路径
let p;
try {
  // 捕获同步抛出
  p = loadUser(id);
} catch (e) { handleError(e); }
// 以及异步 reject
p?.catch(e => handleError(e));

// ES2025：一行代码，一个 .catch()
Promise.try(() => loadUser(id))
  .then(user => render(user))
  .catch(err => showError(err));  // 捕获两者

Import Attributes 导入属性

导入属性是我个人非常喜欢的一大特性。首先，我喜欢将 JSON 数据直接作为 JSON 数据导入的思路，而不是去获取它、解析它，还要处理各种相关操作：

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

整个 with 部分以及后续的对象就是所谓的"导入属性"，它们还有一些其他用法。

JSON 导入只是看起来更美观，还能少写一两行代码，但平心而论，它存在一些明显的弊端。其中一个重大弊端是：如果导入失败，整个模块图都会随之崩溃，这非常糟糕。你可以改用动态的 import() 来捕获失败情况：

try {
  const { default: data } = await import(url, {
    with: { type: 'json' },
  });
} catch (error) {
  // 降级逻辑
}

但这不如直接 fetch JSON 数据得到的效果好，所以还是有点差强人意。使用时要谨慎。

不过，JSON 并不是唯一可以通过导入属性导入的内容。当我说导入属性是我个人最喜欢的功能时，我主要是指我很期待用这种方式导入 CSS。

import componentStyles from "./component.css" with { type: "css" };

我真的很喜欢我们可以将 CSS 保留在 CSS 文件中的方式，这些文件可以存放在与 JavaScript 组件紧邻的文件夹中。

import sheet from './styles.css' with { type: 'css' };

class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.adoptedStyleSheets = [sheet];
  }
}

这并非 ES2025 的全部内容，市面上还有很多专门讲解这部分内容的文章。比如其中有关于 Float16Array 的一些介绍，这部分内容超出了我的专业范围，但它的原理是在你确定需要的情况下，用精度换取内存使用效率。

ECMAScript 2026（预计 2026 年中）

2026 年才刚过半，但我们预计今年年中仍会像往年一样发布年度版 ECMAScript。以下是已进入第 4 阶段、很可能会纳入此次更新的内容。

Temporal API

这无疑是近期 JavaScript 领域最令人振奋且实用的新东西。一句话概括：JavaScript 中的日期和时间处理如今变得好用了，无需依赖第三方库。长期以来，像 Moment 这样功能强大但体积较大的库填补了这一空白，却让开发者不得不在性能和开发体验之间做出艰难抉择。

在我撰写本文时，Safari 是最后一个还不支持该功能的浏览器，但相关工作已经在推进中，目前已推出技术预览版，所以离正式支持也不远了。

如今有一件事做起来轻而易举，那就是获取特定时区的时间，而且无需任何库。

const now = Temporal.Now.zonedDateTimeISO("America/New_York");
console.log(now.toString());
// 或者更易读的格式
console.log(now.toLocaleString());

TC39 会议有一段代码可以在开发者工具控制台中运行，它会显示即将到来的会议在你当前时区的时间：

Temporal.ZonedDateTime.from('2026-03-10T10:00[America/New_York]')
  .withTimeZone(Temporal.Now.timeZoneId()) // 你的时区
  .toLocaleString();

这也太酷了。

Temporal 能做的事情数不胜数，这里还有几件以前体验极差的功能。

把"一个月"加到一月的最后一天，会得到一个非常奇怪的结果：

const date = new Date(2026, 0, 31); // Jan 31
date.setMonth(date.getMonth() + 1); // "add one month"
console.log(date.toDateString()); // Sun Mar 03 2026

但有了 Temporal API，就没问题了：

const jan31 = Temporal.PlainDate.from("2026-01-31");
const feb = jan31.add({ months: 1 });
console.log(feb.toString()); // 2026-02-28

而且，现在比较各种内容的逻辑也没问题了：

const a = Temporal.Duration.from({ hours: 25 });
const b = Temporal.Duration.from({ days: 1 });

const cmp = Temporal.Duration.compare(a, b, { relativeTo: Temporal.Now.plainDateISO() });
console.log(cmp); // 1 (25h > 1 day)

Explicit Resource Management 显式资源管理

在处理异步函数时，新增了一个 using 关键字，配合 await 能确保清理工作的执行。运行时会保证在变量超出作用域时，调用 Symbol.dispose（或 Symbol.asyncDispose）。

class FileHandle {
  constructor(path) {
    this.path = path;
    console.log(`Opened ${path}`);
  }

  async write(data) {
    // ... write data
  }

  async [Symbol.asyncDispose]() {
    await someFlushOperation();
    console.log(`Flushed and closed ${this.path}`);
  }
}

async function saveData() {
  await using file = new FileHandle("output.txt");
  await file.write("hello world");
  // file is automatically flushed + closed here, even if an error is thrown
}

对于单个资源，using 关键字用起来很不错，但现在还有一个 DisposableStack 类，适用于需要确保清理的多个资源。

async function runJob() {
  await using stack = new AsyncDisposableStack();

  const db = stack.use(await openDatabase());
  const file = stack.use(new FileHandle("output.txt"));
  const tmpDir = stack.defer(async () => removeTempDir("/tmp/job"));

  // Do work...
  await file.write(await db.query("SELECT * FROM jobs"));

  // 即便出现异常抛出，这三者也会在此处按逆序完成清理
}

Array.fromAsync / 迭代器排序

Array.fromAsync 首次推出于 2024 年，但该方法存在一些规范问题，最终在 ES2026 中才正式纳入规范。它在遍历异步迭代器时会等待每个 yield 生成的值，并将结果收集到一个普通数组中。如果没有这个方法，你就必须手动循环并执行推入操作。

async function* fetchNumbers() {
  yield 1;
  await new Promise(r => setTimeout(r, 100)); // simulate async delay
  yield 2;
  await new Promise(r => setTimeout(r, 100));
  yield 3;
}

const numbers = await Array.fromAsync(fetchNumbers());
console.log(numbers); // [1, 2, 3]

当你等待一个遍历所有异步函数并生成结果的函数调用时（比如分页之类的场景），这个方法可能最有用。除了使用 yield，你还可以传入一个 Promise 数组，这些 Promise 会在全部解析完成后返回。

说到分页，Iterator.concat 是一项新功能，它允许你惰性地评估正在遍历的每一项内容。因此，你无需事先将所有内容都展开到数组中再进行遍历，但如果你提前终止遍历，就能节省原本用于预先填充数组的内存。

const page1 = [{ id: 1 }, { id: 2 }][Symbol.iterator]();
const page2 = [{ id: 3 }, { id: 4 }][Symbol.iterator]();
const page3 = [{ id: 5 }, { id: 6 }][Symbol.iterator]();

for (const item of Iterator.concat(page1, page2, page3)) {
  process(item); // streams through all pages lazily
}

Error.isError()

你现在可以可靠地判断一个值是否是真正的 Error 对象，而不只是一个看起来有点像它的对象。这在某些场景中非常有用，比如集中式错误报告服务——这类服务可能会接收来自 Web Worker 或 iframe 等不同"上下文"的错误，而这些上下文会导致判断出错。

Math.sumPrecise

想必你见过 console.log(0.1 + 0.2); 的结果是 0.30000000000000004。试试 console.log(Math.sumPrecise([0.1, 0.2]));（目前仅在 Firefox 中支持该方法），你会发现结果完全一样。

Base64 / Hex 编码

现在有了简单直接的方法调用来实现这些功能。

const val = "Frontend Masters!";
const textEnc = new TextEncoder();
const bytes = textEnc.encode(val);
console.log(bytes.toBase64());
// 'RnJvbnRlbmQgTWFzdGVycyE='
console.log(bytes.toHex());
// '46726f6e74656e64204d61737465727321'

框架新特性

React 生态系统

React 19 已于 2024 年 12 月正式发布，至今已有一段时间。目前已更新至 19.2 版本，关于 React 20 的新功能，公开的详细信息还不算多。

React 19 是一次相当重大的版本更新，包含了 RSC（React 服务器组件）、React 编译器以及服务器操作。以下是对这些功能的简要介绍：

• RSC：如果你能引入一个 Node 服务器，一些通常会打包到客户端 JavaScript 代码中的组件可以被省略，相关工作转而在服务器上完成，然后只将所需的数据反馈回来。

• Server Actions：说到有一个 Node 服务器可用，这些操作允许你调用专门存在于服务器上的函数。表单处理就是一个典型的例子。

• Compiler：过去，一些性能优化一直需要人工去摸索。将 React 代码交给这个编译器处理，它就能替你完成这些优化。用一点构建复杂度，换取一定的性能提升。

当然，还有一大堆小细节，但总体来说，这些是你需要知道的重点。React Native 更新到了 0.83 版本。那些基于 server 的 React 技术，去年接连出现了严重的安全漏洞，这无疑让很多人感到恐慌。

Vue 生态系统

Vue 3.5 保持稳定，而 Vue 3.6 已进入 alpha 测试阶段，推出了一项名为 Vapor Mode 的可选新功能，能实现大幅性能提升（性能可与 Solid 和 Svelte 5 相媲美）。

作为一个完全的 Vue 新手，我有点难理解 2025/2026 年的行业现状。尤雨溪是这里的核心人物，但他还运营着 VoidZero（JavaScript 工具公司），该公司如今推出了 Vite+，包含 Vite 本身、格式化、代码检查、测试工具等大型项目。这些都不是 Vue 专属的。

Vue 的主要元框架是 Nuxt，它已经更新到 4.0 版本。Nuxt 本身的"维护方"是 NuxtLabs，该机构已被 Vercel 收购。Pinia 似乎是 Vue 主流的状态管理库，它更新到了 3.0 版本，并停止了对 Vue 2 的支持。

Svelte 生态系统

Svelte 正凭借第五版大放异彩。这是 Svelte 领域的一次重大更新，其中包含了 Runes API，这套 API 彻底改变了响应式的工作方式，让响应式变得更"细粒度化"，意味着更高的效率和更快的速度。

JavaScript 运行时

最主流的运行时无疑是内置在浏览器中的那些。但就你可以自行选择和运行来搭建自己项目的运行时而言，Node 仍是主导者，同时还有两个值得关注的竞争对手。最近三者的趋同性远大于差异性，它们都原生支持 TypeScript，也都对标准的 Node 提供了更多支持。

Node.js

最近 Node 最大的新闻是它可以原生运行 TypeScript 文件：

node my-script.ts

这在 Node 22.18.0 版本及以上生效，不再需要 --experimental-strip-types 标志。请注意，它仍然会移除类型，这意味着如果你的 TypeScript 代码中存在实际问题，它无法帮你发出警告。

Node 社区最大的新闻往往是一些简单却至关重要的核心内容，比如安全性提升、性能优化，以及与浏览器 JavaScript API 的对齐。

Bun

Bun 的重大版本更新是 1.3，其中包含了大量围绕开发服务器运行的 DX 功能。只需将 bun 指向 HTML 文件，就能运行一个功能齐全的开发服务器：

bun './**/*.html'

这也完成了所有的处理和打包工作，在这种场景下让 Bun 成了 Vite 的一个替代方案。

关于 Bun 最大的消息是，Anthropic（Claude 的母公司）在去年年底收购了 Bun。总体来看这对 Bun 来说是个好消息，能为它提供一个稳定且资金充足的发展平台。

通常来说，人们选择 Bun 是因为它的速度。它从 npm 安装的速度极快，且整体性能也普遍更快，代价是牺牲了一定的稳定性。

Deno

Deno 已经推出 2.0 版本有一段时间了。据我所知，它完全兼容 Node.js，是这三者中最稳定的。现在，借助包中的 npm: 规范符，它也完全兼容 npm 了。

人们选择 Deno 通常是因为其稳定且以安全为首的架构。Deno 默认就是安全的。除非你专门启用相关权限，否则使用 Deno 运行的程序无法访问敏感接口，比如文件系统访问、网络连接或环境变量。你必须通过命令行标志或运行时权限提示明确授予程序对这些资源的访问权限。这与 Node 存在重大区别：在 Node 中，依赖项会被自动授予对所有系统输入输出的完全访问权限，这可能会在你的项目中引入隐藏的漏洞。

构建工具

Vite

Vite 已成为 JavaScript 生态系统中主流的构建工具。虽然它诞生于 Vue 团队之手，但却是一款适用于几乎所有前端项目的构建工具。它的设计理念是：本地开发时，仅更新代码中发生变化的小部分，无需完整打包，同时还能按需生成符合生产环境标准的打包文件。

Vite 最近更新到了 v8 版本。这是一次重大更新，因为它不再依赖第三方打包工具 Rollup，而是改用了自研的打包器 Rolldown。这与 Vite 近期致力于打造更"统一工具链"的目标相契合。他们将这套完整工具链命名为 Vite+，其中包含 Vite 的开发服务器、代码格式化、代码检查、类型检查、测试、任务执行、monorepo 支持以及打包功能。

他们甚至在着手通过一个名为 Void 的"部署平台"将这一目标更进一步，该平台利用 Cloudflare 的服务来实现托管、数据存储、云函数等各类功能。

如今几乎所有框架都在使用 Vite：Astro、SolidStart、SvelteKit、Nuxt 等。值得注意的例外是 Next.js，它使用 webpack 并正转向 Turbopack。

Turbopack

Turbopack 是 Vercel 旗下的打包工具，自 Next.js 16 版本起已成为默认打包工具。Turbopack 是一个基于 Rust 的项目，其热刷新速度据称比早期 Next.js 版本中的 webpack 快 5 到 10 倍。目前 Turbopack 仅适用于 Next.js。

webpack

webpack 仍被广泛使用，并且有 2026 年的开发计划，其中包含许多减少各类 loader 需求及其他简化操作的思路。这是一项令人期待的更新，因为业界对 webpack 的普遍看法是它过于复杂。

TypeScript

TypeScript 刚刚发布了 6.0 版本。官方表示 7.0 版本将于 2026 年中推出，这将是一次重大更新，将切换至全新的基于 Go 语言的编译器。6.0 版本的核心是做好准备工作，帮助大家适应这一变更。

严格模式（Strict）现在默认 true，module 默认值为 esnext，target 适配当年的 ES 规范（当前为 es2025），且 types 默认值现在为空数组，而非全量收集 node_modules/@types 下的所有内容。仅这一项改动就会导致大量项目出现问题，但同时也能将项目速度提升 20% 至 50%。

很可能值得为 v7 做好准备，因为你几乎肯定会希望获得在 VS Code 和 Playwright 等使用场景中实现的约 10 倍速度提升。

值得注意的是，TypeScript 已成为 GitHub 上排名第一的语言，同比增长达到 66%。

JavaScript 中的类型？

几年前，曾有一些关于直接在 JavaScript 中加入类型的讨论。这样或许就能在无需编译器的情况下获得 TypeScript 的部分优势。但这一想法目前似乎进展甚微，也不太可能真正取代 TypeScript 所能实现的功能。

AI 人工智能

鉴于 TypeScript 如今在开发者实际使用的技术以及可供大语言模型训练的开源资源中都极为普及，AI 如今写代码的能力已经非常出色，尤其是在 TypeScript 方面。有数据显示，92% 的开发者都在不同程度上使用 AI 辅助写代码，这一增长速度令人震惊，也无疑是当前开发领域最重大的趋势。

测试

所有主流的 JavaScript 测试框架依然活跃，承担着大部分的测试工作。Jest、Jasmine、Mocha 等都是如此。不过行业也出现了一些新的变化，尤其是随着 Vite 变得异常流行，其配套的测试框架 Vitest 也迅速走红。它与 Jest 兼容，因此将测试迁移到 Vitest 上通常非常简单，而且速度快得多。Vitest 还支持"浏览器模式"，这意味着它可以在真实浏览器中运行测试，这对组件测试来说至关重要。这种模式通常需要搭配 Playwright 使用，Playwright 的人气也在飙升，它本身就能完成"端到端"测试，其受欢迎程度已经超过了 Puppeteer 或 Cypress。

Meta Frameworks 元框架

Next.js

Next.js 已更新至 16 版本，这是首个将 Turbopack 作为默认工具的版本。这个版本的 Next 会自动使用 React 编译器和 React 服务器组件，理论上能全面提升性能，但实际效果似乎更复杂且褒贬不一。

Remix / React Router

从几年前开始，Remix 就被 Shopify 收购了。它推出了第二个版本，随后官方宣布原本计划作为 Remix v3 的内容，实际上会直接成为 React Router v7。如今 Remix v3 仍在推进中，但正处于积极开发阶段。最大的变化是，React 不再是它的一部分了。

TanStack

Remix 引发的混乱带来的一些影响，反而可能让 TanStack 生态受益。TanStack 是一套工具集合，其中包括一款相当受欢迎的路由工具。和之前的 Remix 一样，这款路由工具也发展成了一个框架。

Astro

Astro 已经发展了多年，势头依旧强劲，丝毫没有放缓的迹象。就在今年，它们被 Cloudflare 收购，这总体来看是件好事，因为为顶尖的前端框架打造成熟的商业模式难度极大，而解决方案似乎是与专业的托管平台合作。

如果你想打造一个默认静态化的网站，同时又能沿用现代 JavaScript 框架的组件化架构，还能轻松启用更具动态性的功能，那么 Astro 就是黄金标准。

Astro 的最新版本为 6.0，该版本新增了可自定义开发环境中使用的运行时、内容安全策略，以及一款实验性的更快编译器。紧随其后的是 6.1 版本，包含了诸多实用的配置优化等改进。

npm

微软收购 GitHub 已经过去 6 年了，目前运行状况良好。而 GitHub 自身则在正常运行时间上屡屡出问题。

npm 存在的另一个不太好的问题是供应链安全事件，比如 s1ngularity 事件，该事件窃取了用户的凭证、令牌和配置文件，并将其公开发布到 GitHub 上。还有 debug/chalk 事件，恶意的包更新发布后，会将加密交易重定向到恶意攻击者的钱包。此外还有蠕虫病毒，这是一种自我复制的窃取凭证的恶意程序，其 2.0 版本会覆盖并删除用户主目录下的所有文件。该蠕虫影响了 796 个 npm 包，下载量超过 2000 万次。从安全角度来看，去年对 npm 来说实在算不上好。

如果你有重要的生产应用在使用 npm，不妨试试 Socket 这类工具来获得一些保护。

我该学些什么？

永恒不变的答案是，学习这些事物的基础原理技能，无论工具和框架等发生何种变化，都将对你大有裨益。而且，AI 在代码编写方面对我们的帮助越大，我们就越需要像你这样真正懂行的人——无论代码是如何生成的，你都能为其规划、指导、打磨、测试、构建架构，并赋予代码良好的品味。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13633