path: root/files/uk/web/javascript/guide/indexed_collections/index.html

---
title: Indexed collections
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>- це упорядкований набір значень, на який ви посилаєтесь з ім'ям та індексом.</p>

<p>Наприклад, розглянемо масив під назвою <code>emp</code>, який містить імена працівників, індексовані їх числовим номером співробітника. Так <code>emp[1] </code>буде працівником номер один, <code>emp[2] </code>працівником номером два, тощо.</p>

<p>У JavaScript немає явного типу даних масиву. Однак ви можете використовувати заздалегідь заданий об’єкт <code>Array</code> та його методи для роботи з масивами у ваших програмах. Об'єкт <code>Array</code> має методи маніпулювання масивами різними способами, такими як з'єднання(joining), реверсування(reversing) та сортування. Він має властивість визначати довжину масиву та інші властивості для використання з регулярними виразами.</p>

<h3 id="Створення_масиву">Створення масиву</h3>

<p>Наступні операції створюють еквівалентні масиви:</p>

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

<p><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var></code> - це список значень елементів масиву. Коли ці значення задані, масив ініціалізується з ними як елементами масиву. Властивість довжина (<code>length)</code> масиву встановлюється рівною кількості аргументів.</p>

<p>Синтаксис дужки називається "літералом масиву" або "ініціалізатором масиву". Він коротший, ніж інші форми створення масиву, і тому загалом кращий. Докладніше див. <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Літерали_масивів">Літерали масиву</a>.</p>

<p>Для створення масиву з ненульовою довжиною, але без будь-яких елементів, може бути використане будь-яке з наведеного нижче:</p>

<pre class="brush: js">// This...
let arr = new Array(<var>arrayLength</var>)

// ...буде такий саме масив як цей
let arr = Array(<var>arrayLength</var>)

// Це має точно такий же ефект
let arr = []
arr.length = <var>arrayLength</var>
</pre>

<div class="note">
<p><strong>Примітка:</strong> У наведеному вище коді, <code><var>arrayLength</var></code> повинен бути типу <code>Number</code>. У іншому випадку, буде створений масив з єдиним елементом (з наданим значенням). Виклик <code>arr.length</code> поверне <code><var>arrayLength</var></code>, але масив у дійсності убде містити порожні (undefined) елементи. Запуск циклу {{jsxref("Statements/for...in","for...in")}} для масиву не поверне жодного з елементів масиву.</p>
</div>

<p>Крім нещодавно означеної змінної, як показано вище, масиви також можуть бути призначені як властивість для нового або існуючого об'єкта:</p>

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

// або
let obj = {prop: [element0, element1, ...., elementN]}
</pre>

<p>Якщо Ви хочете ініціалізувати масив з єдиним елементом, а цей елемент є <code>Number</code>, ви повинні використовувати синтаксис квадратних дужок. Коли одне значення <code>Number</code> передається конструктору або функції <code>Array()</code>, воно інтерпретується як <code>arrayLength</code>, а не як окремий елемент.</p>

<pre class="brush: js">let arr = [42]       // Створює масив тільки з одним елементом:
                     // числом 42.

let arr = Array(42)  // Створює масив без жодного елементу
                     // і довжина масиву arr.length встановлена в 42.
                     //
                     // Це еквівалентно наступному:
let arr = []
arr.length = 42
</pre>

<p>Виклик <code>Array(<var>N</var>)</code> призводить до <code>RangeError</code>, якщо <code><var>N</var></code> - це не ціле число, тобто дробова частина якого не дорівнює нулю. Наступний приклад ілюструє таку поведінку.</p>

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

<p>Якщо ваш код потребує створення масивів з окремими елементами довільного типу даних, безпечніше використовувати літерали масиву. Крім того, спершу створіть порожній масив, перш ніж додати до нього один елемент.</p>

<p>У ES2015 ви можете використовувати статичний метод {{jsxref("Array.of")}} для створення масивів з одним елементом.</p>

<pre class="brush: js">let wisenArray = Array.of(9.3)   // wisenArray містить тільки один елемент 9.3</pre>

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

<p>Ви можете заповнити масив, призначивши значення його елементам. Наприклад:</p>

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

<div class="note">
<p><strong>Примітка:</strong> Якщо ви подасте неціле значення для оператора масиву в наведеному вище коді, буде створено властивість в об'єкті, що представляє масив, замість елемента масиву.</p>

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

<p>Ви також можете заповнити масив під час його створення:</p>

<pre class="brush: js">let myArray = new Array('Hello', myVar, 3.14159)
// або
let myArray = ['Mango', 'Apple', 'Orange']
</pre>

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

<p>Ви звертаєтеся на елементи масиву, використовуючи порядковий номер елемента. Наприклад, припустимо, Ви означуєте такий масив:</p>

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

<p>Потім Ви звертаєтеся до першого елементу масиву як до <code>myArray[0]</code>, а до другого елементу масиву як до <code>myArray[1]</code>. Індекс елементів починається з нуля.</p>

<div class="note">
<p><strong>Примітка:</strong> Оператор масиву (квадратні дужки) також використовуються для доступу до властивостей масиву. (Масиви також є об'єктами в JavaScript). Наприклад:</p>

<pre class="brush: js">let arr = ['one', 'two', 'three']
arr[2]          // three
arr['length']   // 3
</pre>
</div>

<h3 id="Довжина_масиву">Довжина масиву</h3>

<p>На рівні реалізації масиви JavaScript фактично зберігають свої елементи як стандартні властивості об'єкта, використовуючи індекс масиву як ім'я властивості.</p>

<p>Властивість <code>length</code> особлива. Вона завжди повертає індекс останнього елемента плюс один. (У наведеному нижче прикладі <code>'Dusty' </code>індексується на рівні 30, тому <code>cats.length</code> повертає <code>30 + 1</code>).</p>

<p>Пам'ятайте, що індекси масиву JavaScript базуються на 0: вони починаються з <code>0</code>, а не <code>1</code>. Це означає, що властивість <code>length</code> буде на один більше, ніж найвищий індекс, що зберігається в масиві:</p>

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

<p>Ви також можете записати значення у властивість <code>length</code> .</p>

<p>Введення значення, коротшого за кількість збережених елементів, скорочує масив. Написання <code>0</code> спустошує масив повністю:</p>

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

cats.length = 2
console.log(cats)  // logs "Dusty, Misty" - Twiggy видалено

cats.length = 0
console.log(cats)  // logs []; масив cats array - порожній

cats.length = 3
console.log(cats)  // logs [ &lt;3 пустих елементи&gt; ]
</pre>

<h3 id="Ітерація_з_масивами">Ітерація з масивами</h3>

<p>Поширена операція - це перебір значень масиву, з обробкою кожного елементу. Найпростіший спосіб зробити це наступним чином:</p>

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

<p>Якщо ви знаєте, що жоден з елементів вашого масиву не повертає <code>false</code> в булевому контексті, наприклад, якщо ваш масив складається з вузлів <a href="/uk/docs/DOM" title="en-US/docs/DOM">DOM</a>, Ви можете використовувати більш ефективну ідіому:</p>

<pre class="brush: js">let divs = document.getElementsByTagName('div')
for (let i = 0, div; div = divs[i]; i++) {
  /* Process div in some way */
}
</pre>

<p>Це дозволяє уникнути накладних перевірок довжини масиву та гарантує, що змінна <code><var>div</var></code> для додаткової зручності переназначається поточному елементу на кожній ітерації .</p>

<p>Метод  {{jsxref("Array.forEach", "forEach()")}} забезпечує інший спосіб ітерації з масивом:</p>

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

<p>Крім того, ви можете скоротити код для параметра forEach за допомогою функції стрілок ES2015:</p>

<pre class="brush: js">let colors = ['red', 'green', 'blue']
colors.forEach(color =&gt; console.log(color))
// red
// green
// blue
</pre>

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

<p>Зауважте, що елементи масиву, опущені при означенні масиву, не перебираються під час ітерації <code>forEach</code>, але пеербираються, коли вручну елемнту було присвоєно <code>undefined</code>:</p>

<pre class="brush: js">let array = ['first', 'second', , 'fourth']

array.forEach(function(element) {
  console.log(element)
})
// first
// second
// fourth

if (array[2] === undefined) {
  console.log('array[2] is undefined')  // true
}

array = ['first', 'second', undefined, 'fourth']

array.forEach(function(element) {
  console.log(element)
})
// first
// second
// undefined
// fourth
</pre>

<p>Оскільки елементи JavaScript зберігаються як стандартні властивості об'єкта, не рекомендується проводити повторення через масиви JavaScript, використовуючи цикли {{jsxref("Statements/for...in","for...in")}} , оскільки будуть перебрані як нормальні елементи так і всі властивості масиву.</p>

<h3 id="Методи_масивів">Методи масивів</h3>

<p>Об'єкт {{jsxref("Array")}} має наступні методи:</p>

<p>{{jsxref("Array.concat", "concat()")}} з'єднує два або більше масива і повертає новий масив.</p>

<pre class="brush: js">let 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(delimiter = ',')")}} об'єднує всі елементи масиву в рядок.</p>

<pre class="brush: js">let myArray = new Array('Wind', 'Rain', 'Fire')
let list = myArray.join(' - ') // list є "Wind - Rain - Fire"
</pre>

<p>{{jsxref("Array.push", "push()")}} додає один або більше елементів в кінець масиву і повертає отриману довжину <code>length</code> масиву.</p>

<pre class="brush: js">let myArray = new Array('1', '2')
myArray.push('3')  // myArray тепер ["1", "2", "3"]
</pre>

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

<pre class="brush: js">let myArray = new Array('1', '2', '3')
let last = myArray.pop()
// myArray тепер ["1", "2"], last = "3"
</pre>

<p>{{jsxref("Array.shift", "shift()")}} видаляє перший елемент з масиву і повертає цей елемент.</p>

<pre class="brush: js">let myArray = new Array('1', '2', '3')
let first = myArray.shift()
// myArray тепер ["2", "3"], first є "1"
</pre>

<p>{{jsxref("Array.unshift", "unshift()")}}  додає один або більше елементів до передньої частини масиву і повертає нову довжину масиву.</p>

<pre class="brush: js">let myArray = new Array('1', '2', '3')
myArray.unshift('4', '5')
// myArray став ["4", "5", "1", "2", "3"]
</pre>

<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}} виймає частину масиву і повертає новий масив.</p>

<pre class="brush: js">let myArray = new Array('a', 'b', 'c', 'd', 'e')
myArray = myArray.slice(1, 4)  // починаючи з 1-го вимйає елементи до 4-го
                               // повертає [ "b", "c", "d"]
</pre>

<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}}  видаляє елементи з масиву та (необов'язково) замінює їх. Він повертає елементи, вилучені з масиву.</p>

<pre class="brush: js">let myArray = new Array('1', '2', '3', '4', '5')
myArray.splice(1, 3, 'a', 'b', 'c', 'd')
// myArray тепер ["1", "a", "b", "c", "d", "5"]
// Цей код стартує з першого індексу (or where the "2" was),
// видаляє 3 елементи, а тоді вставляє всі підряд
// на це місце.
</pre>

<p>{{jsxref("Array.reverse", "reverse()")}} транспонує масив: перший елемент масиву стає останнім, а останній стає першим. Він повертає посилання на масив.</p>

<pre class="brush: js">let myArray = new Array('1', '2', '3')
myArray.reverse()
// транспонований масив myArray = ["3", "2", "1"]
</pre>

<p>{{jsxref("Array.sort", "sort()")}} сортує елементи масиву на місці та повертає посилання на масив.</p>

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

<p><code>sort()</code> також може скористатися функцією зворотного виклику для визначення порівняння елементів масиву.</p>

<p>Метод <code>sort</code> (та інші нижче), які приймають функцію зворотного виклику, відомі як ітераційні методи, оскільки певним чином вони перебирають весь масив. Кожен з них бере необов'язковий другий аргумент під назвою <code><var>thisObject</var></code>. Якщо  <code><var>thisObject</var></code> передається, він стає значенням ключового слова <code>this</code> всередині тіла функції зворотного виклику. Якщо це не передбачено, як і в інших випадках, коли функція викликається поза явним контекстом об'єкта, <code>this</code> стосуватиметься глобального об'єкта (<a href="/uk/docs/Web/API/Window" title="The Window interface represents a window containing a DOM document; the document property points to the DOM document loaded in that window."><code>window</code></a>) при використанні функції вказівника зворотного виклику, або <code>undefined</code> при використанні нормальної функції зворотного виклику.</p>

<p>Функція зворотного виклику викликається двома аргументами, які є елементами масиву.</p>

<p>Функція нижче порівнює два значення і повертає одне з трьох значень:</p>

<p>Наприклад, наступне буде сортувати за останньою літерою рядка:</p>

<pre class="brush: js">let 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><var>a</var></code> за системою сортування менше <code><var>b</var></code> , поверне  <code>-1</code> (або будь-яке від’ємне число)</li>
 <li>якщо <code><var>a</var></code> за системою сортування більше, ніж <code><var>b</var></code> , поверне <code>1</code> (або будь-яке додатне число)</li>
 <li>якщо <code><var>a</var></code> і <code><var>b</var></code> вважати еквівалентними, поверне <code>0</code>.</li>
</ul>

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

<pre class="brush: js">let 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">let 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><var>callback</var></code> на кожному елементі масиву і повертає <code>undefined</code>.</p>

<pre class="brush: js">let a = ['a', 'b', 'c']
a.forEach(function(element) { console.log(element) })
// logs each item in turn
</pre>

<p>{{jsxref("Array.map", "map(callback[, thisObject])")}} повертає новий масив повернутого значення при виконанні зворотного виклику <code><var>callback</var></code> на кожному елементі масиву.</p>

<pre class="brush: js">let a1 = ['a', 'b', 'c']
let a2 = a1.map(function(item) { return item.toUpperCase() })
console.log(a2) // logs ['A', 'B', 'C']
</pre>

<p>{{jsxref("Array.filter", "filter(callback[, thisObject])")}} повертає новий масив, що містить елементи, для яких <code><var>callback</var></code> повернув <code>true</code>.</p>

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

<p>{{jsxref("Array.every", "every(callback[, thisObject])")}} повертає <code>true</code>, якщо <code><var>callback</var></code> повертає <code>true</code> для кожного елемента масиву.</p>

<pre class="brush: js">function isNumber(value) {
  return typeof value === 'number'
}
let a1 = [1, 2, 3]
console.log(a1.every(isNumber))  // logs true
let a2 = [1, '2', 3]
console.log(a2.every(isNumber))  // logs false
</pre>

<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} повертає <code>true</code> , якщо <code><var>callback</var></code> повертає <code>true </code>для принаймні одного елемента в масиві.</p>

<pre class="brush: js">function isNumber(value) {
  return typeof value === 'number'
}
let a1 = [1, 2, 3]
console.log(a1.some(isNumber))  // logs true
let a2 = [1, '2', 3]
console.log(a2.some(isNumber))  // logs true
let a3 = ['1', '2', '3']
console.log(a3.some(isNumber))  // logs false
</pre>

<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}}  застосовує <code><var>callback</var>(<var>accumulator</var>, <var>currentValue</var>[, <var>currentIndex</var>[, <var>array</var>]])</code> для кожного значення масиву з метою зменшення списку елементів до одного значення. Функція зменшення повертає кінцеве значення, повернене функцією <code><var>callback</var></code> .</p>

<p>Якщо вказано <code><var>initialValue</var></code> , тоді <code><var>callback</var></code> викликається <code><var>initialValue</var></code> як значення першого параметра, а значення першого елемента в масиві - як значення другого параметра.</p>

<p>Якщо <code><var>initialValue</var></code> не вказана, першими двома параметрами <code><var>callback</var></code> будуть перший і другий елементи масиву. При кожному наступному виклику значенням першого параметра буде будь-який <code><var>callback</var></code> , повернутий при попередньому виклику, а значення другого параметра буде наступним значенням масиву.</p>

<p>Якщо для <code><var>callback</var></code>  потрібен доступ до індексу оброблюваного елемента, для доступу до всього масиву вони доступні як необов'язкові параметри.</p>

<pre class="brush: js">let a = [10, 20, 30]
let total = a.reduce(function(accumulator, currentValue) { return accumulator + currentValue }, 0)
console.log(total) // Prints 60
</pre>

<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initialValue])")}} працює подібно  <code>reduce()</code>, але починається з останнього елемента.</p>

<p><code>reduce</code> та <code>reduceRight</code> - найменш очевидний із ітеративних методів масиву. Їх слід використовувати для алгоритмів, що поєднують два значення рекурсивно, щоб зменшити послідовність до одного значення.</p>

<h3 id="Багатовимірні_масиви">Багатовимірні масиви</h3>

<p>Масиви можуть бути вкладені, тобто масив може містити інший масив як елемент. Використовуючи цю характеристику масивів JavaScript, можна створити багатовимірні масиви.</p>

<p>Наступний код створює багатовимірний масив.</p>

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

<p>Цей приклад створює масив із таких рядків:</p>

<pre>Row 0: [0, 0] [0, 1] [0, 2] [0, 3]
Row 1: [1, 0] [1, 1] [1, 2] [1, 3]
Row 2: [2, 0] [2, 1] [2, 2] [2, 3]
Row 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="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a>.</p>

<h3 id="Робота_з_масиво-подібними_обєктами">Робота з масиво-подібними об'єктами</h3>

<p>Деякі об`єкти JavaScript, такі як <a href="/uk/docs/Web/API/NodeList" title="NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll()."><code>NodeList</code></a> повертають  <a href="/uk/docs/Web/API/Document/getElementsByTagName" title="returns an HTMLCollection of elements with the given tag name."><code>document.getElementsByTagName()</code></a> або об'єкт {{jsxref("Functions/arguments","arguments")}}, доступний в тілі функції, який виглядає і поводиться як масиви на поверхні, але не ділиться всіма їх методами. Наприклад, об'єкт <code>arguments</code> забезпечує атрибут {{jsxref("Global_Objects/Function/length","length")}} але не реалізує метод {{jsxref("Array.forEach", "forEach()")}}.</p>

<p>Методи прототипу масиву можна викликати для інших об’єктів, подібних до масиву. наприклад:</p>

<pre class="brush: js">function printArguments() {
  Array.prototype.forEach.call(arguments, function(item) {
    console.log(item)
  })
}
</pre>

<p>Методи прототипу масиву також можна використовувати і для рядків, оскільки вони забезпечують послідовний доступ до своїх символів аналогічно масивам:</p>

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

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

<p><a href="/uk/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> є схожими на масив об'єктів і забезпечують механізм доступу до необроблених бінарних даних. Як ви вже знаєте, об'єкт {{jsxref("Array")}} динамічно росте і скорочується і може мати будь-яке значення JavaScript. Рушії JavaScript виконують оптимізацію, щоб ці масиви були швидкими. Однак, оскільки веб-застосунки стають все більш потужними, додаючи такі функції, як маніпулювання аудіо та відео, доступ до необроблених даних за допомогою <a href="/uk/docs/WebSockets">WebSockets</a> тощо, стало зрозуміло, що є випадки, коли корисним буде код JavaScript для швидкого та легкого маніпулювати необробленими бінарними даними в типізованих масивах.</p>

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

<p>Щоб досягти максимальної гнучкості та ефективності, JavaScript типізовані масиви розділили реалізацію на буфери (<strong>buffers</strong>) та представлення(<strong>views</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>. Він фіксує значення між <code>0</code> та <code>255</code>.  Це корисно, наприклад, для обробки даних <a href="/uk/docs/Web/API/ImageData">Canvas</a>.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th class="header" scope="col">Type</th>
   <th class="header" scope="col">Value Range</th>
   <th class="header" scope="col">Size in bytes</th>
   <th class="header" scope="col">Description</th>
   <th class="header" scope="col">Web IDL type</th>
   <th class="header" scope="col">Equivalent C type</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{jsxref("Int8Array")}}</td>
   <td><code>-128</code> to <code>127</code></td>
   <td>1</td>
   <td>8-bit two's complement signed integer</td>
   <td><code>byte</code></td>
   <td><code>int8_t</code></td>
  </tr>
  <tr>
   <td>{{jsxref("Uint8Array")}}</td>
   <td><code>0</code> to <code>255</code></td>
   <td>1</td>
   <td>8-bit unsigned integer</td>
   <td><code>octet</code></td>
   <td><code>uint8_t</code></td>
  </tr>
  <tr>
   <td>{{jsxref("Uint8ClampedArray")}}</td>
   <td><code>0</code> to <code>255</code></td>
   <td>1</td>
   <td>8-bit unsigned integer (clamped)</td>
   <td><code>octet</code></td>
   <td><code>uint8_t</code></td>
  </tr>
  <tr>
   <td>{{jsxref("Int16Array")}}</td>
   <td><code>-32768</code> to <code>32767</code></td>
   <td>2</td>
   <td>16-bit two's complement signed integer</td>
   <td><code>short</code></td>
   <td><code>int16_t</code></td>
  </tr>
  <tr>
   <td>{{jsxref("Uint16Array")}}</td>
   <td><code>0</code> to <code>65535</code></td>
   <td>2</td>
   <td>16-bit unsigned integer</td>
   <td><code>unsigned short</code></td>
   <td><code>uint16_t</code></td>
  </tr>
  <tr>
   <td>{{jsxref("Int32Array")}}</td>
   <td><code>-2147483648</code> to <code>2147483647</code></td>
   <td>4</td>
   <td>32-bit two's complement signed integer</td>
   <td><code>long</code></td>
   <td><code>int32_t</code></td>
  </tr>
  <tr>
   <td>{{jsxref("Uint32Array")}}</td>
   <td><code>0</code> to <code>4294967295</code></td>
   <td>4</td>
   <td>32-bit unsigned integer</td>
   <td><code>unsigned long</code></td>
   <td><code>uint32_t</code></td>
  </tr>
  <tr>
   <td>{{jsxref("Float32Array")}}</td>
   <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> to <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td>
   <td>4</td>
   <td>32-bit IEEE floating point number (7 significant digits e.g., <code>1.1234567</code>)</td>
   <td><code>unrestricted float</code></td>
   <td><code>float</code></td>
  </tr>
  <tr>
   <td>{{jsxref("Float64Array")}}</td>
   <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> to <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td>
   <td>8</td>
   <td>64-bit IEEE floating point number (16 significant digits e.g., <code>1.123...15</code>)</td>
   <td><code>unrestricted double</code></td>
   <td><code>double</code></td>
  </tr>
  <tr>
   <td>{{jsxref("BigInt64Array")}}</td>
   <td><code>-2<sup>63</sup></code> to <code>2<sup>63</sup>-1</code></td>
   <td>8</td>
   <td>64-bit two's complement signed integer</td>
   <td><code>bigint</code></td>
   <td><code>int64_t (signed long long)</code></td>
  </tr>
  <tr>
   <td>{{jsxref("BigUint64Array")}}</td>
   <td><code>0</code> to <code>2<sup>64</sup>-1</code></td>
   <td>8</td>
   <td>64-bit unsigned integer</td>
   <td><code>bigint</code></td>
   <td><code>uint64_t (unsigned long long)</code></td>
  </tr>
 </tbody>
</table>

<p>For more information, see <a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> and the reference documentation for the different {{jsxref("TypedArray")}} objects.</p>

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