如何用 Array.prototype.with()（ES2023）在 Redux 状态更新中实现更优雅的不可变数组替换-js教程-PHP中文网

array.prototype.with() 是 es2023 新增的不可变数组方法，用于简洁安全地替换指定索引处的单个元素，返回新数组，适用于 redux 中更新列表项等场景。

如何用 array.prototype.with()（es2023）在 redux 状态更新中实现更优雅的不可变数组替换

Array.prototype.with() 是 ES2023 引入的原生数组方法，专为不可变地替换**单个元素**而设计。它不修改原数组，而是返回一个新数组，其中指定索引位置的值被替换为新值——这与 Redux 要求的不可变更新理念天然契合，尤其适合替代过去常见的 [...arr.slice(0, i), newValue, ...arr.slice(i + 1)] 或 arr.map((v, idx) => idx === i ? newValue : v) 等冗长写法。

直接替换数组中某一项（最典型场景）

在 Redux reducer 中更新列表某条数据（如待办事项完成状态、用户列表中某个用户的昵称）时，with() 可让逻辑一目了然：

传统写法需切片拼接或遍历映射，易出错且可读性差
使用 with() 后，只需传入索引和新值，语义清晰，代码行数减半
注意：索引必须有效（0 ≤ index ），越界时行为与 <code>at() 类似（返回原数组）

配合 Redux Toolkit 的 createReducer 或 createSlice 使用

Redux Toolkit 鼓励“可变写法”（借助 Immer），但 with() 本身是纯函数，与 Immer 完全兼容，也可用于非 Immer 场景：

Zoom Workplace

Zoom Workplace是一款AI办公效率工具，Zoom推出的AI办公协作和交流沟通平台。

下载

在 createSlice 的 reducers 中，可直接对 state.items 调用 .with(index, newItem)
即使未启用 Immer（如手动编写 reducer），with() 返回的新数组也天然满足不可变要求，无需额外 clone
示例：state.todos = state.todos.with(action.payload.index, { ...state.todos[action.payload.index], completed: true });

不适用于批量更新或多位置替换

with() 每次仅替换一个元素，这是它的定位，也是优势——简单、专注、无副作用：

若需替换多个不同索引的项（如同时更新第 2 和第 5 条），仍需多次调用 with()，或改用 map() + 条件判断
若需插入、删除、移动元素，with() 无法胜任，应继续使用 toSpliced()（ES2023）、toReversed() 等配套新方法，或保持原有方案
不要强行用 with() 模拟 splice：它不改变数组长度，也不支持负索引（负索引会被当作 0 处理）