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

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

<p>Метод <code><strong>map()</strong></code> <strong>створює новий масив</strong> з результатами виклику наданої функції на кожному елементі масиву, який викликав метод.</p>

<p>{{EmbedInteractiveExample("pages/js/array-map.html")}}</p>

<div class="hidden">
<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request." </p>
</div>

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

<pre class="brush: js"><var>var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Повернути елемент нового масиву new_array
}[, thisArg])</var></pre>

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

<dl>
 <dt><code>callback</code></dt>
 <dd>Функція, яка повертає елемент нового масиву. Приймає три аргументи:</dd>
 <dd>
 <dl>
  <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>map</code>.</dd>
 </dl>
 </dd>
 <dt><code>thisArg</code>{{optional_inline}}</dt>
 <dd>Значення, що буде використане як <code>this</code> при виконанні <code>callback</code>.</dd>
</dl>

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

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

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

<p>Метод <code>map</code> викликає передану <code>callback-функцію</code> <strong>один раз для кожного елементу</strong> масиву, в заданому порядку, та створює новий масив з результатів. <code>callback</code> викликаться тільки для індексів яким відповідають значення, включно з <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>. Функція не викликається для елеметів значення яких відсутні (мається на увазі, індекси які не були явно задані, які були видалені або яким не було присвоєне значення).</p>

<p>Остільки <code>map</code> створює новий масив, викликати його, якщо ви не збираєтесь використовувати повернений масив, є антишаблоном; скористайтесь натомість <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach</code></a> або <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Statements/for...of"><code>for-of</code></a>. Ознаки того, що вам не підходить метод <code>map</code>: А) Ви не використовуєте масив, який він повертає, і/або Б) Ви не повертаєте значення у функції <code>callback</code>.</p>

<p><code>callback</code> викликається з трьома аргументами: значення елемента, індекс елемента, та масив на якому операцію було викликано.</p>

<p>Якщо <code>thisArg</code> параметр переданий в <code>map</code>, він буде використовуватись як ключове слово this  для <code>callback-функції</code>. В іншому випадку, значення {{jsxref("undefined")}} буде використане як <code>this</code>. Значення this, яке спостерігається в callback-функції, в кінцевому рахунку визначається згідно <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">звичайних правил для визначення this, видимого з функції</a>.</p>

<p><code>map</code> не змінює масив, на якому був викликаний (хоча <code>callback</code>, якщо був викликаний, може змінити).</p>

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

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

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

<h3 id="Перетворення_масиву_з_числами_в_масив_квадратних_коренів">Перетворення масиву з числами в масив квадратних коренів</h3>

<p>Наступний код бере масив з числами і створює новий масив, який складається з квадратних коренів чисел з першого масиву.</p>

<pre class="brush: js">var numbers = [1, 4, 9];
var roots = numbers.map(function(num) {
return Math.sqrt(num)
});
// roots тепер [1, 2, 3]
// numbers залишається [1, 4, 9]
</pre>

<h3 id="Використання_map_для_переформатування_об'єктів_в_масиві">Використання map для переформатування об'єктів в масиві</h3>

<p>Наступний код використовує масив з об'єктами щоб створити новий масив з переформатованими об'єктами.</p>

<pre class="brush: js">var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map(obj =&gt;{
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray тепер [{1:10}, {2:20}, {3:30}],

// kvArray залишається:
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]
</pre>

<h3 id="Перетворення_масиву_чисел_використовуючи_функцію_з_аргументом">Перетворення масиву чисел використовуючи функцію з аргументом</h3>

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

<pre class="brush: js">var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

// doubles тепер [2, 8, 18]
// numbers залишається [1, 4, 9]
</pre>

<h3 id="Загальне_використання_map">Загальне використання <code>map</code></h3>

<p>Цей приклад показує як використовувати map на рядках ({{jsxref("String")}}) щоб отримати масив байтів в ASCII кодуванні яке відображає значення літер:</p>

<pre class="brush: js">var map = Array.prototype.map;
var a = map.call('Hello World', function(x) {
   return x.charCodeAt(0);
});
// a тепер дорівнює [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
</pre>

<h3 id="Загальне_використання_map_з_querySelectorAll">Загальне використання <code>map</code> з <code>querySelectorAll</code></h3>

<p>Даний приклад показує, як виконати перебір набору об'єктів, отриманих методом <code>querySelectorAll</code>. Тому що метод <code>querySelectorAll</code> повертає <strong><em>NodeList</em></strong>, який є колекцією об'єктів.</p>

<p>У даному випадку ми повертаємо значення всіх вибраних опцій на екрані:</p>

<pre class="brush: js">var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value;
});
</pre>

<p>Це простіше зробити методом {{jsxref("Array.from()")}}.</p>

<h3 id="Хитрий_спосіб_використання">Хитрий спосіб використання</h3>

<p>(<a href="http://www.wirfs-brock.com/allen/posts/166">натхненний цим блог-постом</a>)</p>

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

<p>Розглянемо:</p>

<pre class="brush: js">["1", "2", "3"].map(parseInt);</pre>

<p>Хоча можна було б очікувати <code>[1, 2, 3]</code>, справжнім результатом буде <code>[1, NaN, NaN]</code>.</p>

<p>Метод <code>parseInt</code> часто використовується з одним аргументом, але приймає два. Перший - це вираз, а другий - основа системи числення для функції зворотного виклику. <code>Array.prototype.map</code> передає 3 аргументи:</p>

<ul>
 <li>елемент</li>
 <li>індекс</li>
 <li>масив</li>
</ul>

<p>Третій аргумент ігнорується методом parseInt, <u>але не другий</u>, звідси й можлива плутанина. Ось стислий огляд кроків перебору:</p>

<pre class="brush: js">// parseInt(string, radix) -&gt; map(parseInt(value, index))
/*  first iteration (index is 0): */ parseInt("1", 0); // 1
/* second iteration (index is 1): */ parseInt("2", 1); // NaN
/*  third iteration (index is 2): */ parseInt("3", 2); // NaN</pre>

<p>Поговоримо про рішення.</p>

<pre class="brush: js">function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// Результатом є масив чисел (як і очікувалось)

// Те саме, але з використанням лаконічного стрілкового синтаксису
['1', '2', '3'].map( str =&gt; parseInt(str) );

// Простіший спосіб досягти вищевказаного
['1', '2', '3'].map(Number); // [1, 2, 3]

// На відміну від parseInt(), Number() також поверне десятковий або експоненціальний запис:
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
// Для порівняння, якщо використати parseInt() для попереднього масиву:
['1.1', '2.2e2', '3e300'].map( str =&gt; parseInt(str) ); // [1, 2, 3]</pre>

<p>Ще один варіант результату метода map, що викликається з parseInt в якості параметра, виглядає наступним чином:</p>

<pre class="brush: js">var xs = ['10', '10', '10'];

xs = xs.map(parseInt);

console.log(xs);
// Результат 10,NaN,2 може бути неочікуваним, з огляду вищеописане.</pre>

<h3 id="Масив_містить_значення_undefined">Масив містить значення undefined</h3>

<p>Коли повертається undefined або нічого не повертається:</p>

<pre class="brush: js">var numbers = [1, 2, 3, 4];
var filteredNumbers = numbers.map(function(num, index) {
  if(index &lt; 2) {
     return num;
  }
});
// filteredNumbers дорівнює [1, 2, undefined, undefined]
// numbers досі дорівнює [1, 2, 3, 4]</pre>

<h2 id="Поліфіл">Поліфіл</h2>

<p><font face="Consolas, Liberation Mono, Courier, monospace">Метод <code>map</code> </font>був доданий до ECMA-262 стандарту в 5-тій редакції; тому він може бути присутнім не у всіх реалізаціях стандарту. Ви можете обійти це, вставляючи наступний код на початок вашого скритпу, дозволяючи використовувати map в реалізаціях які ще його не підтримують. Цей алгоритм є точно таким який вказаний в  ECMA-262, 5му виданні, передбачаючи що {{jsxref("Object")}}, {{jsxref("TypeError")}}, і {{jsxref("Array")}} мають свої власні значення  і що <code>callback.call</code> обчислює початкове значення <code>{{jsxref("Function.prototype.call")}}</code>.</p>

<pre class="brush: js">// Функціональні кроки ECMA-262, версія 5, 15.4.4.19
// Довідка: http://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {

  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Нехай O дорівнює результату виклику ToObject з |this|
    //    в якості аргументу.
    var O = Object(this);

    // 2. Нехай lenValue дорівнює результату виклику внутрішнього методу O
    //    Get з аргументом "length".
    // 3. Нехай len дорівнює ToUint32(lenValue).
    var len = O.length &gt;&gt;&gt; 0;

    // 4. Якщо IsCallable(callback) дорівнює false, викинути виняток TypeError.
    // Див.: http://es5.github.com/#x9.11
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined.
    if (arguments.length &gt; 1) {
      T = thisArg;
    }

    // 6. Нехай A дорівнює новому масиву, створеному виразом new Array(len),
    //    де Array - це стандартний вбудований конструктор з таким ім'ям,
    //    а len дорівнює значенню len.
    A = new Array(len);

    // 7. Нехай k дорівнює 0
    k = 0;

    // 8. Повторювати, доки k &lt; len
    while (k &lt; len) {

      var kValue, mappedValue;

      // а. Нехай Pk дорівнює ToString(k).
      //   Цей метод неявно застосовується до лівого операнда оператора in
      // б. Нехай kPresent дорівнює результату виклику внутрішнього методу O
      //    HasProperty з аргументом Pk.
      //   Цей крок можна об'єднати з в
      // в. Якщо kPresent дорівнює true, тоді
      if (k in O) {

        // і. Нехай kValue дорівнює результату виклику внутрішнього методу O
        //    Get з аргументом Pk.
        kValue = O[k];

        // ii. Нехай mappedValue дорівнює результату виклику внутрішнього
        //     методу callback Call з T у якості значення this та списком
        //     аргументів, що містить kValue, k та O.
        mappedValue = callback.call(T, kValue, k, O);

        // iii. Викликати внутрішній метод A DefineOwnProperty з аргументами
        // Pk, Property Descriptor
        // { Value: mappedValue,
        //   Writable: true,
        //   Enumerable: true,
        //   Configurable: true },
        // та false.

        // У переглядачах, що підтримують Object.defineProperty, використовуйте:
        // Object.defineProperty(A, k, {
        //   value: mappedValue,
        //   writable: true,
        //   enumerable: true,
        //   configurable: true
        // });

        // Для найкращої підтримки переглядачів, використовуйте:
        A[k] = mappedValue;
      }
      // г. Збільшити k на 1.
      k++;
    }

    // 9. повернути A
    return A;
  };
}
</pre>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Специфікація</th>
   <th scope="col">Статус</th>
   <th scope="col">Коментар</th>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>
    <p>Початкове визначення. Реалізоване в JavaScript 1.6.</p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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

<div class="hidden">
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>

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

<h2 id="Дивіться_також">Дивіться також</h2>

<ul>
 <li>{{jsxref("Array.prototype.forEach()")}}</li>
 <li>Об'єкт {{jsxref("Map")}}</li>
 <li>{{jsxref("Array.from()")}}</li>
</ul>