Метод concat() массива JavaScript

Метод JavaScript array concat() объединяет (или конкатенирует) два или более массивов. Он используется для объединения элементов двух или более массивов в JavaScript.

Возвращает копию нового массива, содержащего объединенные (или слитые) массивы. Объединенный массив содержит элементы первого массива, затем элементы второго массива.

Чтобы объединить массивы, используйте метод на первом массиве и передайте имя второго массива в качестве параметра. Этот метод не изменяет существующие массивы.

Синтаксис метода JavaScript Array concat()

Общий синтаксис определения метода concat() в JavaScript выглядит следующим образом:

array1.concat(array2, array3,..., arrayN)
Or,
array.concat(value1, value2,.... valueN)

Здесь array — имя вызывающего объекта массива. value1, value2, …. valueN — значения, передаваемые в качестве параметров методу concat(), который добавляет эти значения в конец вызывающего объекта массива.

Передаваемые значения аргументов могут быть значением данных или объектом массива. Если элемент массива является строкой, числом или логическим значением (не объектом String, Number или Boolean), JavaScript копирует значения исходного массива в новый массив.

Но если исходный элемент массива является ссылкой на объект любого типа, JavaScript копирует ссылку на объект в новый массив. В этом случае и исходный, и новый массив ссылаются на один и тот же объект.

Таким образом, если мы внесем изменения в любой из элементов массива, изменение отразится на объекте, и оба элемента массива отразят изменение объекта. То есть изменение будет видно как новому, так и исходному массивам.

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

Рассмотрим следующий пример кода. У нас есть два отдельных массива, names и age. Мы объединим элементы обоих массивов.

Пример 1:

<script>
let names = ["Nick", "Paul", "Deepak"];
let ages = [30, 35, 32];
let concatArray = names.concat(ages);
document.write(concatArray);
</script>

При запуске этого кода в браузере будет сгенерирован следующий вывод.

Output:
      Nick,Paul,Deepak,30,35,32

В этом коде мы создали массив с именем names из трех элементов и массив с именем ages из трех элементов.

Далее мы определили новый массив с именем concatArray, который является комбинацией двух массивов. Мы присвоили значение, возвращаемое методом concat(), новому массиву с именем concatArray.

Объединение двух массивов с использованием метода JavaScript concat()

Давайте создадим очень простую программу, в которой мы объединим элементы двух массивов строкового и числового типов.

Пример 2:

<script>
// Create arrays of string and numeric types.
   const letters = ['a', 'b', 'c', 'd', 'e'];
   const numbers = [1, 2, 3, 4, 5, 6];
// Concatenate two arrays letters and numbers and stores the result to a variable alphaNumeric.
   const alphaNumeric = letters.concat(numbers);
   document.write(alphaNumeric);
</script>

Output:
     a,b,c,d,e,1,2,3,4,5,6

Как видно из выходных данных, метод concat() объединяет переданный параметром массив в конце вызова array.

Если вы хотите сначала получить элементы массива numbers, вызовите метод concat(), используя имя массива numbers и отправьте имя массива letters в качестве параметра. Посмотрите на следующий код скрипта ниже.

Пример 3:

<script>
const letters = ['a', 'b', 'c', 'd', 'e'];
const numbers = [1, 2, 3, 4, 5, 6];
const alphaNumeric = numbers.concat(letters);
document.write(alphaNumeric);
</script>

Output:
      1,2,3,4,5,6,a,b,c,d,e

Пример 4:

<script>
let fruits = new Array("Orange", "Apple", "Banana");
let veggies = new Array("Peas", "Corn");
let fruits_n_veggies = fruits.concat(veggies);
document.write(fruits_n_veggies);
</script>

Output:
       Orange,Apple,Banana,Peas,Corn

Давайте создадим программу на JavaScript, в которой мы объединим два массива и выполним их итерацию с помощью цикла for.

Пример 5:

<script>
// Creating arrays.
   let days1 = ["Sunday", "Monday", "Tuesday"];
   let days2 = ["Wednesday", "Thursday", "Friday", "Saturday"];
// Join both arrays using concat() method and stores the result to a variable weekDays.
   let weekDays = days1.concat(days2);
// Iterating new array using for loop.
   for(let i = 0; i < weekDays.length; i++) {
        document.write(weekDays[i]+ "<br>");
    }
</script>

Output:
     Sunday
     Monday
     Tuesday
     Wednesday
     Thursday
     Friday
     Saturday

Объединение двух массивов с помощью оператора Spread в JavaScript

Для объединения массивов альтернативным подходом является использование оператора расширения, представленного в ES6. Давайте создадим программу для объединения двух массивов с использованием оператора расширения в JavaScript.

Пример 6:

<script>
let evens = [2, 4, 6, 8, 10];
let odds = [1, 3, 5, 7, 9];
let evensAndOdds = [...evens,...odds];
document.write(evensAndOdds);
</script>

Output:
      2,4,6,8,10,1,3,5,7,9

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

Если вы хотите объединить более двух массивов одновременно или хотите объединить массивы с литеральными значениями, используйте оператор расширения, который является отличным инструментом в JavaScript. Посмотрите на другой пример, основанный на нем.

Пример 7:

<script>
let evens = [2, 4, 6, 8, 10];
let odds = [1, 3, 5, 7, 9];
let evensAndOdds = [...evens, 12, 14,...odds, 11, 13];
document.write(evensAndOdds);
</script>

Output:
     2,4,6,8,10,12,14,1,3,5,7,9,11,13

Объединение массива объектов в JavaScript

Если массив содержит объект любого типа, JavaScript копирует ссылку на объект в новый массив. Например, если мы объединим два массива объектов, имеющих элементы, JavaScript не создаст новые объекты массива.

Вместо этого новый объединенный массив получает объектные ссылки, указывающие на те же объекты массива. Если мы изменим элемент в объединенном объекте массива, мы также увидим изменение в исходном массиве.

Давайте рассмотрим пример программы на его основе.

Пример 8:

<script>
let array1 = [new Array(2, 3, 4)];
let array2 = [new Array(5, 6, 7)];
let combinedArray = array1.concat(array2);
document.write("New merged array: " +combinedArray, "<br>");

// Adding an element in the new array.
combinedArray[0].push(8); // push() method adds element to the end of array.
document.write("Change in original array: " +array1, "<br>");
document.write("Change in merged array: " +combinedArray);
</script>

Output:
      New merged array: 2,3,4,5,6,7
      Change in original array: 2,3,4,8
      Change in merged array: 2,3,4,8,5,6,7

Пример 9:

<script>
let colors1 = new Array("Red", "yellow");
let colors2 = new Array("Green", "White");
let array1 = [colors1];
let array2 = [colors2];
let combinedArray = array1.concat(array2);
document.write("New merged array: " +combinedArray, "<br>");

// Adding an element in the new array.
  combinedArray[0].push("Black");
  document.write("Change in original array: " +array1, "<br>");
  document.write("Change in merged array: " +combinedArray);
</script>

Output:
     New merged array: Red,yellow,Green,White
     Change in original array: Red,yellow,Black
     Change in merged array: Red,yellow,Black,Green,White

Объединение трех массивов

Если мы объединим три массива, то сначала будут идти элементы массива, для которого мы вызываем метод concat(), а затем будут объединены элементы каждого имени массива, отправленного в качестве параметра, в том порядке, в котором они были отправлены.

Давайте рассмотрим пример, в котором мы объединим три массива числовых типов. Посмотрите на следующий код скрипта, который объединит три массива.

Пример 10:

<script>
let num1 = [10, 20, 30];
let num2 = [40, 50, 60];
let num3 = [70, 80, 90];

let numbers = num1.concat(num2, num3);
document.write(numbers);
</script>

Output:
      10,20,30,40,50,60,70,80,90

Пример 11:

<script>
let fruits = new Array("Banana", "Apple");
let veggies = ["Corn", "Peas"];
let meats = new Array("Chicken", "Fish");
let combinedGroup = fruits.concat(meats, veggies);
document.write(combinedGroup);
</script>

Output:
     Banana,Apple,Chicken,Fish,Corn,Peas

Объединение значений в массив

Давайте рассмотрим пример, в котором мы объединим три значения в массив.

Пример 12:

<script>
// Create an array.
   let letters = ['a', 'b', 'c', 'd'];
// Concatenate numeric values at the end of calling array.
   let alphaNumeric = letters.concat(1, [2, 3, 4]);
   document.write(alphaNumeric);
</script>

Output:
      a,b,c,d,1,2,3,4

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

Давайте создадим программу JavaScript, в которой мы будем объединять вложенный массив. Посмотрите на следующий код ниже.

Пример 5:

let num1 = [1, 2, 3];
let num2 = [
    [4, 5],
    [6, 7],
];
let joined = num1.concat(num2);
console.log(joined);

// Changes the value 2 to 0.
   num1[1] = 0;
   console.log(num1);
// Changes not reflected in a joined array.
   console.log(joined);

Output:
      [1, 2, 3, [4, 5], [6, 7] ]
      [1, 0, 3]
      [1, 2, 3, [4, 5], [6, 7] ]

В этом уроке вы изучили метод concat() в JavaScript с помощью различных примеров программ. Надеюсь, вы поняли основные концепции метода concat() и попрактиковались во всех примерах программ.