如何在数组的指定索引处插入一个元素？

在日常编程中，我们经常需要在数组的指定位置插入一个新元素。本文将介绍多种解决这一问题的方法，包括JS内置的splice方法、新引入的toSpliced方法以及其他适用于不同需求的解决方案。

使用splice方法

JavaScript 原生的数组对象提供了一个非常方便的函数——splice，可以用来在数组的指定位置插入元素。

let arr = ["Jani", "Hege", "Stale", "Kai Jim", "Borge"];
arr.splice(2, 0, "Lene");
console.log(arr); // ["Jani", "Hege", "Lene", "Stale", "Kai Jim", "Borge"]

splice方法接受三个参数：

1. 插入位置的索引。
2. 要删除的元素数量，在这里只是插入所以设为0。
3. 要插入的元素。

使用toSpliced方法（更新于2024年5月24日）

toSpliced方法是一个新的ES提案，它与splice类似，但返回一个新数组而不修改原数组。

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

给数组添加自定义插入方法

你可以为数组原型添加一个自定义的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"]

不改变原数组的插入方法

如果你希望避免改变原数组，可以使用展开运算符和slice方法。

const items = [1, 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]
console.log(items);  // [1, 2, 3, 4, 5]

插入多个元素的方法

你也可以写一个函数，用于在数组的指定索引处同时插入多个元素：

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

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

const result = insertMultiple(items, 1, 'a', 'b', 'c');
console.log(result); // [1, 'a', 'b', 'c', 2, 3, 4, 5]

使用reduce进行插入

对于喜欢函数式编程的人，可以使用reduce来实现不可变的数组插入。

const arr = ["apple", "orange", "raspberry"];
const arr2 = [1, 2, 4];

const insert = (arr, item, index) =>
  arr.reduce((acc, el, i) => i === index ? [...acc, item, el] : [...acc, el], []);

console.log(insert(arr, "banana", 1)); // ["apple", "banana", "orange", "raspberry"]
console.log(insert(arr2, 3, 2));       // [1, 2, 3, 4]

结论

本文介绍了在数组指定索引位置插入元素的多种方法，包括使用splice、toSpliced、自定义原型方法、使用展开运算符和slice方法、以及使用reduce方法。根据实际需求，你可以选择最适合的方法来实现数组的插入。希望本文能够帮助你更好地理解和使用这些方法来提升编程效率。