开发者问题收集

如何将项目插入到数组中的特定索引处?

2009-02-25
3543278

我正在寻找一种 JavaScript 数组插入方法,其样式为:

arr.insert(index, item)

最好是 jQuery,但目前任何 JavaScript 实现都可以。

3个回答

您需要在本机数组对象上使用 splice 函数。

arr.splice(index, 0, item); 会将 item 插入到 arr 中的指定 index (首先删除 0 个项目,也就是说,它只是一个插入)。

在此示例中,我们将创建一个数组并将一个元素添加到索引 2 中:

var 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

更新(2024 年 5 月 24 日)

您现在可以使用 toSpliced 方法的行为与 splice 类似,但它会返回一个新数组而不会改变现有数组。

您可以像这样更新前面的示例:

const updated = arr.toSpliced(2, 0, "Lene");
tvanfosson
2009-02-25

您可以通过执行以下操作来实现 Array.insert 方法:

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

然后您可以像这样使用它:

var arr = [ 'A', 'B', 'E' ];
arr.insert(2, 'C', 'D');

// => arr == [ 'A', 'B', 'C', 'D', 'E' ]
FrEsC 81
2012-10-03

除了拼接之外,您还可以使用这种方法,它不会改变原始数组,但会创建一个包含添加项的新数组。当您需要避免变异时,这种方法很有用。我在这里使用 ES6 扩展运算符。

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

const insert = (arr, index, newItem) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted item
  newItem,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10)

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

这可用于添加多个项,方法是稍微调整函数以使用 rest 运算符来添加新项,并将其也扩展到返回的结果中:

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

const insert = (arr, index, ...newItems) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted items
  ...newItems,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10, 20)

console.log(result)
// [1, 10, 20, 2, 3, 4, 5]
gafi
2016-07-04