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

---
title: Array
slug: Web/JavaScript/Reference/Global_Objects/Array
tags:
  - Array
  - JavaScript
  - Масив
translation_of: Web/JavaScript/Reference/Global_Objects/Array
---
<div>{{JSRef}}</div>

<p><strong><code>Array</code></strong> є глобальним об'єктом, що використовується для створення масивів; які є високорівневими, спископодібними об'єктами.</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="Синтаксис">Синтаксис</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>
 <h3 id="Параметри">Параметри</h3>
 </dt>
</dl>

<p><code>element<em>N</em></code></p>

<dl>
 <dd>Масив у JavaScript ініціалізується за допомогою наперед заданих елементів, за виключенням тієї ситуації коли в конструктор <code>Array</code> передається тільки один аргумент і він є числом (див. параметр <code>arrayLength</code> нижче). Зверніть увагу на те, що це спрацьовує лише у тому випадку, якщо масив створено за допомогою  конструктора <code>Array</code>, а не через літерали масивів створених з допомогою синтаксу квадратних дужок.</dd>
 <dt><code>arrayLength</code></dt>
 <dd>Якщо єдиним аргументом (вхідним параметром) конструктора <code>Array</code> є ціле число від 0 до 2<sup>32</sup>-1 (включно), буде повернено новий JavaScript-масив з властивістю length рівною цьому числу.  <strong>Зверніть увагу</strong>, що цей масив матиме пусті слоти, а не слоти зі значеннями <code>undefined</code>. Якщо аргументом буде будь-яке інше число, виникне виняток <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/RangeError">RangeError</a>.</dd>
</dl>

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

<p>Масиви - це спископодібні об'єкти, чий прототип має методи для операцій обходу та зміни масиву. Ані довжина масиву, ані типи його елементів не є незмінними. Довжина масиву може змінитись будь-коли, як і позиція даних в масиві; тому їх використання залежить від рішення програміста. Взагалі, це зручні характеристики; але якщо ці особливості не є бажаними для ваших конкретних цілей, ви можете розглянути можливість використання типізованих масивів.</p>

<p>Масиви не можуть використовувати рядки у якості індексів елементів (як <a href="https://uk.wikipedia.org/wiki/%D0%90%D1%81%D0%BE%D1%86%D1%96%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9_%D0%BC%D0%B0%D1%81%D0%B8%D0%B2">асоціативні масиви</a>), а тільки цілі числа(індекси). Присвоєння або звернення через не цілочисельні значення, з використанням <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">квадратних дужок</a> (або <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">через крапку</a>), не присвоїть або не отримає елемент з самого списку масиву, але присвоїть чи отримає доступ до змінної, пов'язаної з <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Data_structures#Properties">колекцією властивостей об'єкта</a>(властивості) цього масиву. Об'єктні властивості масиву та список елементів масиву є відокремленими, і <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Indexed_collections#Array_methods">операції обходу та зміни </a>цього масиву не застосовуються до цих іменованих властивостей.</p>

<h3 id="Доступ_до_елементів_масиву">Доступ до елементів масиву</h3>

<p>Масиви в JavaScript індексуються з нуля: перший елемент масиву має індекс, який дорівнює 0, а індекс останнього елемента відповідає значенню властивості масиву {{jsxref("Array.length", "length")}} мінус 1. Використання неправильного індексу повертає <code>undefined</code>.</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> є властивістю, але спроби звернутися до елемента масиву наступним чином згенерує синтаксичну помилку через неправильне ім'я властивості:</p>

<pre class="brush: js">console.log(arr.0); // є синтаксична помилка
</pre>

<p>В масивах JavaScript немає нічого особливого, що призводить до цього. До властивостей 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> має писатися в лапках. Індекси масивів JavaScript також можна писати в лапках (напр., <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>Схожим чином до властивостей об'єкта, які є зарезервованими словами (!) можна звертатися тільки через рядкові значення у квадратних дужках (але до них можна звертатися через крапку у firefox 40.0a2 наприклад):</p>

<pre class="brush: js">var promise = {
  'var'  : 'text',
  'array': [1, 2, 3, 4]
};

console.log(promise['array']);
</pre>

<h3 id="Зв'язок_між_length_та_числовими_властивостями">Зв'язок між <code>length</code> та числовими властивостями</h3>

<p>У масивах JavaScript властивість {{jsxref("Array.length", "length")}} та числові властивості взаємопов'язані. Декілька з вбудованих методів масивів (напр., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, і т.д.) враховують значення властивості {{jsxref("Array.length", "length")}} під час виконання. Інші методи (напр., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, і т.д.) призводять до зміни властивості масиву {{jsxref("Array.length", "length")}}.</p>

<pre class="brush: js">var fruits = [];
fruits.push('банан', 'яблуко', 'персик');

console.log(fruits.length); // 3
</pre>

<p>Присвоєння властивості до масиву JavaScript змінить властивість масиву {{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>Збільшення значення {{jsxref("Array.length", "length")}}.</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="Створення_масиву_з_використанням_результату_пошуку_збігів">Створення масиву з використанням результату пошуку збігів</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="Властивості">Властивості</h2>

<dl>
 <dt><code>Array.length</code></dt>
 <dd>Властивість length конструктора <code>Array</code>, дорівнює 1.</dd>
 <dt>{{jsxref("Array.prototype")}}</dt>
 <dd>Дозволяє додавати властивості до усіх масивів.</dd>
</dl>

<h2 id="Методи">Методи</h2>

<dl>
 <dt>{{jsxref("Array.from()")}}</dt>
 <dd>Створює новий екземпляр <code>Array</code> з подібного до масиву або ітерабельного об'єкта.</dd>
 <dt>{{jsxref("Array.isArray()")}}</dt>
 <dd>Повертає true, якщо змінна є масивом, якщо ні, то повертає false.</dd>
 <dt>{{jsxref("Array.of()")}}</dt>
 <dd>Створює новий екземпляр <code>Array</code> з кількістю аргументів, заданих через змінну, незважаючи на кількість або тип аргументів.</dd>
</dl>

<h2 id="Екземпляри_Array"><code>Екземпляри Array</code></h2>

<p>Всі екземпляри <code>Array</code> наслідуються від {{jsxref("Array.prototype")}}. Прототип конструктора <code>Array</code> може бути змінений, що вплине на всі екземпляри <code>Array</code>.</p>

<h3 id="Властивості_2">Властивості</h3>

<div>{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Властивості')}}</div>

<h3 id="Методи_2">Методи</h3>

<h4 id="Методи_модифікації">Методи модифікації</h4>

<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Методи_модифікації')}}</div>

<h4 id="Методи_доступу">Методи доступу</h4>

<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Методи_доступу')}}</div>

<h4 id="Методи_перебору">Методи перебору</h4>

<div>{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Методи_перебору')}}</div>

<h2 id="Загальні_методи_масивів">Загальні методи масивів</h2>

<div class="warning">
<p><strong>Загальні методи масивів є нестандартними, застарілими і будуть прибрані найближчим часом.</strong></p>
</div>

<p>Іноді ви б хотіли застосувати методи масивів на рядках або інших подібних до масиву об'єктах (таких як {{jsxref("Functions/arguments", "arguments", "", 1)}} у функції). В такому випадку, ви розглядаєте рядок як масив символів (чи не об'єкт масиву як масив). Наприклад, для того, щоб перевірити, що кожний символ у змінній <var>str</var> є літерою, ви б написали:</p>

<pre class="brush: js">function isLetter(character) {
  return character &gt;= 'a' &amp;&amp; character &lt;= '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("String", "рядках")}}.</p>

<p>Вони <strong>не є</strong> частиною стандартів ECMAScript і не підтримуються не Gecko оглядачами. У якості стандартної альтернативи, ви можете перетворити ваш об'єкт на справжній масив з допомогою методу {{jsxref("Array.from()")}}; хоча цей метод може не підтримуватися у старих оглядачах:</p>

<pre class="brush: js">if (Array.from(str).every(isLetter)) {
  console.log("Рядок '" + str + "' містить тільки літери!");
}</pre>

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

<h3 id="Створення_масиву">Створення масиву</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="Створення_двовимірного_масиву">Створення двовимірного масиву</h3>

<p>Наступний код створює шахівницю у вигляді двовимірного масиву рядків. Перший хід робиться копіюванням 'п' з (6,4) до (4,4). Стара позиція (6,4) робиться порожньою.</p>

<pre class="brush: js">var board = [
  ['Т','Н','С','Ф','К','С','Н','Т'],
  ['П','П','П','П','П','П','П','П'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['п','п','п','п','п','п','п','П'],
  ['т','н','с','ф','к','с','н','т'] ];

console.log(board.join('\n') + '\n\n');

// Перемістити королівського пішака вперед на 2
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));
</pre>

<p>Ось результат:</p>

<pre class="eval">Т,Н,С,Ф,К,С,Н,Т
П,П,П,П,П,П,П,П
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
п,п,п,п,п,п,п,п
т,н,с,ф,к,с,н,т

Т,Н,С,Ф,К,С,Н,Т
П,П,П,П,П,П,П,П
 , , , , , , ,
 , , , , , , ,
 , , , ,п, , ,
 , , , , , , ,
п,п,п,п, ,п,п,п
т,н,с,ф,к,с,н,т
</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('ES1')}}</td>
   <td>{{Spec2('ES1')}}</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('ES6', '#sec-array-objects', 'Array')}}</td>
   <td>{{Spec2('ES6')}}</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('ESDraft', '#sec-array-objects', 'Array')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td>Додано новий метод: {{jsxref("Array.prototype.includes()")}}</td>
  </tr>
 </tbody>
</table>

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

<div class="hidden">
<p>The compatibility table on 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")}}</p>

<div id="compat-mobile"></div>

<h2 id="Див._також">Див. також</h2>

<ul>
 <li><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li>
 <li><a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li>
 <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li>
 <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li>
 <li><a href="/uk/docs/Web/JavaScript/Typed_arrays">Типізовані масиви</a></li>
</ul>