Concat: примеры (JAVASCRIPT)

Краткие примеры использования

Работа с массивами

Объединение массивов с примитивами и другими массивами:

const arr1 = [1, 2];
const arr2 = [3, 4];
const result = arr1.concat(arr2, 5, [6, 7]);
console.log(result);

[1, 2, 3, 4, 5, 6, 7]

Работа со строками

Склеивание строк:

const str1 = "Hello";
const resultStr = str1.concat(" ", "World", "!");
console.log(resultStr);

"Hello World!"

Передача различных типов аргументов

const base = ['a'];
const res = base.concat(true, null, undefined, [[1, 2]], {key: 'val'});
console.log(res);

['a', true, null, undefined, [1, 2], {key: 'val'}]

Аналогичные методы в JavaScript

Для объединения данных в JavaScript существуют и другие способы.

Оператор spread (...) (для массивов и строк) - современный и часто более удобный синтаксис. Позволяет легко объединять несколько массивов: const newArr = [...arr1, ...arr2];. Для строк результат аналогичен concat().

Array.prototype.push() - мутирующий метод, который добавляет элементы в конец исходного массива. В отличие от concat(), изменяет оригинальный массив.

Оператор + или шаблонные строки (для строк) - простейший способ сложения строк: const str = str1 + ' ' + str2; или const str = `${str1} ${str2}`;.

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

Распространенные ошибки

1. Ожидание мутации исходного массива. Метод не изменяет исходный объект.

const arr = [1, 2];
arr.concat([3, 4]);
console.log(arr); // Ожидание: [1,2,3,4], реальность: [1,2]

[1, 2]

2. Попытка вызвать на null или undefined. Метод существует только у объектов Array и String.

let val = null;
val.concat([1]); // Ошибка TypeError

3. Забывание, что concat раскрывает только один уровень вложенности массива.

const arr = [1];
const nested = [[2, 3], 4];
const res = arr.concat(nested);
console.log(res); // Элемент [2,3] останется массивом

[1, [2, 3], 4]

4. Смешивание вызовов для строк и массивов. Синтаксис похож, но результаты принципиально разные.

Изменения в спецификации

Метод Array.prototype.concat и String.prototype.concat существуют с первых версий ECMAScript и остаются стабильными. Существенных изменений в их работе не было.

Важным контекстным изменением стало появление в ES6 (ECMAScript 2015) оператора расширения ..., который в большинстве сценариев объединения массивов выступает более удобной альтернативой, но не заменяет concat полностью. Также в современных версиях JavaScript движки оптимизируют производительность метода.

Расширенные примеры применения

1. Создание иммутабельных цепочек обновлений данных (часто используется в Redux-редюсерах).

const initialState = [{id: 1, name: 'Item 1'}];
const newItem = {id: 2, name: 'Item 2'};
const updatedState = initialState.concat(newItem);
console.log(initialState);
console.log(updatedState);

[{id: 1, name: 'Item 1'}]
[{id: 1, name: 'Item 1'}, {id: 2, name: 'Item 2'}]

2. Эмуляция метода flat() для раскрытия одного уровня вложенности.

const nested = [[1, 2], [3, 4], 5];
const flattened = [].concat(...nested); // Применение spread для аргументов concat
console.log(flattened);

[1, 2, 3, 4, 5]

3. Объединение с обработкой возможного undefined или null источника с помощью логического оператора ИЛИ.

const maybeArray = undefined;
const safeArray = (maybeArray || []).concat([1, 2]);
console.log(safeArray);

[1, 2]

4. Конкатенация строк с разделителем, альтернатива join для небольшого числа строк.

const parts = ['protocol', 'domain', 'path'];
const url = ''.concat(
  parts[0], '://',
  parts[1], '/',
  parts[2]
);
console.log(url);

"protocol://domain/path"

5. Объединение массивоподобных объектов (arguments, NodeList) после приведения.

function mergeArgs() {
    return [].concat(...arguments); // Используем spread для преобразования arguments
}
console.log(mergeArgs([1], [2, 3], 4));

[1, 2, 3, 4]

Аналоги функции в других языках

Концепция объединения последовательностей распространена.

PHP: Функция array_merge() для массивов и оператор . для строк.

// PHP
$arr1 = [1, 2];
$arr2 = [3, 4];
$result = array_merge($arr1, $arr2); // [1, 2, 3, 4]
$str = "Hello " . "World"; // "Hello World"

Python: Для списков - оператор + или метод extend() (мутирующий). Для строк - оператор + или join().

# Python
list1 = [1, 2]
list2 = [3, 4]
new_list = list1 + list2  # [1, 2, 3, 4]
str_res = "Hello " + "World"  # "Hello World"

MySQL: Функция CONCAT() для объединения строк из результатов запроса.

-- MySQL
SELECT CONCAT(first_name, ' ', last_name) AS full_name FROM users;

C++: Для строк (std::string) используется оператор + или метод append(). Для контейнеров (vector) - метод insert() с итераторами.

Главное отличие JavaScript-метода concat - его универсальность для работы с разными типами аргументов и автоматическая "распаковка" массивов при вызове на массиве.