JavaScript | Как добавить массив внутрь другого массива?

Есть массив:

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]
Добавили массив в начало другого массива - JavaScript
Добавили массив в начало другого массива — JavaScript

Мы успешно добавили массив в начало другого массива и сохранили все «сдвинутые» элементы.

 

Как добавить массив в середину другого массива методом splice()?

Понятие «середина» означает то, что мы пытаемся вставить элемент не последним и не первым. Вставленный массив будет где-то между — по середине.

Например, вставляемый массив [55, 55] мы сделаем третьим элементом оригинального массива.

var massiv = [1, 2, 3, 4]
massiv.splice(2, 0, [55, 55])

Теперь наш массив имеет вид:

[1, 2, [55, 55], 3, 4]
Добавили массив в середину другого массива - JavaScript
Добавили массив в середину другого массива — JavaScript

Как добавить массив в конец другого массива методом splice()?

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

По этой причине нам нужно вызывать два метода splice():

  • Один из splice() будет третим параметром другого splice()
  • Другой из splice() будет методом вызова на оригинальном массиве

Конструкция кода будет выглядеть так:

massiv.splice(-1, 0, ...massiv.splice(-1, 1, [55, 55]))

Теперь наш массив имеет вид:

[1, 2, 3, 4, [55, 55]]
Добавили массив в конец другого массива - JavaScript
Добавили массив в конец другого массива — JavaScript

Как это работает?

Первая трансформация оригинального массива:

...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]]

 

Информационные ссылки

JavaScript | Массивы (Array)

Стандарт ECMAScript — Раздел «23.1.3.28 Array.prototype.splice ( start, deleteCount, …items )» — https://tc39.es/ecma262/#sec-array.prototype.splice

 

Поделись записью