Есть массив:
var massiv = [1, 2, 3, 4]
Мы хотим добавить новый массив [55, 55] внутрь оригинального массива, чтобы сохранились все элементы. Как это сделать?
В какое место добавить(вставить) новый массив?
Существует всего 3 варианта куда мы можем запихнуть новый массив:
Рассмотрим все 3 варианта реализации. Нам нужно воспользоваться методом splice() для объектов-прототипов Array.
Как добавить массив в начало другого массива методом splice()?
Первым параметром мы указываем стартовый индекс, с которого начнётся добавление нового массива. В нашем случае добавлять будем в начало т. е. добавляемый массив станет первым элементом оригинального массива — это индекс 0. Остальные элементы сдвинутся вправо. Длина оригинального массива увеличится.
Вторым параметром мы указываем сколько элементов оригинального массива мы хотим заменить во время вставки. В нашем случае мы не хотим заменять ни одного элемента оригинального массива, поэтому указываем 0.
Третьим параметром мы передаём сам новый массив, который станет первым элементом оригинального массива — это [55, 55].
var massiv = [1, 2, 3, 4] massiv.splice(0, 0, [55, 55])
Теперь наш массив имеет вид:
[[55, 55], 1, 2, 3, 4]
Мы успешно добавили массив в начало другого массива и сохранили все «сдвинутые» элементы.
Как добавить массив в середину другого массива методом splice()?
Понятие «середина» означает то, что мы пытаемся вставить элемент не последним и не первым. Вставленный массив будет где-то между — по середине.
Например, вставляемый массив [55, 55] мы сделаем третьим элементом оригинального массива.
var massiv = [1, 2, 3, 4] massiv.splice(2, 0, [55, 55])
Теперь наш массив имеет вид:
[1, 2, [55, 55], 3, 4]
Как добавить массив в конец другого массива методом splice()?
Метод splice() работает таким образом, что если мы укажем в качестве стартового индекса «-1«, то применится правило, которое закинет наш массив не в конец, а в пред-конец. То есть наш вставляемый массив станет предпоследним элементом. И это не совсем то, что нам нужно.
По этой причине нам нужно вызывать два метода splice():
- Один из splice() будет третим параметром другого splice()
- Другой из splice() будет методом вызова на оригинальном массиве
Конструкция кода будет выглядеть так:
massiv.splice(-1, 0, ...massiv.splice(-1, 1, [55, 55]))
Теперь наш массив имеет вид:
[1, 2, 3, 4, [55, 55]]
Как это работает?
Первая трансформация оригинального массива:
...massiv.splice(-1, 1, [55, 55]))
Эта конструкция изменяет оригинальный массив на [1, 2, 3, [55, 55]] и возвращает нам удалённые элементы — другой массив [4].
Вторая трансформация оригинального масива:
massiv.splice(-1, 0, ...[4]))
Теперь, если мы вызовем метод splice() на массиве [1, 2, 3, [55, 55]] со стартовой позицией также «-1», и не удалим элементы (создадим сдвиг), и распакуем элементы массива [4] при помощи троеточия (spread), то получим нужный результат
[1, 2, 3, 4, [55, 55]]
Информационные ссылки
Стандарт ECMAScript — Раздел «23.1.3.28 Array.prototype.splice ( start, deleteCount, …items )» — https://tc39.es/ecma262/#sec-array.prototype.splice
