Array.prototype.with() 是 ES2023 引入的不可变替换方法，调用 arr.with(index, value) 返回新数组，支持负索引，越界索引抛出错误。

Array.prototype.with() 是 ES2023 引入的原生方法，专为不可变单点替换而设计。它不修改原数组，只返回一个新数组，其中指定索引位置的元素被替换成新值——这正是函数式编程和状态管理中“不可变更新”的核心要求。

核心用法：一行代码完成安全替换

调用格式为 arr.with(index, value)，语义清晰、意图明确：

• index 必须是合法整数（支持负索引，如 -1 表示最后一个）
• value 可为任意类型（undefined、null、对象、函数等均可）
• 越界索引（如 index >= arr.length 或 index ）会抛出 RangeError，而非静默失败，提升调试安全性

在状态更新中保持不可变性

与传统写法相比，with() 天然契合不可变原则：

• 不依赖展开运算符或 slice() 拼接，避免中间数组开销和边界逻辑错误
• 不改变原数组长度，也不影响稀疏数组行为，结果可预测
• 在 Redux reducer、React state 更新或纯函数场景中，可直接用于生成新状态：

const updatedItems = state.items.with(2, { ...state.items[2], done: true });

需注意的关键限制

它不是万能工具，明确的设计边界反而是其优势所在：

• 仅支持单索引替换，不支持条件查找（如“第一个大于 5 的元素”）、批量更新或多位置操作
• 不支持插入、删除或移动元素；需要这类能力时，应选用 toSpliced() 或其他方法
• 空数组上调用任何 with() 都会报错（如 [].with(0, 'x')），因为无合法索引

兼容性与落地建议

截至 2026 年中，Chrome 110+、Firefox 115+、Safari 16.4+、Edge 110+ 均已原生支持。Node.js 需 v20.1+：

• 面向现代环境（如 Electron、新版本浏览器）可直接使用
• 需兼容旧环境时，可用轻量 polyfill（基于 slice() + 替换逻辑），但建议通过构建工具按需注入
• 不建议在 Redux/Vuex 等强 ID 导向的状态流中硬编码索引；若数据顺序不稳定，优先按 ID 更新更可靠