Array.prototype.with 是专为单点替换且不修改原数组设计的方法，语义清晰、开销最小，无需展开运算符或 splice 的中间操作；但不支持条件替换，兼容性需注意。

为什么 Array.prototype.with 比 splice 或展开运算符更直接

当你只想改一个索引位置的值，又不想污染原数组时，with 是目前最语义清晰、开销最小的选择。它不创建中间数组（比如 [...arr]）、不改变 length（不像 splice）、也不需要手动拼接左右切片。它的设计目标就是“单点替换 + 不可变”。

注意：该方法仅接受有效索引（-length ≤ index ），越界会抛出 <code>RangeError，这点比手写 map 或切片更严格，但也更安全。

with 的参数规则和常见错误

调用形式是 arr.with(index, value)，两个参数都不可省略。容易踩的坑有：

• index 为负数时按正常负索引解析（例如 -1 指最后一个元素），但不会自动归一化——arr.with(-100, x) 仍会报错
• value 可以是任意类型，包括 undefined、null、对象、函数，无特殊限制
• 如果传入非数字的 index（如字符串 "2"），会被强制转为数字；"2.5" 转成 2.5 → 不是整数 → 报 RangeError
• 空数组调用 [].with(0, 'x') 也会报错，因为 0 超出合法范围 [-0, 0)

对比 with 和手写不可变替换的性能与可读性

在 V8（Chrome/Node.js ≥19.2）和 Firefox 115+ 中，with 是引擎内建优化方法，比等效的手写逻辑快约 2–3 倍（尤其对大数组）。更重要的是可读性：

const arr = [1, 2, 3, 4];
// ✅ 清晰表达意图
const newArr = arr.with(2, 'replaced');

// ❌ 同样效果但绕远、易错
const newArr2 = [...arr.slice(0, 2), 'replaced', ...arr.slice(3)];

// ❌ 用 map 容易漏掉索引判断
const newArr3 = arr.map((v, i) => i === 2 ? 'replaced' : v);

不过要注意：with 不支持条件替换（比如“把第一个大于 5 的元素替换成 X”），这种场景仍得用 map 或 findIndex + 切片。

兼容性处理建议：不是所有环境都能用 with

目前（2024 年中）TypeScript 5.0+、ESLint 8.50+ 已支持该方法，但旧版 Node.js（

• 开发时开启 lib: ["ES2023"] 和 target: "ES2023"，并用 core-js 或 esbuild 自动注入 polyfill
• 若需运行时检测，可用 typeof Array.prototype.with === 'function'，fallback 到切片方案
• 不要在 Array.from() 或类数组上调用 —— 它只存在于 Array.prototype，不适用于 arguments 或 HTMLCollection

真正麻烦的不是语法，而是误以为它能处理动态索引或稀疏数组逻辑；它只做一件事：静态索引替换。别让它干别的活。