diff options
Diffstat (limited to 'files/uk/web/javascript/guide/indexed_collections/index.html')
| -rw-r--r-- | files/uk/web/javascript/guide/indexed_collections/index.html | 578 |
1 files changed, 578 insertions, 0 deletions
diff --git a/files/uk/web/javascript/guide/indexed_collections/index.html b/files/uk/web/javascript/guide/indexed_collections/index.html new file mode 100644 index 0000000000..0c4dfaef25 --- /dev/null +++ b/files/uk/web/javascript/guide/indexed_collections/index.html @@ -0,0 +1,578 @@ +--- +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 [ <3 пустих елементи> ] +</pre> + +<h3 id="Ітерація_з_масивами">Ітерація з масивами</h3> + +<p>Поширена операція - це перебір значень масиву, з обробкою кожного елементу. Найпростіший спосіб зробити це наступним чином:</p> + +<pre class="brush: js">let colors = ['red', 'green', 'blue'] +for (let i = 0; i < 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 => 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] < b[b.length - 1]) return -1; + if (a[a.length - 1] > 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 < 4; i++) { + a[i] = new Array(4) + for (let j = 0; j < 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> |