path: root/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html

---
title: Array.prototype.flatMap()
slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap
tags:
  - Array
  - JavaScript
  - flatMap
  - Масив
  - метод
translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
---
<div>{{JSRef}}</div>

<p>Метод <code><strong>flatMap()</strong></code> спочатку виконує надану функцію на кожному елементі, а після цього вирівнює отриманий результат і зберігає його у новий масив. Це аналогічно послідовному виклику {{jsxref("Array.prototype.map","map()")}} та {{jsxref("Array.prototype.flat","flat()")}} з глибиною 1, але <code>flatMap()</code> буває доволі корисним, оскільки об'єднання обох методів у один є трохи ефективнішим.</p>

<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>



<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
    // повернути елемент для нового масиву new_array
}</var>[, <var>thisArg</var>])</pre>

<h3 id="Параметри">Параметри</h3>

<dl>
 <dt><code>callback</code></dt>
 <dd>Функція, яка створює елемент для нового масиву. Приймає три аргументи:
 <dl>
  <dt></dt>
  <dt><code>currentValue</code></dt>
  <dd>Поточний елемент масиву, що обробляється.</dd>
  <dt><code>index</code>{{optional_inline}}</dt>
  <dd>Індекс поточного елемента, що обробляється.</dd>
  <dt><code>array</code>{{optional_inline}}</dt>
  <dd>Масив, для якого був викликаний метод <code>flatMap</code>.</dd>
 </dl>
 </dd>
 <dt><code>thisArg</code>{{optional_inline}}</dt>
 <dd>Значення, що використовується як <code>this</code> під час виконання <code>callback</code>.</dd>
</dl>

<h3 id="Значення_що_повертається">Значення, що повертається</h3>

<p>Новий масив, в якому кожний елемент є результатом виклику функції <code>callback</code>, вирівняний до глибини 1.</p>

<h2 id="Опис">Опис</h2>

<p>Дивіться детальний опис функції зворотного виклику у {{jsxref("Array.prototype.map()")}}. Метод <code>flatMap</code> є ідентичним послідовному виклику методів <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> та <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> з глибиною 1.</p>

<h2 id="Приклади">Приклади</h2>

<h3 id="map()_та_flatMap()"><code>map()</code> та <code>flatMap()</code></h3>

<pre class="brush: js">let arr1 = [1, 2, 3, 4];

arr1.map(x =&gt; [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x =&gt; [x * 2]);
// [2, 4, 6, 8]

// вирівнюється тільки один рівень
arr1.flatMap(x =&gt; [[x * 2]]);
// [[2], [4], [6], [8]]
</pre>

<p>В той час як наведений вище результат міг бути отриманий використанням самого <code>map</code>, нижче приклад, який краще демонструє використання <code>flatMap</code>.</p>

<p>Давайте створимо список слів зі списку речень.</p>

<pre class="brush: js">let arr1 = ["Сьогодні сонячно у", "", "Львові"];

arr1.map(x =&gt; x.split(" "));
// [["Сьогодні","сонячно","у"],[""],["Львові"]]

arr1.flatMap(x =&gt; x.split(" "));
// ["Сьогодні","сонячно","у", "", "Львові"]</pre>

<p>Зверніть увагу, що довжина результуючого списку може відрізнятися від довжини початкового списку.</p>

<h3 id="Для_додавання_та_видалення_елементів_під_час_виконання_map()">Для додавання та видалення елементів під час виконання <code>map()</code></h3>

<p>Метод <code>flatMap</code> можна використовувати, щоб додавати та видаляти елементи (змінювати кількість елементів) під час виконання <code>map</code>. Іншими словами, він дозволяє кожен з множини елементів перетворювати на множину елементів (обробляючи кожен елемент окремо), а не завжди <em>1-1</em>. В цьому плані він протилежність метода <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter</a>. Просто поверніть 1-елементний масив, щоб залишити елемент, багатоелементний масив, щоб додати елементи, або порожній масив, щоб видалити елемент.</p>

<pre class="brush: js">// Припустимо, ми бажаємо видалити всі від'ємні числа та розбити непарні числа на парне число та 1
let a = [5, 4, -3, 20, 17, -33, -4, 18]
//       |\  \  x   |  | \   x   x   |
//      [4,1, 4,   20, 16, 1,       18]

a.flatMap( (n) =&gt;
  (n &lt; 0) ?      [] :
  (n % 2 == 0) ? [n] :
                 [n-1, 1]
)

// очікуваний результат: [4, 1, 4, 20, 16, 1, 18]
</pre>

<h2 id="Альтернатива">Альтернатива</h2>

<h3 id="reduce()_та_concat()"><code>reduce()</code> та <code>concat()</code></h3>

<pre class="brush: js">var arr1 = [1, 2, 3, 4];

arr1.flatMap(x =&gt; [x * 2]);
// є еквівалентом
arr1.reduce((acc, x) =&gt; acc.concat([x * 2]), []);
// [2, 4, 6, 8]
</pre>

<p>Зауважте, однак, що цей метод краще не застосовувати для великих масивів, бо він буде неефективним: на кожній ітерації він створює новий тимчасовий масив, який треба прибирати збирачу сміття, і він копіює елементи з поточного масива-накопичувача у новий масив замість того, щоб просто додати нові елементи у існуючий масив.</p>

<div class="hidden">
<p>Будь ласка, не додавайте поліфіли у цю статтю. За довідкою, звертайтесь: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p>
</div>

<h2 id="Специфікації">Специфікації</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Специфікація</th>
   <th scope="col">Статус</th>
   <th scope="col">Комент</th>
  </tr>
  <tr>
   <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flatMap"><code>Array.prototype.flatMap</code></a></td>
   <td>Завершено (4)</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>

<div>


<p>{{Compat("javascript.builtins.Array.flatMap")}}</p>
</div>

<h2 id="Див._також">Див. також</h2>

<ul>
 <li>{{jsxref("Array.prototype.flat()")}}</li>
 <li>{{jsxref("Array.prototype.map()")}}</li>
 <li>{{jsxref("Array.prototype.reduce()")}}</li>
 <li>{{jsxref("Array.prototype.concat()")}}</li>
</ul>