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

How to insert an item into an array at a specific index?

提问人:tags2k 提问时间:2/25/2009 最后编辑:Lee Taylortags2k 更新时间:11/2/2023 访问量:3435889

问:

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

arr.insert(index, item)

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

JavaScript 数组

评论

151赞 Domino 2/18/2015
请注意,JQuery 是一个 DOM 和事件操作库,而不是它自己的语言。它与数组操作无关。
36赞 Tim 4/14/2016
api.jquery.com/jQuery.inArray 与 DOM 或事件无关。jQuery已经发展成为一个用于浏览器JS开发的混合工具包,导致人们期望它有一个解决所有问题的方法。
8赞 Victor 5/7/2018
@Tim,但它仍然不是一门自己的语言(在SO上仍然有一些问题,例如“如何在jQuery中对两个数字求和”)
10赞 Tim 5/8/2018
@Victor 不,也永远不会。jQuery是有用和相关的,但它有它的一天。

答:

6693赞 tvanfosson 2/25/2009 #1

您需要对本机数组对象进行拼接函数。

arr.splice(index, 0, item);将在指定位置插入(先删除项目,即只是一个插入)。itemarrindex0

在此示例中,我们将创建一个数组,并在索引 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

评论

260赞 tags2k 2/25/2009
谢谢,我以为我会因为问而感到愚蠢,但现在我知道答案,我不知道!为什么他们决定将其称为拼接,而同一功能通常使用一个更易于搜索的术语?!
109赞 Christoph 2/25/2009
@tags2k:因为该函数的作用不仅仅是插入项目,而且它的名称已经在 Perl 中建立?
18赞 Dingo 3/10/2011
医生:developer.mozilla.org/en/JavaScript/Guide/......
76赞 EBarr 5/13/2014
接头可以插入,但同样经常不能插入。例如:将从索引 2 开始删除 3 个元素。没有通过第 3 次......第 N 个参数不插入任何内容。所以这个名字也不公平。arr.splice(2,3)insert()
23赞 Jakub Keller 11/21/2014
我认为“拼接”这个词是有道理的。拼接意味着加入或连接,也意味着改变。您有一个已建立的数组,您现在正在“更改”该数组,这将涉及添加或删除元素。您可以指定数组中要开始的位置,然后指定要删除的旧项数(如果有),最后指定要添加的新元素列表(可选)。当然,拼接也是一个很棒的科幻术语。
56赞 Luis Perez 8/30/2012 #2

如果你想一次将多个元素插入到一个数组中,请查看这个 Stack Overflow 答案:在 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);

评论

2赞 Matt Sach 9/11/2012
一旦 insertAt() 创建了单元素 arrayToInsert,调用 insertArrayAt() 不是更好吗?这样可以避免重复相同的代码。
1赞 CRice 1/29/2015
这是何时使用“应用”的一个很好的例子
0赞 CRice 1/29/2015
我在此方法中添加了一个 removeCount 参数,以利用 splice 的功能来删除该索引处的项目: Array.prototype.splice.apply(array, [index, removeCount || 0].concat(arrayToInsert));
0赞 S At 8/1/2022
非常感谢,我在qml
417赞 FrEsC 81 10/3/2012 #3

您可以通过执行以下操作来实现该方法: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' ]

评论

17赞 Ryan Smith 5/30/2014
要插入多个项目,您可以使用Array.prototype.insert = function (index, items) { this.splice.apply(this, [index, 0].concat(items)); }
10赞 rep_movsd 7/2/2014
向数组添加内容的问题在于,当您执行 for(i in arr) {...} 时,该函数将显示为一个元素
27赞 marsze 8/21/2018
但请记住,不建议扩展本机类型,因为它可能会干扰其他代码或未来的功能。
101赞 Luis Cabrera Benito 2/20/2019
不要修改不属于您的对象
39赞 satya164 5/31/2019
不要修改原型
90赞 VisioN 3/26/2013 #4

自定义数组方法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;
};

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

["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/

评论

0赞 Nolo 3/31/2013
有没有一种紧凑的方法让这个版本在参数中找到一个数组时也合并一个数组?
0赞 Alexis Wilke 12/12/2014
我不明白第一个结果.为什么不包括在内?在我看来,如果您将 6 作为 的第二个参数,并且数组中有 6 个元素从指定的索引开始,那么您应该在返回值中获得所有 6 个元素。(文档说了该参数。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/......["b", "X", "Y", "Z", "c"]"d"slice()howMany
0赞 Alexis Wilke 12/12/2014
实际上,如果我使用索引 3 或更多,则输出中一无所获(案例 1.,FireFox)["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(3, 3); => [ ]
0赞 VisioN 12/12/2014
@AlexisWilke 在第一个示例中,我使用了切片方法,而不是您在评论中提到的 。(命名)的第二个参数是从零开始的索引,在该索引处结束提取。切片提取到但不包括结束。因此,在你有 之后,从中提取索引从 up 到 的元素,即从 to 但不包括 。这有意义吗?splicesliceendinsert["a", "b", "X", "Y", "Z", "c", "d"]slice16"b""d""d"
0赞 Corné 6/26/2020
出于某种原因,当我使用 insert2 时,我得到一个“预期的 1 个参数,但得到了 2”的异常。
10赞 Ville 12/5/2015 #5

尽管这个问题已经得到解答,但我还是为另一种方法添加了此注释。

我想将已知数量的项目放入一个数组中,放在特定位置,因为它们来自一个“关联数组”(即一个对象),根据定义,该数组不能保证按排序顺序排列。我希望生成的数组是一个对象数组,但对象在数组中按特定顺序排列,因为数组保证了它们的顺序。所以我这样做了。

首先是源对象,即从 PostgreSQL 检索到的 JSONB 字符串。我想让它按每个子对象中的“order”属性进行排序。

var jsonb_str = '{"one": {"abbr": "", "order": 3}, "two": {"abbr": "", "order": 4}, "three": {"abbr": "", "order": 5}, "initialize": {"abbr": "init", "order": 1}, "start": {"abbr": "", "order": 2}}';

var jsonb_obj = JSON.parse(jsonb_str);

由于对象中的节点数是已知的,因此我首先创建一个具有指定长度的数组:

var obj_length = Object.keys(jsonb_obj).length;
var sorted_array = new Array(obj_length);

然后迭代对象,将新创建的临时对象放置在数组中的所需位置,而无需进行任何“排序”。

for (var key of Object.keys(jsonb_obj)) {
  var tobj = {};
  tobj[key] = jsonb_obj[key].abbr;

  var position = jsonb_obj[key].order - 1;
  sorted_array[position] = tobj;
}

console.dir(sorted_array);
40赞 Redu 5/14/2016 #6

为了实现适当的功能编程和链接目的,发明是必不可少的。实际上,如果它返回突变的数组而不是完全无意义的空数组,那么它本来是完美的。所以这里是这样的:Array.prototype.insert()splice

Array.prototype.insert = function(i,...rest){
  this.splice(i,0,...rest)
  return this
}

var a = [3,4,8,9];
document.write("<pre>" + JSON.stringify(a.insert(2,5,6,7)) + "</pre>");

好吧,好吧,上面的那个改变了原始数组,有些人可能会抱怨“你不应该修改不属于你的东西”,这可能也是正确的。所以为了公益,我想给另一个不改变原有数组的。开始了;Array.prototype.splice()Array.prototype.insert()

Array.prototype.insert = function(i,...rest){
  return this.slice(0,i).concat(rest,this.slice(i));
}

var a = [3,4,8,9],
    b = a.insert(2,5,6,7);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

评论

4赞 chrisbajorin 5/23/2016
“一个完全没有意义的空数组”——它只在第二个参数为 0 时返回一个空数组。如果它大于 0,则返回从数组中删除的项。鉴于您正在添加到原型中,并改变了原始数组,我认为“适当的函数式编程”不属于 .splicesplice
0赞 Redu 5/23/2016
我们在这里谈论的是插入,Array.prototype.splice() 的第二个参数必须为零。它返回的内容除了“我没有删除任何内容”之外没有任何意义,并且由于我们使用它来插入项目,因此我们已经拥有了该信息。如果你不想改变原始数组,那么你可以用两个 Array.prototype.slice() 和一个 Array.prototype.concat() 操作来做同样的事情。这取决于你。
1赞 NiKo 6/2/2016
你的第二个实现是整个页面中最干净的,你的票数为零。请带走我的,继续努力。(你应该避免改变原型,但你已经知道了)
1赞 Geza Turi 12/10/2016
我认为值得一提的是,其余参数是新的 ECMA 6th (developer.mozilla.org/en/docs/Web/JavaScript/Reference/... )
304赞 gafi 7/4/2016 #7

除了拼接之外,您还可以使用这种方法,它不会改变原始数组,但它会使用添加的项目创建一个新数组。当您需要避免突变时,它很有用。我在这里使用 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]

评论

3赞 anotherDev 12/11/2017
这是一种好的、安全的方法吗?我问是因为这看起来很优雅和简洁,但没有其他答案涉及这一点。他们中的大多数都修改了原型对象!
10赞 gafi 12/17/2017
@HarshKanchina 这可能是因为大多数答案都是 ES6 之前的,但根据我的经验,这种方法现在非常普遍
2赞 Jack G 1/19/2021
这种方法总是比拼接更慢、更差。不要被漂亮的糖语法或其他被误导的开发人员的受欢迎程度所迷惑(*咳*,gafi *咳*)。分配一个全新的数组并丢弃旧数组比修改原始数组要慢得多。如果您需要副本,请在 之前致电 。永远不要将 ES6 用于这种琐碎的事情,而这些事情可以通过其他 API 做得更好、更干净。slice()splice()
5赞 Daniele Testa 5/25/2021
你应该解释为什么你应该避免突变。慢吗?如果是这样,慢了多少?值得额外的“麻烦”吗?
4赞 nickf 9/22/2021
@JackG不要忘记它将分配一个新数组,实际上,也会分配一个新数组,因为它返回一个已删除项的数组(在本例中为空数组)。在这些情况下运行基准测试表明,拼接速度更快(~30%),但我们处于每秒数百万次操作的范围内,因此,除非您的应用程序在紧密循环中执行大量此类操作,否则它不会产生任何影响。slice()splice()
7赞 Pawan 3/8/2017 #8

我试过这个,它工作正常!

var initialArr = ["India","China","Japan","USA"];
initialArr.splice(index, 0, item);

索引是要插入或删除元素的位置。

0,即第二个参数,定义索引中要删除的元素数。 包含要在数组中创建的新条目。它可以是一个或多个。item

initialArr.splice(2, 0, "Nigeria");
initialArr.splice(2, 0, "Australia","UK");

评论

4赞 hannad rehman 10/24/2017
只需复制粘贴上面的答案即可。这并没有为问题增加任何价值。您可以添加新答案或对现有答案进行评论。请尝试贡献一些新的东西。我们不想破坏这个社区
15赞 kind user 4/6/2017 #9

另一种可能的解决方案是使用 .Array.reduce

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

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));
console.log(insert(arr2, 3, 2))

33赞 Alireza 12/25/2017 #10

在这种情况下,我建议使用纯 JavaScript。此外,JavaScript 中没有任何插入方法,但我们有一个内置的 Array 方法,可以为您完成这项工作。这叫做拼接...

让我们看看什么是 splice()...

splice() 方法通过删除 现有元素和/或添加新元素。

好的,假设我们下面有这个数组:

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

我们可以像这样删除:3

arr.splice(arr.indexOf(3), 1);

它将返回 3,但如果我们现在检查 arr,我们有:

[1, 2, 4, 5]

到目前为止,一切顺利,但是我们如何使用拼接将新元素添加到数组中呢?

让我们把 3 放回 arr...

arr.splice(2, 0, 3);

让我们看看我们做了什么......

我们再次使用拼接,但这次对于第二个参数,我们传递 0,这意味着我们不想删除任何项目,但同时,我们添加第三个参数,即将在第二个索引处添加的 3......

您应该知道,我们可以同时删除添加。例如,现在我们可以做:

arr.splice(2, 2, 3);

这将删除索引 2 处的两个项目。然后在索引 2 处添加 3,结果将是:

[1, 2, 3, 5];

这显示了拼接中每个项目的工作原理:

array.splice(开始, deleteCount, item1, item2, item3 ...)

评论

2赞 Cristian E. 10/9/2020
感谢您将来的解释,我建议使用非数字作为数组值,以显示一个示例。例如:arr.splice(2, 0, 3) vs arr.splice(2, 0, “C”)。读者更容易理解哪个参数映射到值部分,哪个参数映射到索引部分。 谢谢!
23赞 Srikrushna 6/29/2018 #11

在特定索引处附加单个元素:

// Append at a specific position (here at index 1)
arrName.splice(1, 0,'newName1');
// 1: index number, 0: number of element to remove, newName1: new element


// Append at a specific position (here at index 3)
arrName[3] = 'newName1';

在特定索引处附加多个元素:

// Append from index number 1
arrName.splice(1, 0, 'newElemenet1', 'newElemenet2', 'newElemenet3');
// 1: index number from where append start,
// 0: number of element to remove,
//newElemenet1,2,3: new elements

评论

11赞 sebastianf182 9/11/2018
值得注意的是,arrName[3] 不会附加,它会覆盖。
0赞 Srikrushna 9/13/2018
它将元素添加到现有数组中,而不是覆盖,例如:let arrName = ['xxx', 'yyy', 'zzz'];arrName.splice(1, 0,'aaa', 'bbb', 'ccc');打印 arrName 后
0赞 sebastianf182 9/13/2018
如果 arrName 有 3 个以上的元素,您将覆盖第 3 个元素,而不是附加元素。还是我看错了?
0赞 Srikrushna 9/13/2018
如果我们在中间插入一个元素,它会移动下一个元素而不是覆盖。请具体说明您的问题,您需要什么。以数组(示例)为例,以及您需要在输出中的内容。请评论我
2赞 awe 11/14/2019
如果数组只有 3 个元素,则将追加@Srikrushna。如果索引 3 中有一个元素,则该元素将被替换。如果要在末尾附加,最好使用arrName[3] = 'newName1';arrName.push('newName1');
8赞 Clyde 12/6/2018 #12

任何仍然对此有疑问并且尝试了以前答案中的所有选项但从未得到它的人。我正在分享我的解决方案,这是考虑到您不想显式声明对象与数组的属性。

function isIdentical(left, right){
    return JSON.stringify(left) === JSON.stringify(right);
}

function contains(array, obj){
    let count = 0;
    array.map((cur) => {
        if(this.isIdentical(cur, obj)) 
            count++;
    });
    return count > 0;
}

这是迭代引用数组并将其与要检查的对象进行比较,将它们都转换为字符串,然后迭代是否匹配的组合。然后你就可以数数了。这是可以改进的,但这是我安顿下来的地方。

8赞 alejoko 1/13/2019 #13

减少方法的获利如下:

function insert(arr, val, index) {
    return index >= arr.length
        ? arr.concat(val)
        : arr.reduce((prev, x, i) => prev.concat(i === index ? [val, x] : x), []);
}

因此,通过这种方式,我们可以返回一个新数组(将是一种很酷的功能方式 - 比使用推送拼接要好得多),并在索引处插入元素,如果索引大于数组的长度,它将入到末尾。

5赞 Lesly Revenge 2/17/2019 #14

这是我在我的一个应用程序中使用的工作函数。

这将检查项目是否存在:

let ifExist = (item, strings = [ '' ], position = 0) => {
     // Output into an array with an empty string. Important just in case their isn't any item.
    let output = [ '' ];
    // Check to see if the item that will be positioned exist.
    if (item) {
        // Output should be equal to an array of strings.
        output = strings;
       // Use splice() in order to break the array.
       // Use positional parameters to state where to put the item
       // and 0 is to not replace an index. Item is the actual item we are placing at the prescribed position.
        output.splice(position, 0, item);
    }
    // Empty string is so we do not concatenate with comma or anything else.
    return output.join("");
};

然后我在下面称呼它。

ifExist("friends", [ ' ( ', ' )' ], 1)}  // Output: ( friends )
ifExist("friends", [ ' - '], 1)}  // Output:  - friends
ifExist("friends", [ ':'], 0)}  // Output:   friends:

评论

0赞 De Bonheur 9/12/2022
你能解释一下你的解决方案吗?
6赞 meem 7/19/2019 #15

我必须同意 Redu 的回答,因为 splice() 肯定有一个令人困惑的界面。cdbajorin 给出的响应是“它只在第二个参数为 0 时返回一个空数组。如果它大于 0,则返回从数组中删除的项目“,虽然准确,但证明了这一点。

该功能的目的是拼接,或者正如雅各布·凯勒(Jakob Keller)之前所说,“加入或连接,也要改变。

您有一个已建立的数组,您现在正在更改该数组,这将涉及添加或删除元素......”鉴于此,删除的元素(如果有)的返回值充其量是尴尬的。我 100% 同意,如果这种方法返回了看起来很自然的东西,一个添加了拼接元素的新数组,它可能更适合链接。然后你可以对返回的数组执行诸如 [“19”, “17”].splice(1,0,“18”).join(“...”) 之类的操作。

恕我直言,它返回已删除的内容这一事实只是无稽之谈。如果该方法的目的是“剪掉一组元素”,而这是它的唯一意图,也许。似乎如果我不知道我已经剪掉了什么,我可能没有理由剪掉这些元素,不是吗?

如果它的行为类似于 concat()、map()、reduce()、slice() 等,其中新数组是从现有数组而不是改变现有数组,那就更好了。这些都是可链接的,这是一个重要的问题。链式数组操作是相当常见的。

似乎语言需要朝着一个或另一个方向发展,并尽可能地坚持下去。JavaScript 是功能性的,声明性较弱,这似乎是一个奇怪的偏离规范。

24赞 M. Hamza Rajput 8/28/2019 #16

这里有两种方法:

const array = [ 'My', 'name', 'Hamza' ];

array.splice(2, 0, 'is');

console.log("Method 1: ", array.join(" "));

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

const array = [ 'My', 'name', 'Hamza' ];
array.insert(2, 'is');

console.log("Method 2 : ", array.join(" "));

17赞 vkarpov15 12/24/2019 #17

Array#splice() 是要走的路,除非你真的想避免改变数组。给定 2 个数组和 ,以下是在第一个元素后插入 into 内容的方法:arr1arr2arr2arr1

const arr1 = ['a', 'd', 'e'];
const arr2 = ['b', 'c'];

arr1.splice(1, 0, ...arr2); // arr1 now contains ['a', 'b', 'c', 'd', 'e']

console.log(arr1)

如果您担心改变数组(例如,如果使用 Immutable.js),则可以改用 slice(),不要与 .splice()'p'

const arr3 = [...arr1.slice(0, 1), ...arr2, ...arr1.slice(1)];
46赞 Kamil Kiełczewski 4/24/2020 #18

解决方案和性能

今天(2020.04.24)我为大数组和小数组的选定解决方案进行了测试。我在 Chrome 81.0、Safari 13.1 和 Firefox 75.0 上的 macOS v10.13.6 (High Sierra) 上测试了它们。

结论

适用于所有浏览器

  • 令人惊讶的是,对于小型阵列,基于 and (D,E,F) 的非就地解决方案通常比就地解决方案快 10 到 100 倍slicereduce
  • 对于大型阵列,基于(AI、BI 和 CI)的就地解决方案速度最快(有时是 ~100 倍 - 但这取决于阵列大小)splice
  • 对于小型阵列,BI 解决方案速度最慢
  • 对于大型阵列,E 解决方案最慢

Enter image description here

测试分为两组:就地解决方案(AI、BI 和 CI)和非就地解决方案(D、E 和 F),并针对两种情况进行测试:

  • 测试一个包含 10 个元素的数组 - 你可以在这里运行它
  • 测试一个包含 1,000,000 个元素的数组 - 你可以在这里运行它

经过测试的代码在以下代码片段中显示:

jsfiddle

function AI(arr, i, el) {
  arr.splice(i, 0, el);
  return arr;
}

function BI(arr, i, el) {
  Array.prototype.splice.apply(arr, [i, 0, el]);
  return arr;
}

function CI(arr, i, el) {
  Array.prototype.splice.call(arr, i, 0, el);
  return arr;
}

function D(arr, i, el) {
  return arr.slice(0, i).concat(el, arr.slice(i));
}

function E(arr, i, el) {
  return [...arr.slice(0, i), el, ...arr.slice(i)]
}

function F(arr, i, el) {
  return arr.reduce((s, a, j)=> (j-i ? s.push(a) : s.push(el, a), s), []);
}



// -------------
// TEST
// -------------

let arr = ["a", "b", "c", "d", "e", "f"];

let log = (n, f) => {
  let a = f([...arr], 3, "NEW");
  console.log(`${n}: [${a}]`);
};

log('AI', AI);
log('BI', BI);
log('CI', CI);
log('D', D);
log('E', E);
log('F', F);
This snippet only presents tested code (it not perform tests)

Google Chrome 上小型数组的示例结果如下:

Enter image description here

评论

4赞 kabirbaidhya 9/12/2020
答案没有解决 OP 的问题。
26赞 Kamil Kiełczewski 9/12/2020
@kabirbaidhya实际上在这个答案中你可以找到许多OP问题的解决方案,但这个答案的额外价值是它们之间的性能比较 - 我希望很多人会发现它有用
3赞 kabirbaidhya 9/12/2020
也许,您可能希望稍微调整一下您的答案,以便用户直观地首先看到可能的解决方案,然后查看它们对性能的影响。它看起来主要集中在性能上。
10赞 kabirbaidhya 9/12/2020 #19

不可变插入

如果您需要就地插入到数组中,使用拼接方法肯定是最佳答案。

但是,如果要查找返回新的更新数组而不是在插入时更改原始数组的不可变函数,则可以使用以下函数。

function insert(array, index) {
  const items = Array.prototype.slice.call(arguments, 2);

  return [].concat(array.slice(0, index), items, array.slice(index));
}

const list = ['one', 'two', 'three'];

const list1 = insert(list, 0, 'zero'); // Insert single item
const list2 = insert(list, 3, 'four', 'five', 'six'); // Insert multiple

console.log('Original list: ', list);
console.log('Inserted list1: ', list1);
console.log('Inserted list2: ', list2);

注意:这是 ES6 之前的一种方式,因此它适用于较旧和较新的浏览器。

如果您使用的是 ES6,那么您也可以尝试 rest 参数;请看这个答案

5赞 hossein sedighian 10/9/2020 #20

我喜欢一点安全,我用这个:

Array.prototype.Insert = function (item, before) {
  if (!item) return;
  if (before == null || before < 0 || before > this.length - 1) {
    this.push(item);
    return;
  }
  this.splice(before, 0, item);
}


var t = ["a", "b"]

t.Insert("v", 1)

console.log(t)

评论

6赞 blazkovicz 1/11/2021
你说你喜欢安全,然后建议修改基本原型!逻辑?不
3赞 hossein sedighian 1/27/2021
是的。。这是安全的 m y 定义。哈哈
1赞 Baptiste Arnaud 12/13/2021 #21

这是现代(打字稿功能)方式:

export const insertItemInList = <T>(
  arr: T[],
  index: number,
  newItem: T
): T[] => [...arr.slice(0, index), newItem, ...arr.slice(index)]
86赞 Ran Turner 12/19/2021 #22

使用是实现它的一种优雅方式Array.prototype.splice()

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

console.log(numbers)

了解更多关于Array.prototype.splice的信息

评论

1赞 Travis Heeter 8/30/2023
如上所述,使用 prototype 将向数组添加一个额外的项目,因此之后循环将无法按预期工作。
46赞 Gass 1/6/2022 #23

你可以用它来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)

评论

2赞 vdegenne 5/31/2022
下次请阅读答案时,这个解决方案已经给出了。你只是在重复信息。
7赞 Gass 5/31/2022
@vdegenne当我发布这个答案时,我认为其他答案可以得到更好的解释。票数的增加清楚地表明,答案对某些人有用。
2赞 djna 9/23/2022
是的,解释第二个参数的含义特别有帮助
1赞 bmaggi 1/14/2022 #24

我是这样做的:

const insert = (what, where, index) => 
  ([...where.slice(0, index), what , ...where.slice(index, where.length)]);

const insert = (what, where, index) =>
  ([...where.slice(0, index), what , ...where.slice(index, where.length)]);
  
const list = [1, 2, 3, 4, 5, 6];
const newList = insert('a', list, 2);

console.log(newList.indexOf('a') === 2);

1赞 Pikamander2 3/13/2022 #25

下面是一个简单的函数,支持同时插入多个值:

function add_items_to_array_at_position(array, index, new_items)
{
    return [...array.slice(0, index), ...new_items, ...array.slice(index)];
}

使用示例:

let old_array = [1,2,5];

let new_array = add_items_to_array_at_position(old_array, 2, [3,4]);

console.log(new_array);

//Output: [1,2,3,4,5]

评论

0赞 Pikamander2 3/13/2022
这与许多现有答案类似,但具有函数/扩展运算符/多个项目/示例/尚未发布的输出的简洁组合。
1赞 Steve purpose 7/24/2022 #26
var array= [10,20,30,40]

var i;

var pos=2; //pos=index + 1
/*pos is position which we want to insert at which is index + 1.position two in an array is index 1.*/

var value=5 
//value to insert

//Initialize from last array element

for(i=array.length-1;i>=pos-1;i--){

array[i+1]=array[i]

}

array[pos-1]=value

console.log(array)

评论

2赞 Community 7/25/2022
正如目前所写的那样,你的答案尚不清楚。请编辑以添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。您可以在帮助中心找到有关如何写出好答案的更多信息。
6赞 De Bonheur 8/21/2022 #27

你可以用 array.splice 来做到这一点:

/**
 * @param arr:  Array
 * @param item:  item to insert
 * @param index: index at which to insert 
 * @returns array with the inserted element
 */
export function _arrayInsertAt<T>(arr: T[], item: T, index: number) {
    return  arr.splice(index, 0, item);; 
}

array.slice 的文档

1赞 GMKHussain 12/11/2022 #28

多用途和可重用的方法ARRAYARRAY OF OBJECT

let arr = [0,1,2];
let obj = [{ name: "abc"},{ name: "xyz"},{ name: "ijk"} ];

const addArrayItemAtIndex = ( array, index, newItem ) => {
    return [...array.slice(0, index), newItem, ...array.slice(index)];
}

// For Array
console.log( addArrayItemAtIndex(arr, 2,  159 ) );

// For Array of Objects
console.log( addArrayItemAtIndex(obj, 0, { name: "AMOOS"} ) );

2赞 Nick Parsons 6/4/2023 #29

如果要保持原始数组不变,但返回一个新数组,并将元素插入到特定索引中,则可以使用新的 .toSpliced() 方法:

这样可以避免就地改变阵列:

//                0    1    2
const letters = ["A", "B", "D"];
const insertIndex = 2; // position in the array to insert 
const correctLetters = letters.toSpliced(insertIndex, 0, "C"); // 0 means don't delete any items, just insert. "C" is the item you want to insert.
console.log(correctLetters); // ["A", "B", "C", "D"] (new array contains new char)
console.log(letters); // ["A", "B", "D"] (unmodified)

如果你需要在数组中插入多个项目,就像它的同级 .splice() 一样,你可以与多个参数一起使用:.toSpliced()

.toSpliced(insertIndex, 0, "C", "D", "E");

例如,上面将插入 、 和 at 到数组中而不对其进行修改,而是返回一个新数组。"C""D""E"insertIndex

0赞 Dmitry Shvedov 6/16/2023 #30

很多答案,但没有人提到不能插入数组的最后一个元素。splice

const insertIntoArray = (array, index, ...values) => {
  while (index > array.length) {
    array.push(undefined);
  }
  array.splice(index, 0, ...values);
};
0赞 Akif Kara 7/30/2023 #31
const x = [3, 2, 6, 6, 2]

function addToIndex(arr, index, val){
  let prevArr = arr.slice(0, index)
  let nextArr = arr.slice(index)
  return [...prevArr, val, ...nextArr]
}

console.log(addToIndex(x, 2, 'hello'))

评论

0赞 General Grievance 8/3/2023
看起来很像这个答案:stackoverflow.com/a/38181008
1赞 Shashintha Janadari 8/5/2023 #32
//Suppose we have an array  
let myArray = [2, 4, 6, 8, 10];  

// Index where we want to insert the item  
let indexToInsert = 3;  

// Item we want to insert  
let itemToInsert = 174;  

// Now we Using splice() method to insert the item at the specified index  
myArray.splice(indexToInsert, 0, itemToInsert);  

// output with new value    
console.log(myArray);  

评论

0赞 Community 8/9/2023
您的答案可以通过额外的支持信息得到改进。请编辑以添加更多详细信息,例如引文或文档,以便其他人可以确认您的答案是正确的。您可以在帮助中心找到有关如何写出好答案的更多信息。