JavaScript Array with() 方法（千字长文）

JavaScript Array with() 方法：现代数组克隆与更新技巧

核心概念

JavaScript Array with() 方法是 ES2022 引入的数组克隆工具，允许创建一个新数组并替换指定索引位置的元素。这个方法继承了 Array 的原型，通过不可变方式实现数组更新，与 Object.assign() 类似但专为数组设计。开发中常见需求是创建数组副本并修改部分内容，with() 提供了比 concat() 更简洁的解决方案。

基础语法

创建数组副本并替换元素

const arr = [10, 20, 30]
const newArr = arr.with(1, 25) // 创建新数组 [10, 25, 30]

多次链式替换

const arr = ['a', 'b', 'c']
const result = arr
  .with(0, 'x') // ['x', 'b', 'c']
  .with(2, 'z') // ['x', 'b', 'z']

处理稀疏数组

const sparseArr = [1, , 3] 
const filledArr = sparseArr.with(1, 2) // [1, 2, 3]

进阶特性

特性 描述 示例代码
不可变操作 始终返回新数组，不修改原数组 const a = [1]; a.with(0, 2); a[0] // 仍然是 1
索引越界处理 替换超出长度的索引时返回浅拷贝原数组 [1].with(2, 3) // [1, undefined, 3]
类型转换能力 支持修改任意类型元素 [1, 'b', true].with(1, null)
与 Array.from() with() 不会触发数组构造函数，Array.from() 会 class CustomArray extends Array {}

实战应用

数据过滤器场景

// 原始数组
const temperatures = [32, 45, 28, 55, 30]
// 替换异常值
const cleaned = temperatures.with(2, NaN).filter(Number.isFinite) 
// [32, 45, 55, 30]

UI 状态更新

// React 状态更新示例
const [items, setItems] = useState([1, 2, 3])
setItems(prev => prev.with(0, prev[0] + 1)) 
// 安全更新状态为 [2, 2, 3]

数据转换管道

// 多次转换操作
const data = [1, 2, 3]
const processed = data
  .with(0, data[0] * 2) // [2, 2, 3]
  .with(2, data[2] ** 2) // [2, 2, 9]
  .map(x => x + 1) // [3, 3, 10]

注意事项

  1. 性能影响：每次调用 with() 都会创建新数组，频繁调用可能影响性能
  2. 引用类型陷阱：替换对象元素时，新数组会保留原始对象引用 
    const arr = [{ id: 1 }, { id: 2 }]
const copy = arr.with(0, { id: 3 })
copy[0].id = 4 
console.log(arr[0].id) // 1（原始数组未变）
console.log(copy[0].id) // 4（引用关系仍存在）
  3. 数组长度限制：与 concat() 不同，with() 不会扩展数组长度 
    [1, 2].with(3, 4) // [1, 2, undefined, 4]

总结

JavaScript Array with() 方法为不可变数组更新提供了优雅的解决方案，特别适合需要保持原数组不变的场景，是现代数组操作的重要补充工具。