JavaScript метод concat()
Определение и применение
JavaScript метод concat() используется для объединения двух или более массивов в один, при этом он не
изменяет существующие массивы, а возвращает новый массив. Работу метода показывает пример
«Как объединить два массива».
Поддержка браузерами
Спецификация: ecma262
Поддерживается во всех основных браузерах с 2015 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
concat | 1 | 12 | 1 | 4 | 1 | 18 | 4 | 10.1 | 1 | 1.0 | 1 | 1 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
JavaScript синтаксис
array.concat();
array.concat(value1);
array.concat(value1, value2);Спецификация
ECMAScript: Array.prototype.concat.
Значения параметров
| Параметр | Описание |
|---|---|
value1, value2, … |
Один массив / значение, или несколько массивов / значений, перечисленных через запятую и предназначающиеся для объединения в один новый массив. Аргументы необязательны: без них создаётся поверхностная копия исходного массива. |
Возвращаемое значение
Новый массив с поверхностной копией элементов. Исходные массивы не изменяются; вложенные объекты остаются общими.
Особенности
Без аргументов создаёт поверхностную копию. Массивы-аргументы раскрываются на один уровень, пустые позиции
сохраняются; это не рекурсивное объединение. Массивоподобные объекты, например { 0: 'a', length: 1 }, добавляются целиком. Правило меняет символьное свойство Symbol.isConcatSpreadable (признак, раскрывать ли объект при объединении): true раскрывает объект, false добавляет массив как один элемент. Сравните варианты в
примере с Symbol.isConcatSpreadable.
Примеры, попробуйте сами
Как объединить два массива
В следующем примере мы объединим массив состоящий из строковых значений с массивом числовых значений: Измените элементы объединяемых массивов и запустите код. Сравните новый массив и исходные значения.
index.html
<p>Результат выполнения выводится в консоль.</p>
main.js
var firstArray = ['a', 'b', 'c'] // инициализируем переменную, содержащую массив строк
var secondArray = [1, 2, 3] // инициализируем переменную, содержащую массив чисел
var newArray = firstArray.concat(secondArray) // объединяем массивы
console.log(newArray) // результат ["a", "b", "c", 1, 2, 3]
// Без аргументов создаётся другой массив с теми же элементами.
const copy = firstArray.concat()
console.log(copy, copy === firstArray)
Тони готовит пример…Как объединить несколько массивов
В следующем примере мы объединим несколько массивов: Измените элементы объединяемых массивов и запустите код. Сравните новый массив и исходные значения.
index.html
<p>Результат выполнения выводится в консоль.</p>
main.js
var firstArray = ['a', 'b', 'c'] // инициализируем переменную, содержащую массив строк
var secondArray = [1, 2, 3] // инициализируем переменную, содержащую массив чисел
var thirdArray = [true, false] // инициализируем переменную, содержащую массив логических значений
var newArray = firstArray.concat(secondArray, thirdArray) // объединяем массивы
console.log(newArray) // результат ["a", "b", "c", 1, 2, 3, true, false]
Как добавить значения и массивы через concat()
В следующем примере мы объединим массив со значениями, указанными в качестве аргументов метода concat(): Измените элементы объединяемых массивов и запустите код. Сравните новый массив и исходные значения.
index.html
<p>Результат выполнения выводится в консоль.</p>
main.js
var firstArray = ['a', 'b', 'c'] // инициализируем переменную, содержащую массив строк
var newArray = firstArray.concat(3, [2, 1]) // объединяем массив и значения
console.log(newArray) // результат ["a", "b", "c", 3, 2, 1]
Копирование ссылок на объекты
Метод concat() копирует ссылки на объекты в новый массив, а это означает, что как исходный, так и новый
массив ссылаются на один и тот же объект. Обратите внимание, что если объект, на который ссылается ссылка, изменяется,
то изменения будут видны как для новых, так и для исходных массивов. Давайте рассмотрим на следующем примере:
Почему вложенный объект остаётся общим
Измените элементы объединяемых массивов и запустите код. Сравните новый массив и исходные значения.
index.html
<p>Результат выполнения выводится в консоль.</p>
main.js
var thirdArray = ['z'] // инициализируем переменную, содержащую массив со строковым значением
var firstArray = ['a', 'b', 'c'] // инициализируем переменную, содержащую массив строк
var secondArray = [1, 2, thirdArray] // инициализируем переменную, содержащую массив из числовых значений и значение ссылающееся на переменную thirdArray
var newArray = firstArray.concat(secondArray) // объединяем массивы
console.log(newArray) // результат ["a", "b", "c", 1, 2, ["z"]]
thirdArray.push('b') // добавляем строковое значение в конец массива thirdArray
console.log(newArray) // результат ["a", "b", "c", 1, 2, ["z", "b"]]
// Как вы видите значение переменной newArray так же было изменено
Какие аргументы concat() раскрывает
Измените значение Symbol.isConcatSpreadable на false или true. Сравните, добавляется аргумент одним элементом или раскрывается; затем проверьте перенос пустой позиции.
index.html
<p>Результат выполнения выводится в консоль.</p>
main.js
const letters = ['a', 'b']
// Массивоподобный объект не раскрывается: он добавляется как один элемент.
const arrayLike = { 0: 'c', 1: 'd', length: 2 }
console.log('Объект целиком:', letters.concat(arrayLike))
// Symbol.isConcatSpreadable со значением true разрешает раскрыть его элементы.
arrayLike[Symbol.isConcatSpreadable] = true
console.log('Элементы объекта:', letters.concat(arrayLike))
// Со значением false массив добавляется как один вложенный элемент.
const nested = ['e', 'f']
nested[Symbol.isConcatSpreadable] = false
console.log('Массив целиком:', letters.concat(nested))
// Пустая позиция переносится в новый массив, а не заменяется undefined.
const result = letters.concat([, 'g'])
console.log('Есть индекс 2:', 2 in result, result.length)