以为你懂 JavaScript？这 5 个现代特性可能刷新你的认知

现代 JavaScript 不只是“语法更优雅”，更在于鲁棒、可移植、易维护。像 globalThis、import.meta.url、TextDecoderStream 这些能力，过去要靠整套库才能补齐；现在，原生就能办到。本文精炼 5 个值得立刻上手的现代特性。

1) globalThis：跨环境的全局对象入口

问题： 浏览器、Node.js、Web Worker 的全局对象各不相同。

// 脆弱：手动分支
const g = typeof window !== "undefined" ? window : global;

// 可靠：统一访问
globalThis.alert?.("Hello!");

影响： 标准化访问全局作用域，避免环境判断。适用： 同构/通用库、跨运行时工具函数。

2) Object.is()：更准确的相等判断

问题：=== 在少数边界情况不符合直觉（如 NaN、-0）。

console.log(NaN === NaN);         // false
console.log(Object.is(NaN, NaN)); // true

console.log(-0 === 0);            // true
console.log(Object.is(-0, 0));    // false

影响： 获得一致、可预测的比较语义。适用： 状态变更检测、不可变数据比较、测试断言等。

3) void 运算符：显式丢弃返回值

问题： 事件处理里的箭头函数可能无意返回 Promise，影响默认行为或框架内部逻辑。

// 可能带来副作用的返回
button.onclick = () => fetch('/log');

// 安全：丢弃返回值
button.onclick = () => void fetch('/log');

影响： 防止返回值干扰 DOM/渲染流程或拦截器。适用： 只做日志/打点/上报的事件绑定。

4) import.meta.url：基于模块的相对路径

问题： 写死的静态路径在重构或迁移模块时易失效。

// 静态路径（脆弱）
const resp = await fetch('/data/config.json');

// 模块相对（稳健）
const resp = await fetch(new URL('./data/config.json', import.meta.url));

影响： 资源引用可随模块移动而保持正确。适用： ESM 环境、Vite/Rollup/Node.js 原生模块、包内静态资源访问。

5) TextDecoderStream：流式 UTF-8 解码不“撕裂”

问题： 手拼字符串容易把多字节字符截断，出现乱码。

// 手动拼接（可能损坏多字节）
let buffer = '';
stream.on('data', chunk => {
  buffer += chunk;
});

// 原生流式解码
const decoder = new TextDecoderStream();
stream
  .pipeThrough(decoder)
  .getReader()
  .read()
  .then(({ value }) => {
    console.log(value);
  });

影响： 正确处理 UTF-8 边界，无需额外逻辑。适用： 读取日志、大文本、SSE/流式 API。

结语

想让你的 JavaScript 面向未来，这些现代 API 与语法改进就是你的工具箱：

• 在浏览器、Node.js、Deno 之间保持一致行为；
• 让代码更健壮、可移植、可维护；
• 用更少的依赖完成过去交给库的工作。

保持好奇，拥抱现代——写经得起时间考验的 JavaScript。