Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «flatMap() vs map()». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`flatMap()`** робить те саме, що й `map()`, але додатково **"розплющує" вкладені масиви до одного рівня** (еквівалентно `map().flat(1)`), тоді як **`map()`** лише перетворює елементи і повертає масив того самого розміру. **Ключове:** `flatMap()` = `map()` + `flat(1)` - розплющення відбувається лише на 1 рівень.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняМетоди `map()` та `flatMap()` дійсно схожі, але мають одну **ключову відмінність**: `flatMap()` не лише **трансформує елементи**, а й **"розплющує" вкладені масиви до одного рівня**. Розберемо по кроках: --- ## 1. Основна відмінність | Метод | Що робить | |---|---| | `map()` | Перетворює кожен елемент масиву і повертає **новий масив** того самого розміру | | `flatMap()` | Перетворює кожен елемент, **а потім об'єднує вкладені масиви** в один плоский масив (еквівалентно `map().flat(1)`) | --- ## Приклад 1. Звичайний map() ```javascript const words = ["hello", "world"]; const mapped = words.map(word => word.split("")); console.log(mapped); // [['h','e','l','l','o'], ['w','o','r','l','d']] ``` > `map()` створює **масив масивів** - вкладену структуру. Нічого не об'єднує, просто повертає те, що ти повернув з колбеку. --- ## Приклад 2. flatMap() робить те саме, але "розплющує" результат ```javascript const words = ["hello", "world"]; const flattened = words.flatMap(word => word.split("")); console.log(flattened); // ['h','e','l','l','o','w','o','r','l','d'] ``` > `flatMap()` застосував `split()` і **об'єднав результат** в один плоский масив. Те саме, що: > > ```javascript > words.map(word => word.split("")).flat(); > ``` --- ## Приклад 3. Реальний сценарій - фільтрація і трансформація разом ```javascript const sentences = [ "hello world", "js is awesome" ]; // хочемо масив усіх слів const words = sentences.flatMap(sentence => sentence.split(" ")); console.log(words); // ['hello', 'world', 'js', 'is', 'awesome'] ``` > Дуже зручно, коли потрібно **"розбити і об'єднати"** елементи в одну колекцію. --- ## Приклад 4. Відмінність у розмірі результату ```javascript const arr = [1, 2, 3]; const mapped = arr.map(x => [x, x * 2]); console.log(mapped); // [[1,2], [2,4], [3,6]] - довжина 3 const flatMapped = arr.flatMap(x => [x, x * 2]); console.log(flatMapped); // [1,2,2,4,3,6] - довжина 6 ``` > `flatMap()` не створює вкладеності, а об'єднує всі підмасиви в один рівень. --- ## Важливо: - `flatMap()` **завжди розплющує лише на 1 рівень** (`flat(1)`). ```javascript [[1], [2, [3]]].flatMap(x => x); // [1, 2, [3]] ``` - Якщо потрібно "розплющити глибше" (`flat(2)` або більше) - використовуй `flat()` окремо. - `flatMap()` **не змінює вихідний масив** - повертає новий. --- ## Часті помилки 1. **Очікування глибокого розплющування:** ```javascript [ [1, [2]], [3, [4]] ].flatMap(x => x); // [1, [2], 3, [4]] - не глибоке! ``` Використовуй `flat(2)`: ```javascript [ [1, [2]], [3, [4]] ].flat(2); // [1, 2, 3, 4] ``` 2. **Забутий** `return` **при фігурних дужках** ```javascript arr.flatMap(x => { [x, x*2] }); // поверне [] ``` Правильно: ```javascript arr.flatMap(x => [x, x*2]); // або arr.flatMap(x => { return [x, x*2]; }); ``` --- ## Коли використовувати flatMap() | Мета | Чи підходить `flatMap()` | |---|---| | Перетворити елементи масиву | Так | | Отримати плоский список із вкладених результатів | Так | | Розплющити масив без трансформації | Ні - використовуй `flat()` | | Зберегти вкладеність | Ні - використовуй `map()` | --- ## Коротко: > `flatMap()` **=** `map()` **+** `flat(1)` Формула для запам'ятовування: `arr.flatMap(fn)` → застосовує `fn` до кожного елемента і об'єднує результат в один рівень. --- ## Порівняння map() vs flatMap() | Критерій | `map()` | `flatMap()` | |---|---|---| | Перетворює елементи | Так | Так | | Повертає вкладені масиви | Так | Ні | | "Розплющує" результат | Ні | Так (на 1 рівень) | | Змінює вихідний масив | Ні | Ні | | Аналог | `arr.map()` | `arr.map().flat(1)` | --- ## Реальний приклад: обробка даних API ```javascript const users = [ { name: 'Tim', hobbies: ['ski', 'guitar'] }, { name: 'Alex', hobbies: ['books'] }, { name: 'John', hobbies: ['surf', 'code'] }, ]; // отримати всі хобі в один список const hobbies = users.flatMap(user => user.hobbies); console.log(hobbies); // ['ski', 'guitar', 'books', 'surf', 'code'] ``` > Ідеальний випадок для `flatMap()` - коли в колбеку повертаються **масиви**, і ти хочеш отримати **один об'єднаний список**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.