提问人:tags2k 提问时间:2/25/2009 最后编辑:Lee Taylortags2k 更新时间:11/2/2023 访问量:3435889
如何将项目插入到特定索引处的数组中?
How to insert an item into an array at a specific index?
问:
我正在寻找一个 JavaScript 数组插入方法,其样式为:
arr.insert(index, item)
最好在jQuery中,但此时任何JavaScript实现都可以。
答:
您需要对本机数组对象进行拼接
函数。
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
评论
arr.splice(2,3)
insert()
如果你想一次将多个元素插入到一个数组中,请查看这个 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);
评论
qml
您可以通过执行以下操作来实现该方法: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' ]
评论
Array.prototype.insert = function (index, items) { this.splice.apply(this, [index, 0].concat(items)); }
自定义数组方法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"
评论
["b", "X", "Y", "Z", "c"]
"d"
slice()
howMany
["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(3, 3);
=> [ ]
切片
方法,而不是您在评论中提到的 。(命名)的第二个参数是从零开始的索引,在该索引处结束提取。切片
提取到但不包括结束
。因此,在你有 之后,从中提取索引从 up 到 的元素,即从 to 但不包括 。这有意义吗?splice
slice
end
insert
["a", "b", "X", "Y", "Z", "c", "d"]
slice
1
6
"b"
"d"
"d"
尽管这个问题已经得到解答,但我还是为另一种方法添加了此注释。
我想将已知数量的项目放入一个数组中,放在特定位置,因为它们来自一个“关联数组”(即一个对象),根据定义,该数组不能保证按排序顺序排列。我希望生成的数组是一个对象数组,但对象在数组中按特定顺序排列,因为数组保证了它们的顺序。所以我这样做了。
首先是源对象,即从 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);
为了实现适当的功能编程和链接目的,发明是必不可少的。实际上,如果它返回突变的数组而不是完全无意义的空数组,那么它本来是完美的。所以这里是这样的: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));
评论
splice
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]
评论
slice()
splice()
slice()
splice()
我试过这个,它工作正常!
var initialArr = ["India","China","Japan","USA"];
initialArr.splice(index, 0, item);
索引是要插入或删除元素的位置。
0,即第二个参数,定义索引中要删除的元素数。 包含要在数组中创建的新条目。它可以是一个或多个。item
initialArr.splice(2, 0, "Nigeria");
initialArr.splice(2, 0, "Australia","UK");
评论
另一种可能的解决方案是使用 .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))
在这种情况下,我建议使用纯 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 ...)
评论
在特定索引处附加单个元素:
// 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
评论
arrName[3] = 'newName1';
arrName.push('newName1');
任何仍然对此有疑问并且尝试了以前答案中的所有选项但从未得到它的人。我正在分享我的解决方案,这是考虑到您不想显式声明对象与数组的属性。
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;
}
这是迭代引用数组并将其与要检查的对象进行比较,将它们都转换为字符串,然后迭代是否匹配的组合。然后你就可以数数了。这是可以改进的,但这是我安顿下来的地方。
减少方法的获利如下:
function insert(arr, val, index) {
return index >= arr.length
? arr.concat(val)
: arr.reduce((prev, x, i) => prev.concat(i === index ? [val, x] : x), []);
}
因此,通过这种方式,我们可以返回一个新数组(将是一种很酷的功能方式 - 比使用推送或拼接要好得多),并在索引处插入元素,如果索引大于数组的长度,它将入到末尾。
这是我在我的一个应用程序中使用的工作函数。
这将检查项目是否存在:
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:
评论
我必须同意 Redu 的回答,因为 splice() 肯定有一个令人困惑的界面。cdbajorin 给出的响应是“它只在第二个参数为 0 时返回一个空数组。如果它大于 0,则返回从数组中删除的项目“,虽然准确,但证明了这一点。
该功能的目的是拼接,或者正如雅各布·凯勒(Jakob Keller)之前所说,“加入或连接,也要改变。
您有一个已建立的数组,您现在正在更改该数组,这将涉及添加或删除元素......”鉴于此,删除的元素(如果有)的返回值充其量是尴尬的。我 100% 同意,如果这种方法返回了看起来很自然的东西,一个添加了拼接元素的新数组,它可能更适合链接。然后你可以对返回的数组执行诸如 [“19”, “17”].splice(1,0,“18”).join(“...”) 之类的操作。
恕我直言,它返回已删除的内容这一事实只是无稽之谈。如果该方法的目的是“剪掉一组元素”,而这是它的唯一意图,也许。似乎如果我不知道我已经剪掉了什么,我可能没有理由剪掉这些元素,不是吗?
如果它的行为类似于 concat()、map()、reduce()、slice() 等,其中新数组是从现有数组而不是改变现有数组,那就更好了。这些都是可链接的,这是一个重要的问题。链式数组操作是相当常见的。
似乎语言需要朝着一个或另一个方向发展,并尽可能地坚持下去。JavaScript 是功能性的,声明性较弱,这似乎是一个奇怪的偏离规范。
这里有两种方法:
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(" "));
Array#splice()
是要走的路,除非你真的想避免改变数组。给定 2 个数组和 ,以下是在第一个元素后插入 into 内容的方法:arr1
arr2
arr2
arr1
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)];
解决方案和性能
今天(2020.04.24)我为大数组和小数组的选定解决方案进行了测试。我在 Chrome 81.0、Safari 13.1 和 Firefox 75.0 上的 macOS v10.13.6 (High Sierra) 上测试了它们。
结论
适用于所有浏览器
- 令人惊讶的是,对于小型阵列,基于 and (D,E,F) 的非就地解决方案通常比就地解决方案快 10 到 100 倍
slice
reduce
- 对于大型阵列,基于(AI、BI 和 CI)的就地解决方案速度最快(有时是 ~100 倍 - 但这取决于阵列大小)
splice
- 对于小型阵列,BI 解决方案速度最慢
- 对于大型阵列,E 解决方案最慢
详
测试分为两组:就地解决方案(AI、BI 和 CI)和非就地解决方案(D、E 和 F),并针对两种情况进行测试:
经过测试的代码在以下代码片段中显示:
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 上小型数组的示例结果如下:
评论
不可变插入
如果您需要就地插入到数组中,使用拼接
方法肯定是最佳答案。
但是,如果要查找返回新的更新数组而不是在插入时更改原始数组的不可变函数,则可以使用以下函数。
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 参数;请看这个答案。
我喜欢一点安全,我用这个:
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)
评论
这是现代(打字稿功能)方式:
export const insertItemInList = <T>(
arr: T[],
index: number,
newItem: T
): T[] => [...arr.slice(0, index), newItem, ...arr.slice(index)]
使用是实现它的一种优雅方式Array.prototype.splice()
const numbers = ['one', 'two', 'four', 'five']
numbers.splice(2, 0, 'three');
console.log(numbers)
了解更多关于Array.prototype.splice的信息
评论
你可以用它来splice()
该方法在添加元素时通常接收三个参数:splice()
- 要在其中添加项的数组的索引
- 要删除的项数,在本例中为
0
- 要添加的元素
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)
评论
我是这样做的:
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);
下面是一个简单的函数,支持同时插入多个值:
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]
评论
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)
评论
你可以用 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
ARRAY 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"} ) );
如果要保持原始数组不变,但返回一个新数组,并将元素插入到特定索引中,则可以使用新的 .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
很多答案,但没有人提到不能插入数组的最后一个元素。splice
const insertIntoArray = (array, index, ...values) => {
while (index > array.length) {
array.push(undefined);
}
array.splice(index, 0, ...values);
};
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'))
评论
//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);
评论