diff options
Diffstat (limited to 'files/uk/web/javascript/reference/global_objects/array/index.html')
-rw-r--r-- | files/uk/web/javascript/reference/global_objects/array/index.html | 431 |
1 files changed, 431 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/global_objects/array/index.html b/files/uk/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..18045d9c84 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,431 @@ +--- +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 >= '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("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> |