Как вставить элемент в массив по определенному индексу (JavaScript)?

Я ищу метод вставки массива JavaScript в стиле:

arr.insert(index, item)

Предпочтительно в jQuery, но любая реализация JavaScript будет делать в этот момент.

+2628
25 февр. '09 в 14:29
источник поделиться
17 ответов

То, что вы хотите, - это функция splice на собственном массиве.

arr.splice(index, 0, item); будет вставлять item в arr по указанному индексу (сначала удаляя 0 элементов, то есть просто вставку).

В этом примере мы создадим массив и добавим в него элемент в индекс 2:

var arr = [];
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";

console.log(arr.join());
arr.splice(2, 0, "Lene");
console.log(arr.join());
+4271
25 февр. '09 в 14:32
источник

Вы можете реализовать метод 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' ]
+264
03 окт. '12 в 14:26
источник
другие ответы

Связанные вопросы


Похожие вопросы

Кроме сращивания, вы можете использовать этот подход, который не будет мутировать исходный массив, но создаст новый массив с добавленным элементом. Обычно вам следует избегать мутации. Я использую оператор распространения 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]
+105
04 июл. '16 в 9:18
источник

Методы пользовательского массива 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"

DEMO: http://jsfiddle.net/UPphH/

+73
25 мар. '13 в 17:45
источник

Если вы хотите вставить несколько элементов в массив сразу, проверьте этот ответ: лучший способ сращить массив в массив в 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);
+35
30 авг. '12 в 4:37
источник

Для правильного функционального программирования и целенаправленности важно изобретение Array.prototype.insert(). На самом деле сплайсинг мог бы быть идеальным, если бы он вернул мутированный массив вместо абсолютно бессмысленного пустого массива. Итак, вот оно

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));
+20
13 мая '16 в 23:22
источник

В этом случае я рекомендую использовать чистый JavaScript, также нет метода вставки в JavaScript, но у нас есть метод, который является встроенным методом Array, который выполняет задание для вас, он называется splice...

Посмотрим, что splice()...

Метод splice() изменяет содержимое массива путем удаления существующих элементов и/или добавления новых элементов.

ОК, представьте, что у нас есть этот массив ниже:

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

Мы можем удалить 3 следующим образом:

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

Он вернет 3, но если мы проверим arr сейчас, у нас есть:

[1, 2, 4, 5]

Пока что так хорошо, но как мы можем добавить новый элемент в массив, используя сплайсинг? Пусть вернется 3 в...

arr.splice(2, 0, 3);

Посмотрим, что мы сделали...

Мы снова используем сплайсинг, но на этот раз для второго аргумента мы передаем 0, значит, мы хотим удалить элемент, но в то же время добавим третий аргумент, который будет добавлен во втором индексе...

Вы должны знать, что мы можем удалить и добавить одновременно, например, теперь мы можем сделать:

arr.splice(2, 2, 3);

Который удалит 2 элемента в индексе 2, затем добавит 3 по индексу 2, и результат будет:

[1, 2, 3, 5];

Это показывает, как работают каждый элемент в сращивании:

array.splice(start, deleteCount, item1, item2, item3...)

+14
25 дек. '17 в 13:04
источник

Добавить единый элемент по определенному индексу

//Append at 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 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
+9
28 июн. '18 в 19:13
источник

Это:

var arr= ["India","China","Japan","USA"];

arr.splice(index, 0, item);

Введет элемент в arr с указанным index (сначала удалив 0 элементов, то есть просто вставку).

+8
24 февр. '17 в 13:29
источник

Другое возможное решение с использованием Array#reduce.

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

function insert(arr, item, index) {
    arr = arr.reduce(function(s, a, i) {
      i == index ? s.push(item, a) : s.push(a);
      return s;
    }, []);   
    console.log(arr);
}

insert(arr, "banana", 1);
insert(arr2, 3, 2);
+6
05 апр. '17 в 17:06
источник

Даже если на это уже был дан ответ, я добавляю эту заметку для альтернативного подхода.

Я хотел помещать известное количество элементов в массив в определенные позиции, поскольку они отрываются от "ассоциативного массива" (т.е. объекта), который по определению не гарантированно находится в отсортированном порядке. Я хотел, чтобы результирующий массив был массивом объектов, но объекты были в определенном порядке в массиве, так как массив гарантирует их порядок. Поэтому я сделал это.

Сначала исходный объект, строка JSONB, полученная из PostgreSQL. Я хотел, чтобы он отсортировался по свойству "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);
+5
04 дек. '15 в 18:36
источник

Я пробовал это, и он работает нормально!

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

Индекс - это позиция, в которую вы хотите вставить или удалить элемент. 0, т.е. Второй параметр определяет количество элементов из объекта, подлежащего удалению, - это новые записи, которые вы хотите создать в массиве. Это может быть один или несколько.

initialArr.splice(2, 0, "Nigeria");
initialArr.splice(2, 0, "Australia","UK");
+3
08 мар. '17 в 6:35
источник

Любой, у кого есть проблемы с этим, и попробовал все варианты выше и никогда не получил его. Я делюсь своим решением, это нужно учитывать, что вы не хотите явно указывать свойства вашего объекта и массива.

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;
}

Это комбинация итерации массива ссылок и сравнение его с объектом, который вы хотите проверить, преобразовать оба из них в строку, а затем повторить, если она соответствует. Тогда вы можете просто посчитать. Это можно улучшить, но это то, где я поселился. Надеюсь это поможет.

+3
06 дек. '18 в 4:26
источник

Взятие прибыли по методу снижения следующим образом:

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

Таким образом, таким способом мы можем вернуть новый массив (это будет классный функциональный способ - гораздо лучше, чем использовать push или splice) с элементом, вставленным в index, и если индекс больше длины массива, он будет вставлен в конце.

+2
12 янв. '19 в 17:04
источник

Немного более старая тема, но я должен согласиться с Реду выше, потому что у splice определенно немного запутанный интерфейс. И ответ, данный cdbajorin, что "он возвращает пустой массив только тогда, когда второй параметр равен 0. Если он больше 0, он возвращает элементы, удаленные из массива", является точным доказательством этого. Целью функции является соединение или, как уже было сказано ранее, Якобом Келлером, "присоединение или подключение, а также изменение. У вас есть установленный массив, который вы сейчас изменяете, который включает добавление или удаление элементов…". Учитывая это, возвращаемое значение элементов, если они были удалены, в лучшем случае неудобно. И я на 100% согласен, что этот метод мог бы лучше подходить для цепочки, если бы он возвратил то, что кажется естественным, новый массив с добавленными элементами сращивания. Затем вы можете делать что-то вроде ["19", "17"]. Splice (1,0, "18"). Join ("...") или что угодно с возвращаемым массивом. Тот факт, что он возвращает то, что было удалено, является просто бессмысленным ИМХО. Если целью метода было "вырезать набор элементов", и это было только его намерение, может быть. Похоже, если я не знаю, что я уже вырезал, у меня, вероятно, нет особых причин вырезать эти элементы, не так ли? Было бы лучше, если бы он вел себя как concat, map, Reduce, Slice и т.д., Где новый массив сделан из существующего массива, а не изменял существующий массив. Все они цепные, и это серьезная проблема. Это довольно распространенное явление для манипулирования массивами. Похоже, что язык должен идти в том или ином направлении и стараться придерживаться его как можно больше. Javascript, будучи функциональным и менее декларативным, просто кажется странным отклонением от нормы.

+1
18 июл. '19 в 17:38
источник

Вот рабочая функция, которую я использую в одном из своих приложений.

Это проверяет, если пункт выхода

let ifExist = (item, strings = [ '' ], position = 0) => {
     // output into an array with empty string. Important just in case their is no item. 
    let output = [ '' ];
    // check to see if the item that will be positioned exist.
    if (item) {
        // output should equal to array of strings. 
        output = strings;
       // use splice in order to break the array. 
       // use positition param 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
16 февр. '19 в 22:48
источник

Вот два способа:

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(" "));

0
28 авг. '19 в 9:28
источник

Посмотрите другие вопросы по меткам или Задайте вопрос