如何原地修改 JavaScript 中的数组元素

作者:袖梨 2026-07-12
JavaScript中原地修改数组元素指不创建新数组而直接更改原数组内容,可通过索引赋值、splice、fill、copyWithin或遍历配合赋值实现,需避免map等返回新数组的方法。

JavaScript 中原地修改数组元素,是指不创建新数组,直接在原数组上更改其内容。这通常通过索引赋值、内置方法(如 splicefillcopyWithin)或遍历配合赋值实现,关键在于避免使用返回新数组的方法(如 mapfilterslice)。

直接通过索引修改元素

最简单的方式是用方括号语法访问并赋值:

  • 数组索引从 0 开始,直接写入新值即可覆盖原值
  • 修改不会改变数组长度,也不会触发重新渲染(在框架中需注意响应性)
  • 示例:arr[2] = 'new value';

使用 splice 方法增删改元素

splice() 是最灵活的原地操作方法,能删除、插入、替换元素:

  • 语法:arr.splice(start, deleteCount, ...items)
  • 替换元素:指定 deleteCount > 0 并传入新元素,如 arr.splice(1, 1, 'replaced')
  • 仅修改不增删:设 deleteCount === 0 并插入新项,等效于在某位置“插入”
  • 返回被删除的元素数组,但原数组已被修改

批量修改:fill 和 copyWithin

适合对连续区域做统一操作:

立即学习“Java免费学习笔记(深入)”;

  • arr.fill(value, start?, end?):将指定范围内的所有元素设为同一值
  • arr.copyWithin(target, start?, end?):把数组内部一段复制到另一段,不新增元素也不删除
  • 两者均不改变数组长度,且完全原地执行

遍历中修改元素(慎用 map)

若需根据条件或计算更新多个元素,可用 forforEach 配合索引赋值:

  • 推荐 for (let i = 0; i
  • arr.forEach((item, index) => { arr[index] = newItem; }) 也可行,但语义稍弱
  • 避免写 arr = arr.map(...),这会创建新数组并赋值给变量,不是原地修改

原地修改高效且节省内存,但要注意副作用——其他引用该数组的地方会同步看到变化。需要不可变行为时,应明确创建副本再操作。

相关文章

精彩推荐