1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
---
title: Array.prototype.map()
slug: Web/JavaScript/Reference/Global_Objects/Array/map
tags:
- Array
- ECMAScript5
- JavaScript
- JavaScript 1.6
- Method
- Prototype
- Reference
- Référence(2)
- polyfill
translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
---
<div>{{JSRef("Global_Objects", "Array")}}</div>
<h2 id="Summary">Сводка</h2>
<p>Метод <code><strong>map()</strong></code> создаёт новый массив с результатом вызова указанной функции для каждого элемента массива.</p>
<h2 id="Syntax">Синтаксис</h2>
<pre class="syntaxbox">const <var>new_array</var> = <var>arr</var>.map(function <var>callback</var>( <var>currentValue</var>[, <var>index</var>[, <var>array</var>]]) {
// Возвращает элемент для new_array
}[, <var>thisArg</var>])</pre>
<h3 id="Parameters">Параметры</h3>
<dl>
<dt><code><var>callback</var></code></dt>
<dd>
<p>Функция, вызываемая для каждого элемента массива <code><var>arr</var></code>. Каждый раз, когда <code><var>callback</var></code> выполняется, возвращаемое значение добавляется в <code><var>new_array</var></code>.</p>
<p>Функция <code><var>callback</var></code>, создающая элемент в новом массиве, принимает три аргумента:</p>
<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>Массив, по которому осуществляется проход.</dd>
</dl>
</dd>
<dt><code>thisArg</code>{{optional_inline}}</dt>
<dd>Необязательный параметр. Значение, используемое в качестве <code>this</code> при вызове функции <code><var>callback</var></code></dd>
</dl>
<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
<p>Новый массив, где каждый элемент является результатом <code>callback</code> функции.</p>
<h2 id="Description">Описание</h2>
<p>Метод <code>map</code> вызывает переданную функцию <code>callback</code> один раз для каждого элемента, в порядке их появления и конструирует новый массив из результатов её вызова. Функция <code>callback</code> вызывается только для индексов массива, имеющих присвоенные значения, включая {{jsxref("Global_Objects/undefined", "undefined")}}. Она не вызывается для пропущенных элементов массива (то есть для индексов, которые никогда не были заданы, которые были удалены или которым никогда не было присвоено значение.</p>
<p>Функция <code>callback</code> вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.</p>
<p>Если в метод <code>map</code> был передан параметр <code>thisArg</code>, при вызове <code>callback</code> он будет использоваться в качестве значения <code>this</code>. В противном случае в качестве значения <code>this</code> будет использоваться значение {{jsxref("Global_Objects/undefined", "undefined")}}. В конечном итоге, значение <code>this</code>, наблюдаемое из функции <code>callback</code>, определяется согласно <a href="/ru/docs/Web/JavaScript/Reference/Operators/this">обычным правилам определения <code>this</code>, видимого из функции</a>.</p>
<p>Метод <code>map</code> не изменяет массив, для которого он был вызван (хотя функция <code>callback</code> может это делать).</p>
<p>Диапазон элементов, обрабатываемых методом <code>map</code>, устанавливается до первого вызова функции <code>callback</code>. Элементы, добавленные в массив после начала выполнения метода <code>map</code>, не будут посещены функцией <code>callback</code>. Если существующие элементы массива изменяются функцией <code>callback</code>, их значения, переданные в функцию, будут значениями на тот момент времени, когда метод <code>map</code> посетит их; удалённые элементы посещены не будут.</p>
<h2 id="Examples">Примеры</h2>
<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Пример: отображение массива чисел на массив квадратных корней</h3>
<p>Следующий код берёт массив чисел и создаёт новый массив, содержащий квадратные корни чисел из первого массива.</p>
<pre class="brush: js">
const numbers = [1, 4, 9];
const roots = numbers.map(Math.sqrt);
// теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9]
</pre>
<h3 id="Example_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Пример: отображение массива чисел с использованием функции, содержащей аргумент</h3>
<p>Следующий код показывает, как работает отображение, когда функция требует один аргумент. Аргумент будет автоматически присваиваться каждому элементу массива, когда <code>map</code> проходит по оригинальному массиву.</p>
<pre class="brush: js">
const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);
// теперь doubles равен [2, 8, 18], а numbers всё ещё равен [1, 4, 9]
</pre>
<h3 id="Example_using_map_generically">Пример: обобщённое использование <code>map</code></h3>
<p>Этот пример показывает, как использовать <code>map</code> на объекте строки {{jsxref("Global_Objects/String", "String")}} для получения массива байт в кодировке ASCII, представляющего значения символов:</p>
<pre class="brush: js">
const map = Array.prototype.map;
const charCodes = map.call('Hello World', (x) => x.charCodeAt(0));
// теперь charCodes равен [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
</pre>
<h3 id="Example_using_map_generically_querySelectorAll">Пример: обобщённое использование <code>map</code> вместе с <code>querySelectorAll</code></h3>
<p>Этот пример показывает, как пройтись по коллекции объектов, собранных с помощью <code>querySelectorAll</code>. В данном случае мы получаем все выбранные опции на экране и печатаем их в консоль:</p>
<pre class="brush: js">
const elems = document.querySelectorAll('select option:checked');
const values = Array.prototype.map.call(elems, ({ value }) => value);
</pre>
<p>Более простым способом будет использование метода {{jsxref("Array.from()")}}.</p>
<h3 id="Example_Using_map_to_reverse_a_string">Пример: использование <code>map</code> для переворачивания строки</h3>
<pre class="brush: js">
const string = '12345';
const reversed = Array.prototype.map.call(string, (x) => x).reverse().join('');
// reversed равен '54321'
// Бонус: используйте '===' для проверки того, является ли строка палиндромом
</pre>
<p>Более простым способом будет использование метода {{jsxref("String.split()")}} (см. пример <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/split#Example:_Reversing_a_String_using_split">обращение строки при помощи метода split()</a>).</p>
<h3 id="Example_Tricky_use_case">Пример: хитрый вариант использования</h3>
<p><a href="http://www.wirfs-brock.com/allen/posts/166">(навеяно этой записью в блоге)</a></p>
<p>Распространённой практикой является использование колбэк-функции с одним аргументом (элемент, над которым производится операция). Некоторые функции также широко используется с одним аргументом, хотя они принимают дополнительные необязательные аргументы. Эти привычки могут привести к неожиданному поведению программы.</p>
<pre class="brush: js">// Рассмотрим пример:
['1', '2', '3'].map(parseInt);
// Хотя ожидаемый результат вызова равен [1, 2, 3],
// в действительности получаем [1, NaN, NaN]
// Функция parseInt часто используется с одним аргументом, но она принимает два.
// Первый аргумент является выражением, а второй - основанием системы счисления.
// В функцию callback Array.prototype.map передаёт 3 аргумента:
// элемент, его индекс и сам массив.
// Третий аргумент игнорируется parseInt, но не второй, следовательно,
// возможна путаница. Смотрите запись в блоге для дополнительной информации.
const returnInt = (element) => parseInt(element, 10);
['1', '2', '3'].map(returnInt);
// Результатом является массив чисел (как и ожидалось)
// Простейший способ добиться вышеозначенного поведения и избежать чувства "чё за!?":
['1', '2', '3'].map(Number); // [1, 2, 3]
</pre>
<h2 id="Specifications">Спецификации</h2>
{{Specifications}}
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div>
<p>{{Compat}}</p>
</div>
<h2 id="See_also">Смотрите также</h2>
<ul>
<li><a href="https://github.com/zloirock/core-js#ecmascript-array">Polyfill of Array.prototype.map in core-js</a></li>
<li>{{jsxref("Array.prototype.forEach()")}}</li>
<li>объект {{jsxref("Map")}}</li>
<li>{{jsxref("Array.from()")}}</li>
</ul>
|
