如何在特定索引处将项目插入到数组中 (JavaScript)

IT技术 javascript jquery arrays
2021-01-23 01:27:30

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

arr.insert(index, item)

最好在 jQuery 中,但此时任何 JavaScript 实现都可以。

6个回答

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

arr.splice(index, 0, item);将插入itemarr指定的位置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

我认为“拼接”这个词是有道理的。Splice 意味着加入或连接,也意味着改变。您有一个已建立的数组,您现在正在“更改”它,这将涉及添加或删除元素。您指定数组中的起始位置,然后是要删除多少旧项目(如果有),最后是要添加的新元素列表(可选)。Splice当然也是一个很棒的科幻术语。
2021-03-13 01:27:30
谢谢,我以为我会觉得提问很愚蠢,但现在我知道答案了,我不知道!当一个更易于搜索的术语被普遍用于同一功能时,他们到底为什么决定将其称为拼接?!
2021-03-15 01:27:30
接头可以插入,但正如经常没有例如: arr.splice(2,3)将删除从索引 2 开始的 3 个元素。不传递第 3....N 个参数,不会插入任何内容。所以这个名字insert()也不公平。
2021-03-19 01:27:30
@tags2k:因为该函数不仅仅是插入项目,而且它的名字已经在 perl 中建立了?
2021-03-20 01:27:30
2021-03-27 01:27:30

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

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

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

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

// => arr == [ 'A', 'B', 'C', 'D', 'E' ]
但请记住,不建议扩展本机类型,因为它可能会干扰其他代码或未来的功能。
2021-03-10 01:27:30
向数组添加内容的问题在于,当您执行 for(i in arr) {...}
2021-03-14 01:27:30
不要修改您不拥有的对象
2021-03-27 01:27:30
不要修改原型
2021-03-31 01:27:30
要插入多个项目,您可以使用 Array.prototype.insert = function (index, items) { this.splice.apply(this, [index, 0].concat(items)); }
2021-04-07 01:27:30

除了 splice 之外,您可以使用这种方法,它不会改变原始数组,但会使用添加的项目创建一个新数组。您通常应该尽可能避免突变。我在这里使用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]

@HarshKanchina 那可能是因为大多数答案都是 ES6 之前的,但是根据我的经验,这种方法现在非常普遍
2021-03-12 01:27:30
你应该解释为什么你应该避免突变。慢吗?如果是这样,慢多少?值得额外的“麻烦”吗?
2021-03-13 01:27:30
@JackG 不要忘记这slice()将分配一个新数组,实际上,也会分配一个新数组,splice()因为它返回一个包含已删除项的数组(在本例中为空数组)。在这些情况下运行基准测试表明 splice 更快(约 30%),但我们处于每秒数百万次操作的范围内,因此除非您的应用程序在紧密循环中执行大量这些操作,否则不会会有所作为。
2021-03-24 01:27:30
这是一个好的、安全的方法吗?我问是因为这看起来如此优雅和简洁,但没有其他答案涉及这一点。大部分都是修改原型对象!
2021-04-05 01:27:30
这种方法总是比拼接更慢,更糟糕。不要被漂亮的语法或在其他被误导的开发者中的流行所迷惑(*cough* gafi *cough*)。分配一个全新的数组并丢弃旧数组比修改原始数组慢得多。如果您需要副本,请slice()在 之前致电splice()永远不要将 ES6 用于这些琐碎的事情,这些事情可以用其他 API 做得更好、更干净。
2021-04-06 01:27:30

自定义数组insert方法

1.具有多个参数和链接支持

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
    this.splice.apply(this, [index, 0].concat(
        Array.prototype.slice.call(arguments, 1)));
    return this;
};

它可以插入多个元素(如本机splice那样)并支持链接:

["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(1, 6);
// ["b", "X", "Y", "Z", "c"]

2.具有数组类型参数合并和链接支持

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
    index = Math.min(index, this.length);
    arguments.length > 1
        && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
        && this.insert.apply(this, arguments);
    return this;
};

它可以将参数中的数组与给定数组合并,还支持链接:

["a", "b", "c", "d"].insert(2, "V", ["W", "X", "Y"], "Z").join("-");
// "a-b-V-W-X-Y-Z-c-d"

演示: http : //jsfiddle.net/UPphH/

当它在参数中找到一个数组时,是否有一种紧凑的方法让这个版本也合并一个数组?
2021-03-11 01:27:30
我不明白第一个结果["b", "X", "Y", "Z", "c"]为什么不"d"包括在内?在我看来,如果你把 6 作为第二个参数,slice()并且数组中有 6 个元素从指定的索引开始,那么你应该得到返回值中的所有 6 个元素。(文档说明howMany了该参数。)developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
2021-03-31 01:27:30
实际上,如果我使用 3 或更多的索引,则输出中什么也没有(案例 1.,FireFox)["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(3, 3);=>[ ]
2021-04-05 01:27:30
@AlexisWilke 在第一个示例中,我使用了slicemethod 而 not splice,您在评论中提到了它。slice(named end) 的第二个参数结束提取的从零开始的索引。slice最多提取但不包括end. 因此,在insert您拥有之后["a", "b", "X", "Y", "Z", "c", "d"],从中slice提取索引为从1到 的元素6,即从"b""d"但不包括"d"是否有意义?
2021-04-08 01:27:30
出于某种原因,当我去使用 insert2 时,我得到一个“预期 1 个参数,但有 2 个”异常。
2021-04-09 01:27:30

如果您想一次将多个元素插入到一个数组中,请查看这个 Stack Overflow 的答案:A better way to splice an array into an array in javascript

这里还有一些函数来说明这两个例子:

function insertAt(array, index) {
    var arrayToInsert = Array.prototype.splice.apply(arguments, [2]);
    return insertArrayAt(array, index, arrayToInsert);
}

function insertArrayAt(array, index, arrayToInsert) {
    Array.prototype.splice.apply(array, [index, 0].concat(arrayToInsert));
    return array;
}

最后这里是一个 jsFiddle,所以你可以自己看看:http : //jsfiddle.net/luisperezphd/Wc8aS/

这就是您使用这些功能的方式:

// if you want to insert specific values whether constants or variables:
insertAt(arr, 1, "x", "y", "z");

// OR if you have an array:
var arrToInsert = ["x", "y", "z"];
insertArrayAt(arr, 1, arrToInsert);
我向这个方法添加了一个 removeCount 参数,以利用 splice 的能力,同时删除该索引处的项目: Array.prototype.splice.apply(array, [index, removeCount || 0].concat(arrayToInsert));
2021-03-11 01:27:30
一旦创建了单元素 arrayToInsert,insertAt() 调用 insertArrayAt() 不是更好吗?这避免了相同代码的重复。
2021-03-13 01:27:30
这是何时使用“应用”的一个很好的例子
2021-03-24 01:27:30