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

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

2498 голосов
/ 25 февраля 2009

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

arr.insert(index, item)

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

Ответы [ 14 ]

4058 голосов
/ 25 февраля 2009

Вам нужна функция 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());
250 голосов
/ 03 октября 2012

Вы можете реализовать метод 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' ]
86 голосов
/ 04 июля 2016

Кроме сращивания, вы можете использовать этот подход, который не будет изменять исходный массив, но создаст новый массив с добавленным элементом. Обычно вы должны избегать мутаций, когда это возможно. Я использую оператор распространения 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]
71 голосов
/ 25 марта 2013

Пользовательский массив 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/

32 голосов
/ 30 августа 2012

Если вы хотите вставить несколько элементов в массив одновременно, проверьте ответ о переполнении стека: Лучший способ склеить массив в массив в 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);
17 голосов
/ 14 мая 2016

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

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

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

Хорошо, все вышеперечисленное с 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));
12 голосов
/ 25 декабря 2017

Я рекомендую использовать чистый 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]

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

arr.splice(2, 0, 3);

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

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

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

arr.splice(2, 2, 3);

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

[1, 2, 3, 5];

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

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

7 голосов
/ 28 июня 2018

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

//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
6 голосов
/ 05 апреля 2017

Другое возможное решение с использованием 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);
5 голосов
/ 04 декабря 2015

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

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

Сначала исходный объект, строка 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);
Страница:
...