diff options
Diffstat (limited to 'files/ru/web/javascript/reference/global_objects/array/index.html')
| -rw-r--r-- | files/ru/web/javascript/reference/global_objects/array/index.html | 452 |
1 files changed, 452 insertions, 0 deletions
diff --git a/files/ru/web/javascript/reference/global_objects/array/index.html b/files/ru/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..263de030df --- /dev/null +++ b/files/ru/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,452 @@ +--- +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" name="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" name="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" name="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" name="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" name="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" name="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" name="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" name="Array_instances">Экземпляры массива</h2> + +<p>Все экземпляры массива наследуются от {{jsxref("Array.prototype")}}. Изменения в объекте прототипа конструктора массива затронет все экземпляры <code>Array</code>.</p> + +<h3 id="Methods_of_array_instances" name="Methods_of_array_instances">Свойства</h3> + +<div>{{page('/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 id="Methods_of_array_instances" name="Methods_of_array_instances">Методы</h3> + +<h4 id="Mutator_methods" name="Mutator_methods">Методы изменения</h4> + +<div>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Accessor_methods" name="Accessor_methods">Методы доступа</h4> + +<div>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Iteration_methods" name="Iteration_methods">Методы обхода</h4> + +<div>{{page('ru/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> + +<h2 id="Array_generic_methods" name="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" name="Examples">Примеры</h2> + +<h3 id="Example:_Creating_an_array" name="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" name="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" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>ECMAScript 1-е издание.</td> + <td>Стандарт</td> + <td>Изначальное определение.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Добавлены новые методы: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Добавлены новые методы: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}.</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Добавлен новый метод: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2> + +<p>{{Compat("javascript.builtins.Array")}}</p> + +<div> </div> + +<h2 id="See_also" name="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> |