如何在数组指定位置插入一个元素

在JavaScript编程中，我们经常需要在数组的指定位置插入一个元素。本文将详细介绍几种实现这一需求的方法，并提供代码示例和性能对比。

使用 `splice` 方法

我们可以使用原生数组对象上的 splice 方法来插入元素。

let arr = []
arr[0] = 'Jani'
arr[1] = 'Hege'
arr[2] = 'Stale'
arr[3] = 'Kai Jim'
arr[4] = 'Borge'

console.log(arr.join()) // Jani,Hege,Stale,Kai Jim,Borge

arr.splice(2, 0, 'Lene')
console.log(arr.join()) // Jani,Hege,Lene,Stale,Kai Jim,Borge

`splice` 的用法

arr.splice(index, 0, item); 会在数组 arr 的指定 index 处插入 item，同时不会删除任何元素（因为第二个参数为 0）。

使用 `toSpliced` 方法

自2024年5月开始，您可以使用 toSpliced 方法。它的行为类似于 splice，但是不会修改原数组，而是返回一个新数组。

const arr = ['a', 'b', 'd']
const updated = arr.toSpliced(2, 0, 'c')
console.log(updated) // ["a", "b", "c", "d"]

自定义 `Array.insert` 方法

我们还可以通过原型链扩展数组对象来实现插入操作:

Array.prototype.insert = function (index, ...items) {
  this.splice(index, 0, ...items)
}

let arr = ['A', 'B', 'E']
arr.insert(2, 'C', 'D')
console.log(arr) // ['A', 'B', 'C', 'D', 'E']

使用 ES6 展开运算符

如果您希望避免修改原数组，可以使用 ES6 提供的展开运算符 (spread operator) 来创建一个新数组。

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, newItem) => [...arr.slice(0, index), newItem, ...arr.slice(index)]

const result = insert(items, 1, 10)
console.log(result) // [1, 10, 2, 3, 4, 5]

如果需要插入多个元素，可以对函数稍作调整:

const insert = (arr, index, ...newItems) => [
  ...arr.slice(0, index),
  ...newItems,
  ...arr.slice(index),
]

const result = insert(items, 1, 10, 20)
console.log(result) // [1, 10, 20, 2, 3, 4, 5]

性能比较和结论

在进行大数组操作时，使用splice方法的原地修改会比创建新数组的方法（如slice及展开运算符）更高效，而对于小数组，非原地修改方法往往性能更佳。

在选择方法时，需要权衡性能与代码可读性以及不可变性需求。比如，在处理React状态更新时，不可变性往往更为重要，此时可以选择使用 toSpliced 方法或ES6的展开运算符。

无论哪种方法，都可以根据具体场景选择最适合的解决方案。

使用 splice 方法

splice 的用法

使用 toSpliced 方法

自定义 Array.insert 方法