ECMAScript 2025 这些新特性值得关注！

August 6, 2025

34 views

3760 words

2025 年 6 月 25 日，第 129 届 Ecma 大会正式批准了 ECMAScript 2025
的语言规范，这也意味着这个版本已经成为正式标准。
本文将带你快速了解 ECMAScript 2025 中最值得关注的几个新特性，掌握这些功能，你的 JavaScript 技能将再次进阶！

ECMAScript

接下来就带着大家一一认识~

Import 属性与 JSON 模块支持

长期以来，开发者通过 fetch + JSON.parse 或 Webpack loader 来加载 .json 文件，现在你可以这样写了：

// 静态导入
import configData1 from './config-data.json' with { type: 'json' };

或者动态导入：

// 动态导入
const config = await import('./config.json', {
  with: { type: 'json' }
});

ES2025 正式引入了 import attributes，用于导入非 JavaScript 类型的模块，第一批支持的是 JSON这为浏览器端模块生态注入了新的灵活性，未来也可能扩展到 CSS、WASM 等模块。

应用场景与示例

① 配置文件加载
用于加载构建环境、主题、自定义参数等前端配置文件：

// config.json
{
"apiBaseUrl": "https://api.example.com",
"theme": "dark"
}

// app.js
import config from'./config.json'with { type: 'json' };

fetch(`${config.apiBaseUrl}/users`)
  .then(res => res.json())
  .then(console.log);

② 前端国际化资源（i18n JSON）
配合语言包 JSON 文件，实现多语言切换：

// en.json
{
"welcome": "Welcome",
"logout": "Log Out"
}

// zh.json
{
"welcome": "欢迎",
"logout": "退出登录"
}

// i18n.js
const lang = navigator.language.startsWith('zh') ? 'zh' : 'en';
const messages = awaitimport(`./${lang}.json`, {
with: { type: 'json' }
});

document.getElementById('welcome').textContent = messages.default.welcome;

相信大家的项目中还有很多这样的场景可以用到！

迭代器辅助方法

你是否厌倦了频繁使用 Array.map().filter() 等数组链式调用？ ES2025 引入了迭代器辅助方法

（Iterator Helpers），不仅语法更清晰，而且性能更优。
const arr = ['a', '', 'b', '', 'c', '', 'd', '', 'e'];
const result = arr.values() // 创建原生迭代器
  .filter(x => x.length > 0)
  .drop(1)
  .take(3)
  .map(x => `=${x}=`)
  .toArray();

console.log(result); // ['=b=', '=c=', '=d=']

这些方法包括：

返回迭代器的方法：.filter(), .map(), .flatMap()
返回布尔值：.some(), .every()
返回值：.find(), .reduce()
不返回值：.forEach()
特有方法：.drop(n), .take(n), .toArray()

其他迭代器辅助方法是迭代器独有的：

iterator.drop(limit)返回不包含第一个limit元素的迭代器iterator。
iterator.take(limit)返回包含的第一个limit元素的迭代器iterator。
iterator.toArray()iterator收集数组中所有剩余元素并返回它。

为什么它优于数组方法？

惰性执行：按元素逐一处理，不会创建中间数组。
兼容更广泛的数据结构：如 Set、Map。
节省内存与计算资源：适合处理大规模数据。

使用场景举例
处理日志、评论、通知等分页数据时，你可能不想一次性加载全部数据。使用迭代器可以流式处理分页内容，避免性能开销：

// 假设 logs 是一个大数组，每页最多显示 10 条非空记录，跳过前 5 条
function getPageLogs(logs, skip = 0, limit = 10) {
return logs.values()
    .filter(item => item?.trim())    // 忽略空内容
    .drop(skip)
    .take(limit)
    .map(line =>`[LOG] ${line}`)
    .toArray();
}

const logs = [
'', '启动中', '', '初始化', '成功登录', '',
'接收消息', '处理消息', '完成', '', '关闭连接'
];

console.log(getPageLogs(logs, 2, 5));
// 输出：['[LOG] 初始化', '[LOG] 成功登录', '[LOG] 接收消息', '[LOG] 处理消息', '[LOG] 完成']

Set 新增集合操作方法

操作 Set 数据结构更方便了，ES2025 新增了一系列集合运算方法：const a = new Set([1, 2]);

const b = new Set([2, 3]);

a.union(b);                // 并集 Set {1, 2, 3}
a.intersection(b);         // 交集 Set {2}
a.difference(b);           // 差集 Set {1}
a.symmetricDifference(b); // 对称差集 Set {1, 3}

a.isSubsetOf(new Set([1, 2, 3])); 
// 是否为子集 true

集合组合运算：