如何用 Array.prototype.with()（ES2023）在遵循不可变原则下直接替换数组特定索引元素-js教程-PHP中文网

with()是es2023新增的不可变数组方法，返回新数组并仅替换指定索引元素，不修改原数组，不校验索引合法性，支持超出长度的索引（自动扩展数组），不处理负索引，性能优于map()和展开运算符，适用于单点确定索引更新。

如何用 array.prototype.with()（es2023）在遵循不可变原则下直接替换数组特定索引元素

用 `with()` 替换指定索引元素，不修改原数组

with() 是 ES2023 新增的不可变数组方法，它不会改变原数组，而是返回一个新数组，其中仅将指定索引位置的值替换为给定值。这比手写 [...arr.slice(0, i), newValue, ...arr.slice(i + 1)] 更简洁、语义更清晰。

常见错误是误以为它支持负数索引或范围检查——它不校验索引合法性：传入 -1 或 arr.length + 1 不会报错，但行为等价于在该位置插入（即可能扩展数组）。

只接受两个参数：index（数字）和 value（任意值）
若 index 超出 [0, arr.length) 范围，结果数组长度会相应变化（如 arr.with(5, x) 在长度为 3 的数组上调用，返回长度为 6 的数组，末尾补 undefined）
不触发 getter/setter，也不调用 toString() 等隐式转换，纯值替换

与 `map()` 和展开运算符对比：什么场景该选 `with()`

当只需要改一个已知索引的元素时，with() 比 map() 更轻量：它不遍历整个数组，内部实现可直接构造新数组并复制引用；而 map() 必须走完整迭代流程，即使你用 if (i === target) return newVal; else return item; 也逃不开开销。

相比展开运算符拼接，with() 代码更短、意图更明确，且避免了多次 slice() 调用带来的内存分配（尤其对大数组）。

✅ 推荐：单点更新、索引确定、追求可读性与性能平衡
❌ 避免：需条件判断多个索引、依赖旧值计算新值（如 arr[i] * 2）、需要链式处理（with().filter().map() 不推荐，因每次调用都新建数组）
⚠️ 注意：with() 返回新数组，但数组内对象仍是同一引用——不可变的是数组结构，不是嵌套内容

兼容性与降级方案：现在能放心用吗？

Chrome 114+、Firefox 115+、Safari 16.4+ 已原生支持；Node.js 20.3+ 开始可用。但 TypeScript 5.0+ 才提供类型定义，旧版需手动扩充电器类型或加 // @ts-ignore。

若需兼容旧环境，可用以下最小降级：

Array.prototype.with ??= function(index, value) {
  const arr = this;
  const len = arr.length;
  if (index >= 0 && index  i === index ? value : arr[i]);
  return copy;
};

注意这个 polyfill 不完全等价：原生 with() 对稀疏数组保留空位（holes），而 Array.from() 会把空位转为 undefined；真要 100% 一致，得用 Object.keys() + reduce() 手动重建，但多数业务场景无需这么严格。

容易被忽略的边界行为：负索引、空位、length 变化

ES2023 规范明确：负索引不自动转换，arr.with(-1, x) 就是在索引 -1 处设值——这在 JS 数组中是合法属性名（相当于 arr[-1] = x），但不会影响 arr.length，也不会出现在 for...of 或 forEach() 中。

✅ 正确用法只有非负整数索引，如 arr.with(0, 'first')
❌ arr.with(-1, x) 不报错，但结果不符合“替换数组元素”的直觉，应主动拒绝负值
空位（holes）会被保留：[1, , 3].with(1, 2) → [1, 2, 3]；但 [1, , 3].with(3, 4) → [1, undefined, 3, 4]（因为索引 1 的空位被 undefined 填充）
修改后数组的 length 可能变大，但永远不会变小——这是设计使然，没有 deleteAt() 对应方法