Пошук уроків, статей та іншого контенту
Навчитеся об’єднувати масиви й значення методами concat, join, flat і flatMap.
У JavaScript масиви можна об’єднувати кількома способами. Вибір методу залежить від результату, який потрібно отримати:
concat() — об’єднати масиви або додати окремі значення;
join() — перетворити елементи масиву на один рядок;
flat() — розгорнути вкладені масиви;
flatMap() — одночасно перетворити елементи та розгорнути результат на один рівень.
Більшість цих методів не змінює початковий масив, а повертає новий.
concat()Метод concat() об’єднує масив із одним або кількома масивами чи окремими значеннями.
const frontend = ["HTML", "CSS"];
const backend = ["Node.js", "PostgreSQL"];
const technologies = frontend.concat(backend, "Docker");
console.log(technologies);
// ["HTML", "CSS", "Node.js", "PostgreSQL", "Docker"]
console.log(frontend);
// ["HTML", "CSS"]Синтаксис:
const result = array.concat(value1, value2, ...);Метод:
не змінює масив, на якому його викликають;
приймає будь-яку кількість аргументів;
якщо аргумент є масивом, його елементи додаються окремо;
якщо аргумент не є масивом, він додається як один елемент.
const numbers = [1, 2];
const result = numbers.concat(
[3, 4],
5,
[6, 7]
);
console.log(result);
// [1, 2, 3, 4, 5, 6, 7]concat() копіює елементи лише на першому рівні. Вкладені об’єкти або масиви не копіюються повністю.
const original = [{ name: "Anna" }];
const copy = original.concat();
copy[0].name = "Olena";
console.log(original[0].name);
// "Olena"У цьому прикладі новим є сам масив, але об’єкт усередині нього залишається спільним.
concat() та оператор розширенняДля простого об’єднання масивів часто використовують оператор розширення ...:
const first = [1, 2];
const second = [3, 4];
const result = [...first, ...second];
console.log(result);
// [1, 2, 3, 4]Обидва варіанти створюють новий масив:
const result1 = first.concat(second);
const result2 = [...first, ...second];concat() зручний, коли потрібно додати значення або кілька різних аргументів. Оператор ... часто легше читати, коли всі джерела вже є масивами.
join()Метод join() об’єднує всі елементи масиву в один рядок. Роздільником за замовчуванням є кома.
const words = ["JavaScript", "це", "цікаво"];
console.log(words.join());
// "JavaScript,це,цікаво"Щоб використати інший роздільник, передайте його як аргумент:
const words = ["JavaScript", "це", "цікаво"];
console.log(words.join(" "));
// "JavaScript це цікаво"
console.log(words.join(" | "));
// "JavaScript | це | цікаво"Синтаксис:
const result = array.join(separator);Якщо роздільник не передано, використовується ",".
join() часто використовують для формування повідомлень, списків або URL-параметрів:
const selectedTags = ["javascript", "arrays", "methods"];
const message = `Вибрані теми: ${selectedTags.join(", ")}`;
console.log(message);
// "Вибрані теми: javascript, arrays, methods"Елементи undefined, null і пропущені елементи масиву під час join() перетворюються на порожній рядок.
const values = ["A", null, undefined, "B"];
console.log(values.join("-"));
// "A---B"join() завжди повертає рядок, навіть якщо масив містить числа:
const numbers = [10, 20, 30];
const result = numbers.join(" + ");
console.log(result);
// "10 + 20 + 30"
console.log(typeof result);
// "string"flat()Метод flat() розгортає вкладені масиви та повертає новий масив.
const nested = [1, [2, 3], [4, 5]];
const result = nested.flat();
console.log(result);
// [1, 2, 3, 4, 5]За замовчуванням flat() розгортає лише один рівень вкладеності.
const nested = [1, [2, [3, 4]]];
console.log(nested.flat());
// [1, 2, [3, 4]]Глибину можна передати аргументом:
const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(1));
// [1, 2, [3, [4]]]
console.log(nested.flat(2));
// [1, 2, 3, [4]]
console.log(nested.flat(3));
// [1, 2, 3, 4]Для розгортання на будь-яку глибину можна використати Infinity:
const nested = [1, [2, [3, [4, [5]]]]];
const result = nested.flat(Infinity);
console.log(result);
// [1, 2, 3, 4, 5]Використовуйте Infinity лише тоді, коли справді потрібно розгорнути всю структуру. Для відомої глибини краще вказати конкретне число.
flat() видаляє пропущені елементиМетод також прибирає порожні позиції масиву на рівнях, які розгортаються:
const values = [1, , 3, [4, , 6]];
console.log(values.flat());
// [1, 3, 4, 6]Це важливо, якщо пропущені елементи мають особливе значення у вашій програмі.
flatMap()Метод flatMap() поєднує:
перетворення кожного елемента за допомогою функції;
розгортання отриманого результату на один рівень.
const numbers = [1, 2, 3];
const result = numbers.flatMap(number => [number, number * 2]);
console.log(result);
// [1, 2, 2, 4, 3, 6]Еквівалентний запис через map() і flat():
const numbers = [1, 2, 3];
const result = numbers
.map(number => [number, number * 2])
.flat();
console.log(result);
// [1, 2, 2, 4, 3, 6]Синтаксис:
const result = array.flatMap(callback);Функція зворотного виклику отримує ті самі аргументи, що й у map():
const result = array.flatMap((element, index, array) => {
// Поверніть значення або масив значень
});flatMap()Якщо повернути порожній масив, поточний елемент не потрапить до результату. Це дозволяє поєднати перетворення та фільтрацію.
const numbers = [1, 2, 3, 4, 5, 6];
const evenDoubled = numbers.flatMap(number => {
if (number % 2 === 0) {
return [number * 2];
}
return [];
});
console.log(evenDoubled);
// [4, 8, 12]За допомогою filter() і map() це саме завдання виглядало б так:
const numbers = [1, 2, 3, 4, 5, 6];
const evenDoubled = numbers
.filter(number => number % 2 === 0)
.map(number => number * 2);
console.log(evenDoubled);
// [4, 8, 12]flatMap() особливо корисний, коли один вхідний елемент може перетворитися на нуль, один або кілька вихідних елементів.
Нехай кожен користувач має список ролей, а потрібно отримати єдиний список усіх ролей:
const users = [
{ name: "Anna", roles: ["admin", "editor"] },
{ name: "Bohdan", roles: ["editor"] },
{ name: "Iryna", roles: ["viewer", "commenter"] }
];
const allRoles = users.flatMap(user => user.roles);
console.log(allRoles);
// ["admin", "editor", "editor", "viewer", "commenter"]Щоб отримати лише унікальні ролі, можна додатково використати Set:
const uniqueRoles = [...new Set(allRoles)];
console.log(uniqueRoles);
// ["admin", "editor", "viewer", "commenter"]map(), flat() і flatMap()Розглянемо однакові дані:
const numbers = [1, 2, 3];
const mapped = numbers.map(number => [number, number * 10]);
const flattened = mapped.flat();
const flatMapped = numbers.flatMap(number => [number, number * 10]);
console.log(mapped);
// [[1, 10], [2, 20], [3, 30]]
console.log(flattened);
// [1, 10, 2, 20, 3, 30]
console.log(flatMapped);
// [1, 10, 2, 20, 3, 30]Різниця:
map() повертає масив результатів, навіть якщо кожен результат є масивом;
flat() розгортає вже готовий вкладений масив;
flatMap() виконує ці дві операції послідовно.
flatMap() розгортає лише один рівень:
const result = [1, 2].flatMap(number => [[number, number * 2]]);
console.log(result);
// [[1, 2], [2, 4]]Повернені внутрішні масиви не розгортаються повторно. Якщо потрібна більша глибина, використовуйте окремий виклик flat().
Ці методи можна поєднувати в ланцюжки.
const groups = [
["javascript", "css"],
["html"],
["node.js", "sql"]
];
const result = groups
.flat()
.join(", ");
console.log(result);
// "javascript, css, html, node.js, sql"Інший приклад: отримати імена активних користувачів одним рядком.
const teams = [
{
name: "Frontend",
members: [
{ name: "Anna", active: true },
{ name: "Bohdan", active: false }
]
},
{
name: "Backend",
members: [
{ name: "Iryna", active: true },
{ name: "Oleh", active: true }
]
}
];
const activeNames = teams
.flatMap(team => team.members)
.filter(member => member.active)
.map(member => member.name)
.join(", ");
console.log(activeNames);
// "Anna, Iryna, Oleh"У цьому ланцюжку:
flatMap() об’єднав учасників усіх команд;
filter() залишив активних;
map() отримав лише імена;
join() сформував один рядок.
concat(), якщо потрібно:об’єднати кілька масивів;
додати окремі значення;
отримати новий масив без зміни початкових.
join(), якщо потрібно:перетворити масив на рядок;
самостійно вибрати роздільник;
сформувати текстове представлення списку.
flat(), якщо потрібно:розгорнути вкладений масив;
визначити глибину розгортання;
прибрати зайвий рівень вкладеності.
flatMap(), якщо потрібно:перетворити кожен елемент у масив;
одразу об’єднати отримані масиви на один рівень;
пропустити елемент, повернувши [];
створити з одного елемента кілька результатів.
Методи concat(), flat() і flatMap() повертають нові масиви.
const numbers = [1, [2, 3]];
numbers.flat();
console.log(numbers);
// [1, [2, 3]]Якщо потрібен результат, його потрібно зберегти:
const numbers = [1, [2, 3]];
const flattened = numbers.flat();
console.log(flattened);
// [1, 2, 3]join() замість об’єднання масивівjoin() повертає рядок, а не масив:
const first = [1, 2];
const second = [3, 4];
const result = first.join(second);
console.log(result);
// "13,24"Для об’єднання масивів використовуйте concat() або оператор ...:
const result = first.concat(second);
console.log(result);
// [1, 2, 3, 4]flat()Без аргументів flat() розгортає лише один рівень:
const values = [[1, [2, 3]]];
console.log(values.flat());
// [1, [2, 3]]Для повного розгортання:
console.log(values.flat(Infinity));
// [1, 2, 3]map() і flatMap()const values = [1, 2, 3];
const result = values.map(value => [value * 2]);
console.log(result);
// [[2], [4], [6]]Якщо потрібен плоский масив, використовуйте flatMap():
const result = values.flatMap(value => [value * 2]);
console.log(result);
// [2, 4, 6]flatMap()Функція flatMap() може повертати як звичайне значення, так і масив, але така структура може бути складнішою для розуміння:
const result = [1, 2, 3].flatMap(number => {
if (number === 2) {
return [number, number * 10];
}
return number;
});
console.log(result);
// [1, 2, 20, 3]Краще дотримуватися зрозумілої домовленості: повертати масиви в усіх гілках або явно пояснювати логіку.
Infinityflat(Infinity) зручний для невідомої глибини, але він може розгорнути структуру сильніше, ніж очікується. Якщо формат даних відомий, вказуйте точну глибину:
const result = nested.flat(2);concat() створює новий масив, об’єднуючи масиви та значення.
join() перетворює елементи масиву на один рядок із заданим роздільником.
flat() розгортає вкладені масиви на вказану глибину.
flatMap() поєднує map() і розгортання на один рівень.
Ці методи зазвичай не змінюють початковий масив.
flatMap() зручно використовувати, коли один елемент може перетворитися на нуль, один або кілька елементів.
Результат join() завжди має тип string, а результати concat(), flat() і flatMap() є масивами.