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
|
---
title: Array
slug: Web/JavaScript/Reference/Global_Objects/Array
tags:
- Array
- JavaScript
- Reference
- Глобальные объекты
translation_of: Web/JavaScript/Reference/Global_Objects/Array
---
<div>{{JSRef("Global_Objects", "Array")}}</div>
<div> </div>
<p>Массив (<strong><code>Array</code></strong>) в JavaScript является глобальным объектом, который используется для создания массивов; которые представляют собой высокоуровневые спископодобные объекты.</p>
<p><strong>Создание массива</strong></p>
<pre class="brush: js">var fruits = ['Яблоко', 'Банан'];
console.log(fruits.length);
// 2
</pre>
<p><strong>Доступ к элементу массива по индексу</strong></p>
<pre class="brush: js">var first = fruits[0];
// Яблоко
var last = fruits[fruits.length - 1];
// Банан
</pre>
<p><strong>Итерирование по массиву</strong></p>
<pre class="brush: js">fruits.forEach(function(item, index, array) {
console.log(item, index);
});
// Яблоко 0
// Банан 1
</pre>
<p><strong>Добавление элемента в конец массива</strong></p>
<pre class="brush: js">var newLength = fruits.push('Апельсин');
// ["Яблоко", "Банан", "Апельсин"]
</pre>
<p><strong>Удаление последнего элемента массива</strong></p>
<pre class="brush: js">var last = fruits.pop(); // удалим Апельсин (из конца)
// ["Яблоко", "Банан"];
</pre>
<p><strong>Удаление первого элемента массива</strong></p>
<pre class="brush: js">var first = fruits.shift(); // удалим Яблоко (из начала)
// ["Банан"];
</pre>
<p><strong>Добавление элемента в начало массива</strong></p>
<pre class="brush: js">var newLength = fruits.unshift('Клубника') // добавляет в начало
// ["Клубника", "Банан"];
</pre>
<p><strong>Поиск номера элемента в массиве</strong></p>
<pre class="brush: js">fruits.push('Манго');
// ["Клубника", "Банан", "Манго"]
var pos = fruits.indexOf('Банан');
// 1
</pre>
<p><strong>Удаление элемента с определённым индексом</strong></p>
<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // так можно удалить элемент
// ["Клубника", "Манго"]</pre>
<p><strong>Удаление нескольких элементов, начиная с определённого индекса</strong></p>
<pre class="brush: js">var vegetables = ['Капуста', 'Репа', 'Редиска', 'Морковка'];
console.log(vegetables);
// ["Капуста", "Репа", "Редиска", "Морковка"]
var pos = 1, n = 2;
var removedItems = vegetables.splice(pos, n);
// так можно удалить элементы, n определяет количество элементов для удаления,
// начиная с позиции(pos) и далее в направлении конца массива.
console.log(vegetables);
// ["Капуста", "Морковка"] (исходный массив изменён)
console.log(removedItems);
// ["Репа", "Редиска"]</pre>
<p><strong>Создание копии массива</strong></p>
<pre class="brush: js">var shallowCopy = fruits.slice(); // так можно создать копию массива
// ["Клубника", "Манго"]
</pre>
<h2 id="Syntax">Синтаксис</h2>
<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
new Array(<var>arrayLength</var>)</code></pre>
<dl>
<dt><code>element<em>N</em></code></dt>
<dd>Массив в JavaScript инициализируется с помощью переданных элементов, за исключением случая, когда в конструктор <code>Array</code> передаётся один аргумент и этот аргумент является числом (см. ниже). Стоит обратить внимание, что этот особый случай применяется только к JavaScript-массивам, создаваемым с помощью конструктора <code>Array</code>, а не к литеральным массивам, создаваемым с использованием скобочного синтаксиса.</dd>
<dt><code>arrayLength</code></dt>
<dd>Если конструктору <code>Array</code> передаётся единственный аргумент, являющийся целым числом в диапазоне от 0 до 2<sup>32</sup>-1 (включительно), будет возвращён новый пустой JavaScript-массив, длина которого установится в это число (<strong>примечание</strong>: это означает массив, содержащий <code>arrayLength</code> пустых ячеек, а не ячеек со значениями <code>undefined</code>). Если аргументом будет любое другое число, возникнет исключение {{jsxref("Global_Objects/RangeError", "RangeError")}}.</dd>
</dl>
<h2 id="Description">Описание</h2>
<p>Массивы являются спископодобными объектами, чьи прототипы содержат методы для операций обхода и изменения массива. Ни размер JavaScript-массива, ни типы его элементов не являются фиксированными. Поскольку размер массива может увеличиваться и уменьшаться в любое время, то нет гарантии, что массив окажется плотным. То есть, при работе с массивом может возникнуть ситуация, что элемент массива, к которому вы обратитесь, будет пустым и вернёт <code>undefined</code>. В целом, это удобная характеристика; но если эта особенность массива не желательна в вашем специфическом случае, вы можете рассмотреть возможность использования типизированных массивов.</p>
<p>Некоторые полагают, что <a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">вы не должны использовать массив в качестве ассоциативного массива</a>. В любом случае, вместо него вы можете использовать простые {{jsxref("Global_Objects/Object", "объекты")}}, хотя у них есть и свои подводные камни. Смотрите пост <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">Легковесные JavaScript-словари с произвольными ключами</a><em>(англ.)</em> в качестве примера.</p>
<h3 id="Accessing_array_elements">Доступ к элементам массива</h3>
<p>Массивы в JavaScript индексируются с нуля: первый элемент массива имеет индекс, равный <code>0</code>, а индекс последнего элемента равен значению свойства массива {{jsxref("Array.length", "length")}} минус 1.</p>
<pre class="brush: js">var arr = ['первый элемент', 'второй элемент', 'последний элемент'];
console.log(arr[0]); // напечатает 'первый элемент'
console.log(arr[1]); // напечатает 'второй элемент'
console.log(arr[arr.length - 1]); // напечатает 'последний элемент'
</pre>
<p>Элементы массива являются свойствами, точно такими же, как, например, свойство <code>toString</code>, однако попытка получить элемент массива по имени его свойства приведёт к синтаксической ошибке, поскольку имя свойства не является допустимым именем JavaScript:</p>
<pre class="brush: js">console.log(arr.0); // синтаксическая ошибка
</pre>
<p>Это не особенность массивов или их свойств. В JavaScript к свойствам, начинающимся с цифры, невозможно обратиться посредством точечной нотации; к ним можно обратиться только с помощью скобочной нотации. Например, если у вас есть объект со свойством, названным <code>'3d'</code>, вы сможете обратиться к нему только посредством скобочной нотации. Примеры:</p>
<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0); // синтаксическая ошибка
console.log(years[0]); // работает как положено
</pre>
<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // синтаксическая ошибка
renderer['3d'].setTexture(model, 'character.png'); // работает как положено
</pre>
<p>Обратите внимание, что во втором примере <code>3d</code> заключено в кавычки: <code>'3d'</code>. Индексы можно заключать в кавычки (например <code>years['2']</code> вместо <code>years[2]</code>), но в этом нет необходимости. Значение 2 в выражении <code>years[2]</code> будет неявно приведено к строке движком JavaScript через метод преобразования <code>toString</code>. Именно по этой причине ключи <code>'2'</code> и <code>'02'</code> будут ссылаться на два разных элемента в объекте <code>years</code> и следующий пример выведет <code>true</code>:</p>
<pre class="brush: js">console.log(years['2'] != years['02']);
</pre>
<p>Аналогично, к свойствам объекта, являющимся зарезервированными словами(!) можно получить доступ только посредством скобочной нотации:</p>
<pre class="brush: js">var promise = {
'var' : 'text',
'array': [1, 2, 3, 4]
};
console.log(promise['array']);
</pre>
<h3 id="Relationship_between_length_and_numerical_properties">Взаимосвязь свойства <code>length</code> с числовыми свойствами</h3>
<p>Свойство массивов {{jsxref("Array.length", "length")}} взаимосвязано с числовыми свойствами. Некоторые встроенные методы массива (например, {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}} и т.д.) учитывают значение свойства <code>length</code> при своём вызове. Другие методы (например, {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}} и т.д.) в результате своей работы также обновляют свойство <code>length</code> массива.</p>
<pre class="brush: js">var fruits = [];
fruits.push('банан', 'яблоко', 'персик');
console.log(fruits.length); // 3
</pre>
<p>При установке свойства в массиве, если свойство имеет действительный индекс и этот индекс выходит за пределы текущих границ массива, движок соответствующим образом обновит свойство {{jsxref("Array.length", "length")}}:</p>
<pre class="brush: js">fruits[5] = 'манго';
console.log(fruits[5]); // 'манго'
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 6
</pre>
<p>Увеличиваем свойство <code>length</code></p>
<pre class="brush: js">fruits.length = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10
</pre>
<p>Однако, уменьшение свойства {{jsxref("Array.length", "length")}} приведёт к удалению элементов.</p>
<pre class="brush: js">fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2
</pre>
<p>Более подробно эта тема освещена на странице, посвящённой свойству {{jsxref("Array.length")}}.</p>
<h3 id="Creating_an_array_using_the_result_of_a_match">Создание массива с использованием результата сопоставления</h3>
<p>Результатом сопоставления регулярного выражения строке является JavaScript-массив. Этот массив имеет свойства и элементы, предоставляющие информацию о сопоставлении. Подобные массивы возвращаются методами {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}} и {{jsxref("String.replace")}}. Чтобы было проще понять, откуда и какие появились свойства и элементы, посмотрите следующий пример и обратитесь к таблице ниже:</p>
<pre class="brush: js">// Сопоставляется с одним символом d, за которым следует один
// или более символов b, за которыми следует один символ d
// Запоминаются сопоставившиеся символы b и следующий за ними символ d
// Регистр игнорируется
var myRe = /d(b+)(d)/i;
var myArray = myRe.exec('cdbBdbsbz');
</pre>
<p>Свойства и элементы, возвращаемые из данного сопоставления, описаны ниже:</p>
<table class="fullwidth-table">
<tbody>
<tr>
<td class="header">Свойство/Элемент</td>
<td class="header">Описание</td>
<td class="header">Пример</td>
</tr>
<tr>
<td><code>input</code></td>
<td>Свойство только для чтения, отражающее оригинальную строку, с которой сопоставлялось регулярное выражение.</td>
<td>cdbBdbsbz</td>
</tr>
<tr>
<td><code>index</code></td>
<td>Свойство только для чтения, являющееся индексом (отсчёт начинается с нуля) в строке, с которого началось сопоставление.</td>
<td>1</td>
</tr>
<tr>
<td><code>[0]</code></td>
<td>Элемент только для чтения, определяющий последние сопоставившиеся символы.</td>
<td>dbBd</td>
</tr>
<tr>
<td><code>[1], ...[n]</code></td>
<td>Элементы только для чтения, определяющие сопоставившиеся подстроки, заключённые в круглые скобки, если те включены в регулярное выражение. Количество возможных подстрок не ограничено.</td>
<td>[1]: bB<br>
[2]: d</td>
</tr>
</tbody>
</table>
<h2 id="Properties">Свойства</h2>
<dl>
<dt>{{jsxref("Array.length")}}</dt>
<dd>Значение свойства <code>length</code> конструктора массива равно 1.</dd>
<dt>{{jsxref("Array.prototype")}}</dt>
<dd>Позволяет добавлять свойства ко всем объектам массива.</dd>
</dl>
<h2 id="Methods">Методы</h2>
<dl>
<dt>{{jsxref("Array.from()")}} {{experimental_inline}}</dt>
<dd>Создаёт новый экземпляр <code>Array</code> из массивоподобного или итерируемого объекта.</dd>
<dt>{{jsxref("Array.isArray()")}}</dt>
<dd>Возвращает <code>true</code>, если значение является массивом, иначе возвращает <code>false</code>.</dd>
<dt>{{jsxref("Array.observe()")}} {{experimental_inline}}</dt>
<dd>Асинхронно наблюдает за изменениями в массиве, подобно методу {{jsxref("Object.observe()")}} для объектов. Метод предоставляет поток изменений в порядке их возникновения.</dd>
<dt>{{jsxref("Array.of()")}} {{experimental_inline}}</dt>
<dd>Создаёт новый экземпляр <code>Array</code> из любого количества аргументов, независимо от их количества или типа.</dd>
</dl>
<h2 id="Array_instances">Экземпляры массива</h2>
<p>Все экземпляры массива наследуются от {{jsxref("Array.prototype")}}. Изменения в объекте прототипа конструктора массива затронет все экземпляры <code>Array</code>.</p>
<h3 id="Methods_of_array_instances">Свойства</h3>
<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div>
<h3 id="Methods_of_array_instances">Методы</h3>
<h4 id="Mutator_methods">Методы изменения</h4>
<div>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div>
<h4 id="Accessor_methods">Методы доступа</h4>
<div>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div>
<h4 id="Iteration_methods">Методы обхода</h4>
<div>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div>
<h2 id="Array_generic_methods">Общие методы массива</h2>
<p>Иногда хочется применить методы массива к строкам или другим массивоподобным объектам (например, к {{jsxref("Functions_and_function_scope/arguments", "аргументам", "", 1)}} функции). Делая это, вы трактуете строку как массив символов (другими словами, рассматриваете не-массив в качестве массива). Например, в порядке проверки каждого символа в переменной <var>str</var> на то, что он является буквой (латинского алфавита), вы пишете следующий код:</p>
<pre class="brush: js">function isLetter(character) {
return character >= 'a' && character <= 'z';
}
if (Array.prototype.every.call(str, isLetter)) {
console.log("Строка '" + str + "' содержит только (латинские) буквы!");
}
</pre>
<p>Эта запись довольно расточительна и в JavaScript 1.6 введён общий сокращённый вид:</p>
<pre class="brush: js">if (Array.every(str, isLetter)) {
console.log("Строка '" + str + "' содержит только (латинские) буквы!");
}
</pre>
<p>{{jsxref("Global_Objects/String", "Общие методы", "#String_generic_methods", 1)}} также доступны для объекта {{jsxref("Global_Objects/String", "String")}}.</p>
<p>В настоящее время они не являются частью стандартов ECMAScript (хотя в ES2015 для достижения поставленной цели можно использовать <a href="https://github.com/monolithed/ECMAScript-6"><code>Array.from()</code></a>). Следующая прослойка позволяет использовать их во всех браузерах:</p>
<pre class="brush: js">// Предполагаем, что дополнения массива уже присутствуют (для них так же можно использовать polyfill'ы)
(function() {
'use strict';
var i,
// Мы могли построить массив методов следующим образом, однако метод
// getOwnPropertyNames() нельзя реализовать на JavaScript:
// Object.getOwnPropertyNames(Array).filter(function(methodName) {
// return typeof Array[methodName] === 'function'
// });
methods = [
'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
'forEach', 'map', 'reduce', 'reduceRight', 'filter',
'some', 'every'
],
methodCount = methods.length,
assignArrayGeneric = function(methodName) {
if (!Array[methodName]) {
var method = Array.prototype[methodName];
if (typeof method === 'function') {
Array[methodName] = function() {
return method.call.apply(method, arguments);
};
}
}
};
for (i = 0; i < methodCount; i++) {
assignArrayGeneric(methods[i]);
}
}());
</pre>
<h2 id="Examples">Примеры</h2>
<h3 id="Example:_Creating_an_array">Пример: создание массива</h3>
<p>Следующий пример создаёт массив <code>msgArray</code> с длиной 0, присваивает значения элементам <code>msgArray[0]</code> и <code>msgArray[99]</code>, что изменяет длину массива на 100.</p>
<pre class="brush: js">var msgArray = [];
msgArray[0] = 'Привет';
msgArray[99] = 'мир';
if (msgArray.length === 100) {
console.log('Длина равна 100.');
}
</pre>
<h3 id="Example.3A_Creating_a_two-dimensional_array">Пример: создание двумерного массива</h3>
<p>Следующий код создаёт шахматную доску в виде двумерного массива строк. Затем он перемещает пешку путём копирования символа 'p' в позиции (6,4) на позицию (4,4). Старая позиция (6,4) затирается пустым местом.</p>
<pre class="brush: js">var board = [
['R','N','B','Q','K','B','N','R'],
['P','P','P','P','P','P','P','P'],
[' ',' ',' ',' ',' ',' ',' ',' '],
[' ',' ',' ',' ',' ',' ',' ',' '],
[' ',' ',' ',' ',' ',' ',' ',' '],
[' ',' ',' ',' ',' ',' ',' ',' '],
['p','p','p','p','p','p','p','p'],
['r','n','b','q','k','b','n','r'] ];
console.log(board.join('\n') + '\n\n');
// Двигаем королевскую пешку вперёд на две клетки
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));
</pre>
<p>Ниже показан вывод:</p>
<pre class="eval">R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
, , , , , , ,
, , , , , , ,
, , , , , , ,
, , , , , , ,
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r
R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
, , , , , , ,
, , , , , , ,
, , , ,p, , ,
, , , , , , ,
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r
</pre>
<h2 id="Specifications">Спецификации</h2>
{{Specifications}}
<h2 id="Browser_compatibility">Поддержка браузерами</h2>
<p>{{Compat}}</p>
<div> </div>
<h2 id="See_also">Смотрите также</h2>
<ul>
<li><a href="/ru/docs/Web/JavaScript/Guide_ru/Working_with_Objects#.D0.98.D0.BD.D0.B4.D0.B5.D0.BA.D1.81.D1.8B_.D1.81.D0.B2.D0.BE.D0.B9.D1.81.D1.82.D0.B2_.D0.BE.D0.B1.D1.8A.D0.B5.D0.BA.D1.82.D0.B0">Руководство JavaScript: «Индексирование объекта свойствами»</a></li>
<li><a href="/ru/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">Руководство JavaScript: «Предопределённые объекты ядра: объект <code>Array</code>»</a></li>
<li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Выражения заполнения массива</a></li>
<li><a href="https://github.com/plusdude/array-generics">Полифил для общих методов массива из JavaScript 1.8.5 и дополнений массива из ECMAScript 5</a></li>
<li><a href="/ru/docs/Web/JavaScript/Typed_arrays">Типизированные массивы</a></li>
</ul>
|