Как вставить элемент в массив по указанному индексу?
Я ищу метод вставки элемента в массив на JavaScript, который можно использовать следующим образом:
arr.insert(index, item);
Предпочтительно на jQuery, но любая реализация на JavaScript также подойдет.
5 ответ(ов)
Вы можете реализовать метод 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']
Этот метод добавляет элементы в массив по указанному индексу, не заменяя существующие элементы. Используя splice
, вы можете вставить нужные элементы без их удаления.
Вы можете использовать splice()
для этого
Метод splice()
обычно принимает три аргумента при добавлении элемента:
- индекс массива, в который будет добавлен элемент
- количество элементов для удаления, в данном случае это
0
- элемент, который нужно добавить
let array = ['item 1', 'item 2', 'item 3']
let insertAtIndex = 0
let itemsToRemove = 0
array.splice(insertAtIndex, itemsToRemove, 'вставить эту строку на индекс 0')
console.log(array)
После выполнения этого кода массив будет выглядеть так: ['вставить эту строку на индекс 0', 'item 1', 'item 2', 'item 3']
.
Вопрос: Как создать метод insert
для массива в JavaScript, который будет удобно использовать в функциональном программировании и поддерживать цепочку вызовов?
Ответ: Для правильного функционального программирования и целей цепочечных вызовов действительно необходимо иметь метод 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)); // вывод: [3, 4, 8, 9]
console.log(JSON.stringify(b)); // вывод: [3, 4, 5, 6, 7, 8, 9]
Таким образом, новый метод insert
позволяет вставлять элементы в массив, не изменяя его оригинальную версию, что соответствует принципам функционального программирования.
Я рекомендую использовать чистый JavaScript в данном случае. В JavaScript нет метода вставки, однако у нас есть встроенный метод для массивов, который выполняет эту задачу. Он называется splice...
Давайте разберемся, что такое splice()...
Метод splice() изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые элементы.
Представим, что у нас есть массив ниже:
const arr = [1, 2, 3, 4, 5];
Мы можем удалить элемент 3
, сделав так:
arr.splice(arr.indexOf(3), 1);
Этот метод вернет 3
, но если мы проверим массив сейчас, то он будет выглядеть так:
[1, 2, 4, 5]
Пока всё хорошо, но как мы можем добавить новый элемент в массив, используя splice?
Давайте снова добавим 3
в массив...
arr.splice(2, 0, 3);
Посмотрим, что мы сделали...
Мы снова использовали splice, но на этот раз для второго аргумента передали 0, что означает, что мы не хотим удалять никакие элементы, но в то же время добавляем третий аргумент, который равен 3
, и который будет добавлен на второй индекс...
Важно отметить, что мы можем удалять и добавлять одновременно. Например, теперь мы можем сделать так:
arr.splice(2, 2, 3);
Это удалит два элемента на индексе 2, затем добавит 3 на этом же индексе, и результат будет таким:
[1, 2, 3, 5];
Таким образом, работает каждый параметр в splice:
array.splice(start, deleteCount, item1, item2, item3 ...)
Вот два способа, как можно вставить элемент в массив в JavaScript:
Способ 1: Используя splice
const array = ['My', 'name', 'Hamza'];
array.splice(2, 0, 'is');
console.log("Метод 1: ", array.join(" "));
Здесь метод splice
используется для вставки элемента 'is'
на позицию 2
без удаления каких-либо элементов.
Способ 2: Добавление метода insert
к прототипу массива
Array.prototype.insert = function(index, item) {
this.splice(index, 0, item);
};
const array = ['My', 'name', 'Hamza'];
array.insert(2, 'is');
console.log("Метод 2: ", array.join(" "));
В этом подходе мы создаем собственный метод insert
, который также использует splice
, но делает код более читаемым и удобным для повторного использования.
Оба способа позволят вам вставить элемент в массив, выберите тот, который больше подходит вашей ситуации!
Как перемешать (сделать случайным) массив в JavaScript?
Как объединить два массива в JavaScript и удалить дубликаты?
Как очистить массив в JavaScript?
Как удалить все дубликаты из массива объектов?
Выбор последнего элемента в массиве JavaScript