如何识别 不同浏览器版本对 ES2023 数组新特性的兼容性隔离

ES2023的toSorted、toReversed、toSpliced和with四个数组方法在主流现代浏览器中基本可用，但旧版或部分移动端仍不支持；推荐通过MDN或CanIUse查具体版本兼容性，结合eslint-plugin-compat静态检测、运行时特性判断及按需polyfill保障兼容。

直接查浏览器支持情况最可靠，不用靠猜或试错。ES2023 的 toSorted、toReversed、toSpliced 和 with 这四个数组方法目前在主流现代浏览器中已基本可用，但旧版本或部分移动端浏览器仍不支持。

看官方兼容性数据源

MDN Web Docs 是首选参考，每个方法页底部都有详细的支持表格，标注到具体版本号（如 Chrome 117+、Firefox 119+、Safari 17.4+）。注意 Safari 对 toSpliced 和 with 的支持比其他两个晚一两个小版本。

CanIUse 网站也同步更新，可按浏览器和版本筛选，还提供“全球使用率”权重参考，方便判断是否值得 polyfill。

用工具自动检测兼容性缺口

在项目中集成 eslint-plugin-compat，它能静态扫描代码里调用的 ES2023 方法，并对照 browserslist 配置报出不兼容警告。

• 确保 browserslist 配置真实反映目标用户环境，例如：">0.5%", "last 2 versions", "not IE 11"
• CI 流程中加入兼容性检查步骤，避免新特性误入低版本构建产物

运行时做特性检测而非 UA 判断

不要用 navigator.userAgent 匹配浏览器名和版本号——不可靠且易失效。改用方法本身是否存在来判断：

if (Array.prototype.toSorted) {  // 安全使用 toSorted  return items.toSorted((a, b) => a.id - b.id);} else {  // 降级：用 slice().sort()  return [...items].sort((a, b) => a.id - b.id);}

同理可检测 toReversed、with 等。这种写法轻量、精准，不依赖外部库。

按需加载 polyfill 方案

如果必须支持较老浏览器（比如 Safari 16 或 Chrome 115 以下），可引入 core-js 的按需模块：

• import 'core-js/stable/array/to-sorted';
• import 'core-js/stable/array/with';

避免全量引入，只加载实际用到的方法。构建工具（如 Webpack/Vite）能自动做 tree-shaking。