Как объединить массивы javascript
Перейти к содержимому

Как объединить массивы javascript

  • автор:

JS объединить массивы

Чтобы объединить массивы в JavaScript, используйте метод concat . Смотрите пример:

let arr1 = [‘a’, ‘b’, ‘c’]; let arr2 = [1, 2, 3]; let arr3 = arr1.concat(arr2); console.log(arr3);

Результат выполнения кода:

[‘a’, ‘b’, ‘c’, 1, 2, 3]

Также объединить массивы можно при помощи оператора spread . Смотрите пример:

let arr1 = [‘a’, ‘b’, ‘c’]; let arr2 = [1, 2, 3]; let arr3 = [. arr1, . arr2]; console.log(arr3);

Смотрите также

  • урок
    заполнение массивов в JavaScript

Всё только о 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; // ['Иванов', 'Сидоров', 'Петров', 'Курочкина'] 

А какой из способов используете вы? Поделитесь в комментариях

Как склеить 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"] 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *