Javascript Array Concat: как создать массив в JavaScript

Метод concat () массива Javascript не изменяет существующие массивы, а возвращает новый массив, содержащий значения объединенных массивов. Это признак неизменности объектов, потому что вы не можете просто изменить что-либо внутри массива.

Javascript array concat

Javascript Array concat () — это встроенный метод, который используется для объединения двух или более массивов. Функция concat () не изменяет существующий массив, а вместо этого возвращает новый массив. Метод concat () не изменяет this или любой из массивов, предоставленных в качестве аргументов, а вместо этого возвращает неглубокую копию, содержащую копии тех же элементов, объединенные из исходные массивы.

Он считается чистой функцией, а чистая функция всегда возвращает новую копию существующего массива объектов. Если вы ранее использовали Redux, то вы знаете, что мы использовали эту функцию concat для возврата нового состояния класса, а не для изменения этого состояния класса.

Синтаксис

 array1.concat (array2, array3, ..., arrayX) 

# Объединение двух массивов в Javascript

Хорошо, сначала мы протестируем все наши примеры в node.js, потому что это самый простой способ, и нам не нужно было писать какой-либо файл HTML. чтобы увидеть вывод в консоли. Так что это простая настройка для этого примера.

Просто создайте одну папку проекта и внутри нее создайте один файл с именем concatarray .js и добавьте в него следующий код.

//concatarray.jslet realmadrid = ['Гарет Бейл', 'Карим Бензема', 'Серхио Рамос']; let barcelona = ['Messi'  , 'Луис Суарес', 'Жерар Пике']; let Players = realmadrid.concat (barcelona); console.log (Players); 

Перейдите в терминал или cmd и введите следующую команду.

 node concatarray 

Итак, здесь вы можете увидеть такой результат.

Итак, он вернул новый массив, который является добавление обоих массивов, и теперь вы можете проверить оба массива по отдельности и убедиться, что ни один из них не изменился. Итак, это чистая функция, которая возвращает новый массив без изменения существующего.

# Как объединить три массива в Javascript

Мы можем добавить более двух массивов. Добавим три массива.

//concatarray.jslet realmadrid = ['Гарет Бейл', 'Карим Бензема', 'Серхио Рамос']; let barcelona = ['Месси', 'Луис Суарес  ',' Жерар Пике ']; let chelsea = [' Нголо Канте ',' Педро ',' Оливье Жеро '] let Players = realmadrid.concat (barcelona, ​​chelsea); console.log (игроки); 

Итак, функция concat принимает минимум один аргумент и максимум, как вам нравится.

# Как объединить значения в массив

Теперь давайте объединим буквенно-цифровые массивы в следующем примере.

//concatarray.jslet realmadrid = ['Гарет Бейл', 'Карим Бензема', 'Серхио Рамос']; пусть alphaNumeric = realmadrid.concat (1, [2, 3], [4,5,  6,7,8]); console.log (alphaNumeric); 

См. В примере выше; первый массив заполнен строками, а второй массив целочислен и массив массивов.

См. результат.

Итак, это означает, что он добавляет все элементы в один массив, а затем возвращает его. Если элементы являются массивом массивов, тогда он все равно вернет только один массив, содержащий все элементы. Таким образом, результатом будет не массив массивов. Это отдельные значения, будь то целые числа или строки.

# Объединение вложенных массивов в Javascript

Как я уже сказал раньше, если мы объединим массив массивов, тогда он вернет один массив, в котором ни один элемент не будет массивом.

//concatarray.jslet numeric = [10, 11, 12,  13]; пусть arrayNumeric = numeric.concat (1, [2, 3], [4,5,6,7,8]); console.log (arrayNumeric); 

Вывод

# Версии метода concat () массива Javascript

Давайте посмотрим на две версии метода concat () массива js.

 # app.jsgym  = ['?? ‍♂️', '?? ‍♂️', '?? ‍♂️'] sports = ['⛹️‍♀️', '?? ‍♂️', '?']//Версия A: const CombinedExerciseA  = [] .concat (спортзал, спорт); console.log (CombinedExerciseA)//Версия B: const combExerciseB = gym.concat (sports); console.log (CombinedExerciseB) 

Вывод

 node app ['?? ‍♂️', '?? ‍♂️', '?? ‍♂️',  '⛹️‍♀️', '?? ‍♂️', '?'  ] ['?? ‍♂️', '?? ‍♂️', '?? ‍♂️', '⛹️‍♀️', '?? ‍♂️', '?'  ] 

Как видите, результат одинаковый.

Теперь вопрос в том, что нам использовать и почему?

Я предпочитаю версию A , потому что думаю, что цель этого подхода намного яснее. Просто взглянув на него, я понимаю, что создаю новый массив и не манипулирую существующим массивом.

Если я посмотрю на версию B , мне покажется, что я добавляю массив спортзала в массив спорта, и мне это не кажется очевидным. что массив спортзала не меняется. Но, может быть, это только я. Мне было бы любопытно узнать, что вы думаете?

Поскольку у меня нет никаких существенных причин, кроме эстетики, я думаю, вам и вашей команде следует придерживаться того, что вы выберете?

# Разница между оператором распространения и конкатантом массива

Я предпочитаю использовать оператор распространения ES6, потому что я считаю его более кратким и удобным в написании. НО, по-прежнему есть преимущества использования метода concat ()..

Оператор распространения отлично подходит, когда вы заранее знаете, что имеете дело с массивами. Но что происходит, когда источником является что-то еще, например строка. И вы хотите добавить эту строку в массив. Давайте рассмотрим пример.

Объединение массивов с использованием оператора Spread

См. Следующий код.

//app.jsgym = ['?? ‍♂️', '?? ‍♂️', '?? ‍♂️'] sports = ['⛹️‍♀️', '?? ‍♂️', '?'  ] const CommanderUsingSpread = [... спортзал, ... спорт] console.log (CombinedUsingSpread) 

Выходные данные

 node  app ['?? ‍♂️', '?? ‍♂️', '?? ‍♂️', '⛹️‍♀️', '?? ‍♂️', '?'  ] 

В этом случае оператор распространения работает как функция concat (), потому что все элементы относятся к типу массива.

Давайте рассмотрим сценарий, в котором один тип данных — это массив, содержащий символы, один из которых является строкой, а затем использует оператор распространения для объединения двух значений.

//app.jsgym = ['?? ‍♂️', '?  ? ‍♂️ ',' ?? ‍♂️ '] sports =' Chess'const комбинированныйUsingSpread = [... спортзал, ... спорт] console.log (комбинированныйUsingSpread) 

Вывод

 node app ['?? ‍♂️', '?? ‍♂️', '?? ‍♂️', 'C', 'h', 'e'  , 's', 's'] 

Из вывода вы можете видеть, что строка расширяется на свои символы.

Мы не планировали этот вывод.

Давайте воспользуемся методом массива concat () и посмотрим на результат.

//app.jsgym = ['?? ‍♂️', '?? ‍♂️'  , '?? ‍♂️'] sports = 'Chess'const комбинированныйUsingConcat = gym.concat (sports) console.log (комбинированныйUsingConcat) 

Вывод

 приложение узла ['?? ‍♂️', '?? ‍♂️', '?? ‍♂️', 'Chess'] 

Excelle нт! Мы получаем желаемый результат.

Итак, вот простое правило. Если вы знаете, что имеете дело с массивами, используйте оператор распространения. Но если вы можете иметь дело с не-массивом, тогда используйте метод concat () для слияния массива?.

В любом случае я просто хочу указать на это, чтобы вы могли использовать наиболее подходящий метод в зависимости от проблемы, которую вы пытаетесь решить?.

Заключение

Функция Javascript concat () создает новый массив , состоящий из элементов в объекте, для которого он вызывается, с последующим в порядке следования, для каждый аргумент, элементы этого аргумента (если аргумент является массивом ) или сам аргумент (если аргумент не является массивом ). Он не рекурсивен во вложенные аргументы array .

Наконец, пример Javascript Array Concat завершен.

См. Также

Javascript array filter ()

Javascript array map ()

Javascript array map ()

Javascript array forEach ()

Массив Javascript reduce ()

Массив Javascript push ()