Всё только о JavaScript
Иногда необходимо объединить несколько массивов в один, содержащий элементы из исходных массивов. Для этого в JavaScript есть метод concat . Он создаёт копию исходного массива, добавляя к нему переданные аргументы, подобно методу push . Однако, в отличие от push , если методу concat передан другой массив, то будут добавлены элементы этого массива, а не сам массив единственным элементом.
Array.prototype.toString = function() < return '[' + this.join(', ') + ']'; >; var a = [1, 2, 3]; alert(a.concat(4, 5, 6)); // [1, 2, 3, 4, 5, 6] alert(a.concat([4, 5], [6])); // [1, 2, 3, 4, 5, 6] Однако дальше одного уровня concat аргументы-массивы не разворачивает.
Array.prototype.toString = function() < return '[' + this.join(', ') + ']'; >; var a = [1, 2, 3]; alert(a.concat([4, [5], 6])); // [1, 2, 3, 4, [5], 6] С разреженными массивами ситуация обстоит ожидаемая: пропуски как из исходного массива, так и из массивов-аргументов, сохраняются.
Array.prototype.toString = function() < return '[' + this.join(', ') + ']'; >; var a = [1, , 3]; alert(a.concat([4, , 6])); // [1, , 3, 4, , 6] Деление массива
Метод slice имеет сигнатуру slice(begin[, end]) и возвращает подмассив исходного массива, начиная с индекса begin и заканчивая индексом end — 1 . Чтобы легче запомнить такую странную нумерацию, лучше считать, что передаются индексы не элементов, а «межэлементного пространства».
Индексы элементов: 0 1 2 3 4 5 6 7 8 ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ | | | | | | | | | | Индексы для slice: 0 1 2 3 4 5 6 7 8 9 Тогда становится понятно, что ar.slice(0, 1) вернёт только нулевой элемент, а slice(5, 9) — с пятого по восьмой элементы.
var a = [0, 1, 2, 3, 4, 5]; alert(a.slice(0, 2)); // 0,1 alert(a.slice(4, 5)); // 4 Если второй аргумент является отрицательным числом, то отсчёт второго индекса идёт с конца массива.
var a = [0, 1, 2, 3, 4, 5]; alert(a.slice(0, -2)); // 0,1,2,3 Если же второй аргумент не передан вообще, то возвращается копия массива от begin до конца.
var a = [0, 1, 2, 3, 4, 5]; alert(a.slice(3)); // 3,4,5 Клонирование массива
В JavaScript нет нативного метода для клонирования массивов, однако его легко сэмулировать, помня, что concat и slice не меняют исходный массив. Достаточно вызвать метод concat без аргументов или метод slice с единственным аргументом равным 0 .
var a = [1, 2, 3]; var b = a.concat(); var c = a.slice(0); alert(a + ' ; ' + b + ' ; ' + c); // 1,2,3 ; 1,2,3 ; 1,2,3 alert([a == b, a == c, b == c]); // false,false,false Обратите внимание, если в массиве лежат ссылки на объекты, в том числе ссылки на другие массивы, то в новосозданном массиве будут лежать ссылки на те же самые объекты. Поэтому если вы хотите клонировать многомерный массив, то придётся вручную создавать новый массив, после чего перебрать подмассивы исходного массива и клонировать их в новый.
// Клонируется только массив верхнего уровня var a = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; var b = a.concat(); alert(a[0][1]); // 2 alert(b[0][1]); // 2 b[0][1] = 15; alert(a[0][1]); // 15 // Клонируем вложенные массивы var a = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; var b = []; a.forEach(function(subArray) < b.push(subArray.concat()); >); alert(a[0][1]); // 2 alert(b[0][1]); // 2 b[0][1] = 15; alert(a[0][1]); // 2 Как объединить массивы в JavaScript
Массивы по своей сути это структура данных, представляющая упорядоченную коллекцию индексированных элементов.
И довольно часто в практике возникает необходимость объединения массивов — когда два и более отдельных массивов превращаются в большой массив содержащий все элементы первоначальных массивов.
Например объединение массива [1,2] и [5,6] приведет к появлению массива [1,2,5,6]
Мы рассмотрим три способа объединить массивы в JavaScript: 2 иммутабельных (новый массив создается после объединения)
Способ 1 — объединение массивов через оператор spread
Если вам нужен один хороший способ объединения массивов в JavaScript, тогда оператор spread — ваш выбор.
Напишите внутри массива две или более переменных с префиксом в виде spread оператора . и JavaScript объединит их в один новый массив. Собственно синтаксис:
const result = [. array1, . array2];Как пример предположим у нас есть два массива содержащих фамилии студентов students1 и students2
const students1 = ['Иванов', 'Сидоров']; const students2 = ['Петров', 'Курочкина']; const all = [. students1, . students2]; all; // ['Иванов', 'Сидоров', 'Петров', 'Курочкина'] const all = [. students1, . students2] создает новый массив содержащий элементы исходных массивов students1 и students2
Порядок в котором вы перечисляете массивы при помощи оператора spread имеет значение! Элементы массива вставляются в том порядке в котором идут переменные этих массивов.
В нашем примере поменяем порядок:
const students1 = ['Иванов', 'Сидоров']; const students2 = ['Петров', 'Курочкина']; const all = [. students2, . students1]; all; // ['Петров', 'Курочкина', 'Иванов', 'Сидоров'] Spread оператор позволяет объединять 2 и более массивов:
const newArray = [. array1, . array2, . array3, . arrayN];Способ 2 — объединение массивов методом array.concat()
Если вы предпочитаете функциональные методы объединения массивов, то можете использовать array1.concat(array2) метод:
const newArray = array1.concat(array2);или в другом варианте
const newArray = [].concat(array1, array2);array.concat() не изменяет исходные массивы, а формирует новый имеющий в составе элементы объединяемых массивов.
Давайте попробуем повторить пример из первого способа:
const students1 = ['Иванов', 'Сидоров']; const students2 = ['Петров', 'Курочкина']; const all_1 = students1.concat(students2); const all_2 = [].concat(students1,students2); all_1; // ['Иванов', 'Сидоров', 'Петров', 'Курочкина'] all_2; // ['Иванов', 'Сидоров', 'Петров', 'Курочкина'] Метод concat позволяет объединять более двух массивов:
const newArray = [].concat(array1, array2, array3, arrayN);Способ 3 — объединение массивов через метод array.push()
Как мы видели ранее два предыдущих способа создают новый массив содержащий исходные, но иногда необходимо не создавать новый массив, а добавить один массив в другой. В этом случает один из исходных массивов будет изменен.
Вы наверняка знаете что метод array.push(item) добавляет к имеющемуся массиву новый элемент и ставит его в конец массива.
const students = ['Иванов']; students.push('Сидоров'); students; // ['Иванов', 'Сидоров'] Благодаря тому факту что array.push(item1, item2, . itemN) может принимать множественное количество элементов, мы можем запушить целый массив через оператор spread примененный к аргументу:
array1.push(. array2); И если брать пример с нашими студентами то получим:
const students1 = ['Иванов', 'Сидоров']; const students2 = ['Петров', 'Курочкина']; students1.push(. students2); students1; // ['Иванов', 'Сидоров', 'Петров', 'Курочкина'] А какой из способов используете вы? Поделитесь в комментариях
Статья обновлена 28/12/2022
Сергей Мочалов
Веб-разработчик. Создаю и поддерживаю сайты для клиентов с 2009 года
Как склеить 2 массива на js
Есть ещё вариант склеить 2 массива — воспользоваться оператором spread:
Выглядит это следующим образом:
const result = [. array1, . array2]; Порядок, в котором вы перечисляете массивы при помощи оператора spread, имеет значение!
Элементы массива вставляются в том порядке в котором идут переменные этих массивов.
Обратимся к примеру:
const animals1 = ['cat', 'dog']; const animals2 = ['hamster', 'parrot']; const allAnimals = [. animals1, . animals2]; console.log(allAnimals); // => ['cat', 'dog', 'hamster', 'parrot'] Для справки: spread оператор позволяет объединять 2 и более массивов.
27 октября 2021
Самый простой вариант это использовать метод concat() . Он добавляет к массиву на котором был вызван массив, переданный в качестве аргумента.
const collection1 = ['hexlet', 'is']; const collection2 = ['awesome']; const collection3 = collection1.concat(collection2); console.log(collection3); // => ["hexlet", "is", "awesome"] Объединение элементов двух массивов в новый массив в JavaScript
В этом посте будет обсуждаться, как объединить элементы двух массивов в новый массив в JavaScript. То есть создайте новый массив, включающий все элементы первого массива, а затем все элементы второго массива, не изменяя исходные массивы.
1. Использование Array.concat() функция
Стандартная функция объединения двух или более массивов в JavaScript: Array.concat() функция. Эта функция объединяет два или более массивов и возвращает новый массив, содержащий все элементы исходных массивов, оставляя исходные массивы нетронутыми. Например: