aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/javascript/guide/indexed_collections/index.html
blob: 96ea922455bd22b2ce7cfbd89a8975bf37761f78 (plain)
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
---
title: Упорядоченные наборы данных
slug: Web/JavaScript/Guide/Indexed_collections
translation_of: Web/JavaScript/Guide/Indexed_collections
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div>

<p class="summary">Данная глава знакомит читателя с массивами - коллекциями элементов, упорядоченных по индексу. Глава включает в себя описание массивов и массивоподобных структур, таких как {{jsxref("Array")}} и {{jsxref("TypedArray")}}.</p>

<h2 id="Array_объект"><code>Array</code> объект</h2>

<p><em>Массив</em> представляется собой упорядоченный набор значений, к которому вы ссылаетесь по имени и индексу. Допустим, у вас есть массив с именем <code>emp,</code> содержащий имена сотрудников и упорядоченный по номеру сотрудников. Следовательно, <code>emp[1]</code> будет представлять собой имя сотрудника номер один, <code>emp[2]</code> -- имя сотрудника номер два, и т.д.</p>

<p>Язык JavaScript не содержит явного типа данных "массив". Тем не менее, возможно использовать предопределенный объект <code>Array</code> и его методы для работы с массивами в создаваемых приложениях. Объект <code>Array</code> содержит методы для работы с массивами самыми различными способами, например, есть методы для объединения,  переворачивания и сортировки. Объект содержит свойство для определения длины массива, а также свойства для работы с регулярными выражениями.</p>

<h3 id="Создание_массива">Создание массива</h3>

<p>Следующие выражения создают одинаковые массивы:</p>

<pre class="brush: js">var arr = new Array(element0, element1, ..., elementN);
var arr = Array(element0, element1, ..., elementN);
var arr = [element0, element1, ..., elementN];
</pre>

<p><code>element0, element1, ..., elementN</code> - список значений элементов массива. Если значения заданы, то эти значения будут являться элементами массива после его инициализации. Свойство <code>length</code> у массива будет равно количеству аргументов.</p>

<p>Синтаксис с использованием квадратных скобок называется "литерал массива" (array literal) или "инициализатор массива". Такая запись короче, чем другие способы создания массива, и, как правило, более предпочтительна. Cм. <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals" title="en-US/docs/JavaScript/Guide/Values, Variables, and Literals#Array Literals">Array literals</a>.</p>

<p>Для создания массива без элементов, но ненулевой длины, возможно использовать одно из следующих выражений:</p>

<pre class="brush: js">var arr = new Array(arrayLength);
var arr = Array(arrayLength);

// Точно такой же эффект
var arr = [];
arr.length = arrayLength;
</pre>

<div class="note">
<p><strong>Замечание</strong>: в примере выше <code>arrayLength</code> должно иметь числовой тип <code>Number</code>. В противном случае будет создан массив с единственным элементом (указанное значение). Вызванная функция <code>arr.length</code> вернет значение <code>arrayLength</code>, но на самом деле массив будет содержать пустые элементы (undefined). Использование цикла<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"> </a> {{jsxref("Statements/for...in","for...in")}} для обработки значений массива не вернет ни одного элемента.</p>
</div>

<p>Массивы могут быть присвоены свойству нового или уже существующего объекта, как показано ниже:</p>

<pre class="brush: js">var obj = {};
// ...
obj.prop = [element0, element1, ..., elementN];

// OR
var obj = {prop: [element0, element1, ...., elementN]}
</pre>

<p>Если вы хотите инициализировать массив одним элементом и этим элементом является число типа Number, то вы должны использовать квадратные скобки. Если вы создаёте массив с помощью Array (конструктора или функции), а единственным элементом этого массива будет число типа Number, то число это интерпретируется как длина массива (arrayLength), а не как элемент типа Number.</p>

<pre class="brush: js">var arr = [42]; // Создаёт массив  с одним элементом
var arr = Array(42); // Создаёт массив без элементов,
                     // но устанавлявает длину массива arr.length в 42

// Это эквивалентно следующему
var arr = [];
arr.length = 42;
</pre>

<p>Вызов Array(N) выбросит RangeError, если N не целое значение, чья дробная часть не ноль. Следующий пример иллюстрирует это.</p>

<pre class="brush: js">var arr = Array(9.3);  // RangeError: Invalid array length
</pre>

<p>Если ваш код нуждается в создании массива с одним элементом произвольного типа данных, то безопасней использовать литеральную запись. Или создайте пустой массив, а затем добавьте необходимый элемент.</p>

<h3 id="Заполнение_массива">Заполнение массива</h3>

<p>Вы можете заполнить массив путём присвоения значений его элементам. Для примера:</p>

<pre class="brush: js">var emp = [];
emp[0] = "Casey Jones";
emp[1] = "Phil Lesh";
emp[2] = "August West";
</pre>

<div class="note">
<p><strong>Замечание:</strong> Если вы используете нецелое значение в операторе [] обращения к элементу массива, то будет создано соответствующее свойство в объекте, представляющем массив, вместо элемента массива (так как массивы в JavaScript являются объектами).</p>
</div>

<pre class="brush: js">var arr = [];
arr[3.4] = "Oranges";
console.log(arr.length);                // 0
console.log(arr.hasOwnProperty(3.4));   // true
</pre>

<p>Вы можете заполнить массив во время создания:</p>

<pre class="brush: js">var myArray = new Array("Hello", myVar, 3.14159);
var myArray = ["Mango", "Apple", "Orange"]
</pre>

<h3 id="Работа_с_элементами_массива">Работа с элементами массива</h3>

<p>Вы можете ссылаться на элементы массива путём использования их порядковых номеров. Для примера, предположим, что вы определили следующий массив:</p>

<pre class="brush: js">var myArray = ["Wind", "Rain", "Fire"];
</pre>

<p>Затем вы сослались на первый элемент массива как myArray[0] и второй элемент массива как myArray[1]. Индексация элементов массива начинается с <strong>нуля</strong>.</p>

<div class="note">
<p><strong>Замечание: </strong>оператор обращения к элементу массива (квадратные скобки []) также используется для доступа к свойствам массива (массивы также являются объектами в JavaScript). Например:</p>
</div>

<pre class="brush: js">var arr = ["one", "two", "three"];
arr[2];  // three
arr["length"];  // Вернёт число 3, так как это свойство - длина массива
</pre>

<h3 id="Понимание_length">Понимание <code>length</code></h3>

<p>На уровне реализации, массивы в JavaScript хранят свои элементы как стандартные свойства объекта, используя индекс в качестве имени свойства. Специальное свойство <code>length</code> всегда возвращает индекс посленего элемента плюс один (в примере ниже, элемент 'Dusty' размещается под индексом 30, по этому cats.length возвращает 30 + 1). Особо следует запомнить, что в JavaScript массивы индексируются с нуля: отсчет ведется с 0, а не с 1. Из этого и следует, что свойство <code><code>length</code></code> всегда на единицу больше, чем наибольший индекс хранящийся в массиве:</p>

<pre class="brush: js">var cats = [];
cats[30] = ['Dusty'];
console.log(cats.length); // 31
</pre>

<p>Также, вы можете задавать значение для <code>length</code>. Установка значения меньшего, чем количество хранящихся в массиве элементов, обрезает массив с конца; установка <code>length</code> равным 0 очищает массив полностью:</p>

<pre class="brush: js">var cats = ['Dusty', 'Misty', 'Twiggy'];
console.log(cats.length); // 3

cats.length = 2;
console.log(cats); // выводит в консоль "Dusty,Misty" - элемент "Twiggy" был удален

cats.length = 0;
console.log(cats); // выводит пустую строку; массив cats пуст

cats.length = 3;
console.log(cats); // выводит [undefined, undefined, undefined]
</pre>

<h3 id="Перебор_содержимого_массивов">Перебор содержимого массивов</h3>

<p>Очень распространенная задача - это перебор всех элементов массива и обработка каждого элемента некоторой операцией. Вот наипростейший способ сделать это:</p>

<pre class="brush: js">var colors = ['red', 'green', 'blue'];
for (var i = 0; i &lt; colors.length; i++) {
  console.log(colors[i]);
}
</pre>

<p>Если вам заранее известно, что ни один элемент массива не будет расценен как <code>false</code> при приведении к boolean — например, каждый элемент массива является <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a> узлом, тогда вы можете блеснуть чуть более эффективным оборотом:</p>

<pre class="brush: js">var divs = document.getElementsByTagName('div');
for (var i = 0, div; div = divs[i]; i++) {
  /* Обработать div некоторой операцией */
}
</pre>

<p>Подход в примере выше, позволяет избежать проверки длинны массива при каждой итерации, и лишь убеждается, что переменной <code>div</code> присвоен существующий текущий элемент массива при каждом прохождении цикла.</p>

<p>Метод {{jsxref("Array.forEach", "forEach()")}} предоставляет другой способ перебора элементов:</p>

<pre class="brush: js">var colors = ['red', 'green', 'blue'];
colors.forEach(function(color) {
  console.log(color);
});
</pre>

<p>Как вариант, вы можете сократить код программы, используя стрелочные функции из ES6:</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> colors <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'red'</span><span class="punctuation token">,</span> <span class="string token">'green'</span><span class="punctuation token">,</span> <span class="string token">'blue'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
colors<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span>color <span class="operator token">=</span><span class="operator token">&gt;</span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>color<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// red</span>
<span class="comment token">// green</span>
<span class="comment token">// blue</span></code></pre>

<p>Функция, переданная в метод <code>forEach</code>, будет выполнена по одному разу для каждого элемента массива, при этом сам элемент массива будет передан как аргумент в эту функцию. Элементы, значения которым не присвоены, не обрабатываются <code>forEach</code> циклом.</p>

<p>Заметьте, что элементы, пропущенные при создании массива не обрабатываются методом <code>forEach</code>, однако, <code>undefined</code> элемент обрабатывается в том случае, когда он присвоен ячейке массива вручную:</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> array <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'first'</span><span class="punctuation token">,</span> <span class="string token">'second'</span><span class="punctuation token">,</span> <span class="punctuation token">,</span> <span class="string token">'fourth'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>

array<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>element<span class="punctuation token">)</span> <span class="punctuation token">{</span>
  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>element<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// first</span>
<span class="comment token">// second</span>
<span class="comment token">// fourth</span>

<span class="keyword token">if</span> <span class="punctuation token">(</span>array<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span> <span class="operator token">===</span> undefined<span class="punctuation token">)</span> <span class="punctuation token">{</span>
  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'array[2] is undefined'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span>
<span class="punctuation token">}</span>

array <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'first'</span><span class="punctuation token">,</span> <span class="string token">'second'</span><span class="punctuation token">,</span> undefined<span class="punctuation token">,</span> <span class="string token">'fourth'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>

array<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>element<span class="punctuation token">)</span> <span class="punctuation token">{</span>
  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>element<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// first</span>
<span class="comment token">// second</span>
<span class="comment token">// undefined</span>
<span class="comment token">// fourth</span></code></pre>

<p>Так как в JavaScript элементы массива хранятся как обычные свойства объекта, использование  {{jsxref("Statements/for...in","for...in")}} циклов для перебора элементов массива нежелательно, потому что будут обработаны не только элементы массива, но и все перечисляемые свойства массива.</p>

<h3 id="Методы_Array">Методы Array</h3>

<p>Объект {{jsxref("Array")}} имеет следующие методы:</p>

<p>{{jsxref("Array.concat", "concat()")}} объединяет два массива и возвращает новый массив.</p>

<pre>var myArray = new Array("1", "2", "3");
myArray = myArray.concat("a", "b", "c");
// myArray = ["1", "2", "3", "a", "b", "c"]
</pre>

<p>{{jsxref("Array.join", "join(deliminator = ',')")}} объединяет элементы массива в текстовую строку.</p>

<pre>var myArray = new Array("Wind", "Rain", "Fire");
var list = myArray.join(" - "); // list = "Wind - Rain - Fire"
</pre>

<p>{{jsxref("Array.push", "push()")}} добавляет один или несколько элементов в конец массива и возвращает результирующую длину.</p>

<pre>var myArray = new Array("1", "2");
myArray.push("3"); // myArray =["1", "2", "3"]
</pre>

<p>{{jsxref("Array.pop", "pop()")}} удаляет из массива последний элемент и возвращает его.</p>

<pre>var myArray = new Array("1", "2", "3");
var last = myArray.pop();
// myArray =["1", "2"], last = "3"
</pre>

<p>{{jsxref("Array.shift", "shift()")}} удаляет из массива первый элемент и возвращает его.</p>

<pre>var myArray = new Array ("1", "2", "3");
var first = myArray.shift();
// myArray = ["2", "3"], first = "1"
</pre>

<p>{{jsxref("Array.shift", "unshift()")}} добавляет один или несколько элементов в начало массива и возвращает его новую длинну.</p>

<pre class="brush: js">var myArray = new Array ("1", "2", "3");
myArray.unshift("4", "5");
// myArray becomes ["4", "5", "1", "2", "3"]</pre>

<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}} возвращает секцию массива как новый массив.</p>

<pre class="brush: js">var myArray = new Array ("a", "b", "c", "d", "e");
myArray = myArray.slice(1, 4); // начиная с индекса 1 извлекаются элементы вплоть до индекса 3
                               // myArray = [ "b", "c", "d"]
</pre>

<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}} удаляет часть элементов из массива и (опционально) заменяет их. Возвращает удалённые элементы.</p>

<pre class="brush: js">var myArray = new Array ("1", "2", "3", "4", "5");
myArray.splice(1, 3, "a", "b", "c", "d");
// myArray = ["1", "a", "b", "c", "d", "5"]
// Этот код, начиная с ячейки под индексом 1 (в которой находилось значение "2"),
// удаляет 3 элемента, и вставляет на их место
// элеметны, переданные в качестве последующих параметров.
</pre>

<p>{{jsxref("Array.reverse", "reverse()")}} переставляет элементы массива в обратном порядке: первый элемент становится последним, а последний - первым.</p>

<pre class="brush: js">var myArray = new Array ("1", "2", "3");
myArray.reverse();
// элементы переставлены myArray = [ "3", "2", "1" ]
</pre>

<p>{{jsxref("Array.sort", "sort()")}} сортирует элементы массива.</p>

<pre class="brush: js">var myArray = new Array("Wind", "Rain", "Fire");
myArray.sort();
// массив отсортирован myArray = [ "Fire", "Rain", "Wind" ]
</pre>

<p><code>Метод sort()</code> может принимать в качестве аргумента <code>callback</code>-функцию, которая определяет каким образом сравнивать элементы массива при сортировке. Функция сравнивает два значения, и возвращает одно из трех значений (список вариантов значений смотрите после примера):</p>

<p>Пример. Следующий код сортирует массив по последнему символу в строке:</p>

<pre class="brush: js">var sortFn = function(a, b){
  if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
  if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
  if (a[a.length - 1] == b[b.length - 1]) return 0;
}
myArray.sort(sortFn);
// массив отсортирован myArray = ["Wind","Fire","Rain"]</pre>

<ul>
 <li>если <code>a</code> меньше чем <code>b</code> в выбранной системе сравнения, возвращаем <em>-1 (или любое отрицательное число)</em></li>
 <li>если <code>a</code> больше чем <code>b</code> в выбранной системе сравнения, возвращаем <em>1 (или любое положительное число)</em></li>
 <li>если <code>a</code> и <code>b</code> считаются равными, возвращаем <em>0</em>.</li>
</ul>

<p>{{jsxref("Array.indexOf", "indexOf(searchElement[, fromIndex])")}} ищет в массиве элемент со значением <code>searchElement</code> и возвращает индекс первого совпадения.</p>

<pre class="brush: js">var a = ['a', 'b', 'a', 'b', 'a'];
console.log(a.indexOf('b')); // выводит 1
// Попробуем еще раз, начиная с индекса последнего совпадения
console.log(a.indexOf('b', 2)); // выводит 3
console.log(a.indexOf('z')); // выводит -1, потому что 'z' не найдено
</pre>

<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} тоже самое, что и <code>indexOf</code>, но поиск ведется в обратном порядке, с конца массива.</p>

<pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'a', 'b'];
console.log(a.lastIndexOf('b')); // выводит 5
// Попробуем еще раз, начиная с индекса, предшествующего индексу последнего совпадения
console.log(a.lastIndexOf('b', 4)); // выводит 1
console.log(a.lastIndexOf('z')); // выводит -1
</pre>

<p>{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}} выполняет <code>callback</code>-функцию по каждому элементу массива.</p>

<pre class="brush: js">var a = ['a', 'b', 'c'];
a.forEach(function(element) { console.log(element);} );
// выводит в консоль каждый элемент массива по порядку
</pre>

<p>{{jsxref("Array.map", "map(callback[, thisObject])")}} возвращает новый массив, содержащий результаты вызова <code>callback</code>-функции для каждого элемента исходного массива.</p>

<pre class="brush: js">var a1 = ['a', 'b', 'c'];
var a2 = a1.map(function(item) { return item.toUpperCase(); });
console.log(a2); // выводит A,B,C
</pre>

<p>{{jsxref("Array.filter", "filter(callback[, thisObject])")}} возвращает новый массив, содержащийт только те элементы исходного массива, для которых вызов <code>callback</code>-функции вернул true.</p>

<pre class="brush: js">var a1 = ['a', 10, 'b', 20, 'c', 30];
var a2 = a1.filter(function(item) { return typeof item == 'number'; });
console.log(a2); // выводит 10,20,30
</pre>

<p>{{jsxref("Array.every", "every(callback[, thisObject])")}} возвращает true, если вызов <code>callback</code>-функции вернул  true для всех элементов массива.</p>

<pre class="brush: js">function isNumber(value){
  return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.every(isNumber)); // выводит true
var a2 = [1, '2', 3];
console.log(a2.every(isNumber)); // выводит false
</pre>

<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} возвращает true, если вызов <code>callback</code>-функции вернет true хотя бы для одного элемента.</p>

<pre class="brush: js">function isNumber(value){
  return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.some(isNumber)); // выводит true
var a2 = [1, '2', 3];
console.log(a2.some(isNumber)); // выводит true
var a3 = ['1', '2', '3'];
console.log(a3.some(isNumber)); // выводит false
</pre>

<p>Те из методов выше, что принимают <code>callback</code>-функцию в качестве аргумента, известны как методы итерации (<em>iterative methods)</em>, потому что определенным образом проходятся по всем элементам массива. Каждый из таких методов принимает второй, опциональный элемент, называемый <code>thisObject</code>. Если этот аргумент присутствует, то его значение присваивается ключевому слову <code>this</code> в теле <code>callback</code>-функции. Иначе, как и в любом другом случае вызова функции вне явного контекста, <code>this</code> будет ссылаться на глобальный объект ({{domxref("window")}}).</p>

<p>В действительности <code>callback</code>-функция вызывается с тремя аргументами. Первый аргумент - текущий элемен массива, второй - индекс этого элемента, и третий - ссылка на сам массив. Однако, в JavaScript, функции игнорируют любые аргументы, которые не перечислены в списке аргументов. Таким образом, нет ничего страшного в использовании функции с одним аргументом, такой как <code>alert</code>.</p>

<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}} последовательно применяет <code>callback</code>-функцию <code>callback(firstValue, secondValue)</code> для того, чтобы свести все элементы массива к одному значению. В первый параметр функции передаётся предыдущий результат работы функции или первый элемент, а во второй - текущий элемент. Третьим параметром передаётся индекс текущего элемента.</p>

<pre class="brush: js">var a = [10, 20, 30];
var total = a.reduce(function(first, second, index) { return first + second; }, 0);
console.log(total) // выводит 60
</pre>

<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initalvalue])")}} работает так же как и <code>reduce()</code>, но порядок обхода ведется от конца к началу.</p>

<p><code>Методы reduce</code> и <code>reduceRight</code> являются наименее очевидными методами объекта Array. Они должны использоваться в алгоритмах, которые рекурсивно совмещают два элемента массива, для сведения всей последовательности к одному значению.</p>

<h3 id="Многомерные_массивы">Многомерные массивы</h3>

<p>Массивы могут быть вложенными, то есть массив может содержать массивы в элементах. Используя эту возможность массивов JavaScript, можно построить многомерные массивы.</p>

<p>Следующий код создает двумерный массив:</p>

<pre class="brush: js">var a = new Array(4);
for (i = 0; i &lt; 4; i++) {
  a[i] = new Array(4);
  for (j = 0; j &lt; 4; j++) {
    a[i][j] = "[" + i + "," + j + "]";
  }
}
</pre>

<p>В этом примере создается массив со следующим содержимым:</p>

<pre>Ряд 0: [0,0] [0,1] [0,2] [0,3]
Ряд 1: [1,0] [1,1] [1,2] [1,3]
Ряд 2: [2,0] [2,1] [2,2] [2,3]
Ряд 3: [3,0] [3,1] [3,2] [3,3]
</pre>

<h3 id="Массивы_и_регулярные_выражения">Массивы и регулярные выражения</h3>

<p>Когда массив является результатом вычислений регулярного выражения над строкой, он содержит свойтсва и элементы с информацией о совпадениях. Массив возвращается функциями  {{jsxref("Global_Objects/RegExp/exec","RegExp.exec()")}}, {{jsxref("Global_Objects/String/match","String.match()")}} и  {{jsxref("Global_Objects/String/split","String.split()")}} Подробнее о том, как использовать массивы с регулярными выражениями смотрите в <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="en-US/docs/JavaScript/Guide/Regular Expressions">Regular Expressions</a>.</p>

<h3 id="Работа_с_массивоподобными_объектами">Работа с массивоподобными объектами</h3>

<p>Некоторые объекты в JavaScript, такие как {{domxref("NodeList")}}, возвращаемые методом {{domxref("document.getElementsByTagName()")}}, или специальный объект  {{jsxref("Functions/arguments","arguments")}}, доступный внутри функции, выглядят и ведут себя как обычные массивы, однако не имеет всех присущих массиву методов. Так например, объект <code>arguments</code> имеет свойство {{jsxref("Global_Objects/Function/length","length")}}, но не имеет метода {{jsxref("Array.forEach", "forEach()")}}.</p>

<p>Методы из прототипа Array, могут быть вызваны для массивоподобных объектов. Например:</p>

<pre><code>function printArguments() {
  Array.prototype.forEach.call(arguments, function(item) {
    console.log(item);
  });
}</code></pre>

<p>Также методы из прототипа Array могут быть применены и к строкам, потому как строки предоставляют доступ к своим символам сходным образом:</p>

<pre class="brush: js"><code>Array.prototype.forEach.call</code>("a string", function(chr) {
  console.log(chr);
});</pre>

<h2 id="Типизированные_массивы">Типизированные массивы</h2>

<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> (типизированные массивы) являются массивоподобными объектами, которые предоставляют механизм доступа к сырым бинарным данным. Как вы уже знаете, {{jsxref("Array")}} массивы динамически растут, сокращаются и могут содержать значения любых типов JavaScript. Движки JavaScript производят оптимизации, благодаря чему, эти операции происходят быстро. Однако, веб приложения становятся все более мощными, добавляются возможности манипуляции со звуковыми и видеоданными, доступ к сырым данным <a href="/en-US/docs/WebSockets">WebSockets</a>, и тому подобное. Становится очевидным, что возможность быстрой и эффективной работы с двоичными данными в JavaScript будет очень полезной. Для чего типизированные массивы и предназначены.</p>

<h3 id="Буферы_и_представления_архитектура_типизированных_массивов">Буферы и представления: архитектура типизированных массивов</h3>

<p>Для достижения максимальной гибкости и производительности, реализация типизированных массивов в JavaScript разделена на <strong>буферы</strong> и <strong>представления</strong>. Буфер ({{jsxref("ArrayBuffer")}}) это объект, представляющий из себя блок данных; он не имеет формата и не предоставляет возможности доступа к своему содержимому. Для доступа к памяти буфера вам нужно использовать представление. Представление являет собой контекст, имеющий тип данных, начальную позицию в буфере, и количество элементов — это позволяет представить данные в виде актуального типизированного массива.</p>

<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>

<h3 id="ArrayBuffer">ArrayBuffer</h3>

<p>Объект {{jsxref("ArrayBuffer")}} это стандартный набор бинарных данных с фиксированной длиной. Вы не можете манипулировать содержимым <code>ArrayBuffer</code> напрямую. Вместо этого необходимо создать типизированное представление {{jsxref("DataView")}}, которое будет отображать буфер в определенном формате, и даст доступ на запись и чтение его содержимого.</p>

<h3 id="Типизированные_представления">Типизированные представления</h3>

<p>Название типизированного представления массива говорит само за себя. Оно представляет массив в распространенных числовых форматах, таких как  <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> и так далее. Среди прочих существует специальное представление <code>Uint8ClampedArray</code>. Оно ограничивает значения интервалом от 0 до 255. Это полезно, например, при <a href="/en-US/docs/Web/API/ImageData">Обработке данных изображения в Canvas</a>.</p>

<p>{{page("en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects")}}</p>

<p>Для получения подробных сведений смотрите <a href="/en-US/docs/Web/JavaScript/Typed_arrays">Типизированные массивы JavaScript</a> и справочную документацию для  {{jsxref("TypedArray")}}.</p>

<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</p>