如何在数组的指定索引位置插入元素

技术背景

在 JavaScript 开发中，经常会遇到需要在数组的指定索引位置插入元素的需求。JavaScript 提供了多种方法来实现这一功能，不同的方法适用于不同的场景。

实现步骤

使用 splice() 方法

splice() 方法可以改变数组的内容，通过删除现有元素和/或添加新元素。当添加元素时，通常接收三个参数：

1. 数组中要添加元素的索引。
2. 要删除的元素数量，插入元素时为 0。
3. 要添加的元素。

示例代码：

let array = ['item 1', 'item 2', 'item 3'];
let insertAtIndex = 0;
let itemsToRemove = 0;

array.splice(insertAtIndex, itemsToRemove, 'insert this string at index 0');
console.log(array);

使用 toSpliced() 方法

toSpliced() 方法的行为与 splice() 类似，但它会返回一个新数组，而不会改变原数组。

示例代码：

const arr = ['Jani', 'Hege', 'Stale', 'Kai Jim', 'Borge'];
const updated = arr.toSpliced(2, 0, 'Lene');
console.log(updated);

使用扩展运算符

使用 ES6 的扩展运算符可以创建一个新数组，将元素插入到指定位置，且不改变原数组。

示例代码：

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);

自定义 insert 方法

可以通过扩展 Array.prototype 来创建自定义的 insert 方法。

示例代码：

Array.prototype.insert = function (index, ...items) {
    this.splice(index, 0, ...items);
    return this;
};
var arr = ['A', 'B', 'E'];
arr.insert(2, 'C', 'D');
console.log(arr);

使用 reduce() 方法

reduce() 方法也可以实现元素的插入。

示例代码：

const arr = ["apple", "orange", "raspberry"];
const insert = (arr, item, index) =>
  arr.reduce(function(s, a, i) {
    i === index ? s.push(item, a) : s.push(a);
    return s;
  }, []);
console.log(insert(arr, "banana", 1));

核心代码

splice() 方法插入元素

const numbers = ['one', 'two', 'four', 'five'];
numbers.splice(2, 0, 'three');
console.log(numbers);

自定义 insert 方法

Array.prototype.insert = function(i, ...rest) {
  this.splice(i, 0, ...rest);
  return this;
};
var a = [3, 4, 8, 9];
console.log(a.insert(2, 5, 6, 7));

扩展运算符插入元素

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);

最佳实践

• 当需要修改原数组时，优先使用 splice() 方法，它是最直接的插入元素的方式。
• 当需要保持原数组不变，返回一个新数组时，可以使用 toSpliced() 方法或扩展运算符的方式。
• 对于需要链式调用的场景，可以自定义 insert 方法。

常见问题

splice() 方法返回值问题

splice() 方法返回一个由被删除的元素组成的数组。如果没有删除元素，则返回一个空数组。这可能会在链式调用时造成困扰，因为通常希望返回修改后的数组。可以通过自定义方法来解决这个问题。

性能问题

不同的插入方法在性能上可能有所差异。对于小数组，基于 slice 和 reduce 的非原地解决方案通常比基于 splice 的原地解决方案快 10 - 100 倍；对于大数组，基于 splice 的原地解决方案最快。在实际应用中，需要根据数组的大小和具体需求选择合适的方法。