diff options
Diffstat (limited to 'files/uk/web/javascript/reference/global_objects/array')
44 files changed, 7772 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html new file mode 100644 index 0000000000..3ab9407b4e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html @@ -0,0 +1,116 @@ +--- +title: 'Array.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Ітератор + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +--- +<div>{{JSRef}}</div> + +<p>Початковим значенням властивості <code><strong>@@iterator</strong></code> є та сама функція, яка є початковим значенням властивості {{jsxref("Array.prototype.values()", "values()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>arr</var>[Symbol.iterator]()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Початкове значення, що надається <strong>ітератором</strong> {{jsxref("Array.prototype.values()", "values()")}}. За замовчуванням, використання <code>arr[Symbol.iterator]</code> поверне функцію {{jsxref("Array.prototype.values()", "values()")}}.</p> + +<h2 id="Приклад">Приклад</h2> + +<h3 id="Перебір_за_допомогою_циклу_for...of">Перебір за допомогою циклу <code>for...of</code></h3> + +<pre class="brush: js">var arr = ['a', 'b', 'c', 'd', 'e']; +var eArr = arr[Symbol.iterator](); +// ваш переглядач має підтримувати цикл for..of +// та змінні, оголошені через let, у циклах for +// також можна використати const та var +for (let letter of eArr) { + console.log(letter); +} +</pre> + +<h3 id="Альтернативний_перебір">Альтернативний перебір</h3> + +<pre class="brush: js">var arr = ['а', 'б', 'в', 'г', 'ґ']; +var eArr = arr[Symbol.iterator](); +console.log(eArr.next().value); // а +console.log(eArr.next().value); // б +console.log(eArr.next().value); // в +console.log(eArr.next().value); // г +console.log(eArr.next().value); // ґ +</pre> + +<h3 id="Випадок_використання_позначення_через_квадратні_дужки">Випадок використання позначення через квадратні дужки</h3> + +<p>Використовувати цей синтаксис замість позначення через крапку (<code>Array.prototype.values()</code>) зручно, коли ви не знаєте заздалегідь, яким буде об'єкт. Якщо ви маєте функцію, що приймає ітератор та перебирає значення, але не знаєте, чи матиме цей об'єкт метод [Iterable].prototype.values. Це може бути вбудований об'єкт, такий як <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator">String</a>, або користувацький об'єкт.</p> + +<pre class="brush: js">function logIterable(it) { + var iterator = it[Symbol.iterator](); + // ваш переглядач має підтримувати цикл for..of + // та змінні, оголошені через let, у циклах for + // також можна використати const та var + for (let letter of iterator) { + console.log(letter); + } +} + +// Масив +logIterable(['а', 'б', 'в']); +// а +// б +// в + +// рядок +logIterable('абв'); +// а +// б +// в</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Array.@@iterator")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/@@species/index.html b/files/uk/web/javascript/reference/global_objects/array/@@species/index.html new file mode 100644 index 0000000000..df18a2a627 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/@@species/index.html @@ -0,0 +1,72 @@ +--- +title: 'get Array[@@species]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@species +tags: + - Array + - JavaScript + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species +--- +<div>{{JSRef}}</div> + +<p>Властивість-аксесор <code><strong>Array[@@species]</strong></code> повертає конструктор <code>Array</code>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">Array[Symbol.species] +</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Конструктор {{jsxref("Array")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Властивість-аксесор <code>species</code> повертає конструктор за замовчуванням для об'єктів <code>Array</code>. Конструктори підкласів можуть його заміщувати, змінюючи присвоєння конструктора.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Species_у_звичайних_обєктах">Species у звичайних об'єктах</h3> + +<p>Властивість <code>species</code> повертає функцію-конструктор за замовчуванням, для об'єктів <code>Array</code> це конструктор <code>Array</code>:</p> + +<pre class="brush: js notranslate">Array[Symbol.species]; // функція Array()</pre> + +<h3 id="Species_у_похідних_обєктах">Species у похідних об'єктах</h3> + +<p>У похідному об'єкті колекцій (наприклад, у вашому користувацькому масиві <code>MyArray</code>), <code>species</code> для <code>MyArray</code> поверне конструктор <code>MyArray</code>. Однак, ви, можливо, захочете переписати цю поведінку, щоб повертати батьківські об'єкти <code>Array</code> у методах свого похідного класу:</p> + +<pre class="brush: js notranslate">class MyArray extends Array { + // Переписати Symbol.species у MyArray на батьківський конструктор Array + static get [Symbol.species]() { return Array; } +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.@@species")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Symbol.species")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html new file mode 100644 index 0000000000..2ded6c458e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html @@ -0,0 +1,76 @@ +--- +title: 'Array.prototype[@@unscopables]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Властивість + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +--- +<div>{{JSRef}}</div> + +<p>Символьна властивість <code><strong>@@unscopable</strong></code> містить імена властивостей, що не були включені у стандарт ECMAScript до версії ES2015. Ці властивості виключені з прив'язок оператора <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Стандартні властивості масивів, що виключені з прив'язок <code>with</code>, наступні:</p> + +<ul> + <li>{{jsxref("Array.prototype.copyWithin()", "copyWithin()")}}</li> + <li>{{jsxref("Array.prototype.entries()", "entries()")}}</li> + <li>{{jsxref("Array.prototype.fill()", "fill()")}}</li> + <li>{{jsxref("Array.prototype.find()", "find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()", "findIndex()")}}</li> + <li>{{jsxref("Array.prototype.includes()", "includes()")}}</li> + <li>{{jsxref("Array.prototype.keys()", "keys()")}}</li> + <li>{{jsxref("Array.prototype.values()", "values()")}}</li> +</ul> + +<p>Дивіться {{jsxref("Symbol.unscopables")}}, щоб дізнатись, як задати <code>unscopables</code> для ваших власних об'єктів.</p> + +<p>{{js_property_attributes(0,0,1)}}</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_у_оточеннях_with">Використання у оточеннях with</h3> + +<p>Наступний код чудово працює у ES5 та більш ранніх версіях. Однак, у ECMAScript 2015 та пізніших версіях був запроваджений метод {{jsxref("Array.prototype.keys()")}}. Це означає, що всередині середовищ <code>with</code> "keys" тепер буде методом, а не змінною. Саме тут вступає у гру вбудована символьна властивість <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code>, яка не дає деяким методам масивів потрапити у область видимості <code>with</code>.</p> + +<pre class="brush: js notranslate">var keys = []; + +with (Array.prototype) { + keys.push('something'); +} + +Object.keys(Array.prototype[Symbol.unscopables]); +// ["copyWithin", "entries", "fill", "find", "findIndex", +// "includes", "keys", "values"]</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Symbol.unscopables")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/array/index.html b/files/uk/web/javascript/reference/global_objects/array/array/index.html new file mode 100644 index 0000000000..84bcbb52a0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/array/index.html @@ -0,0 +1,87 @@ +--- +title: Конструктор Array() +slug: Web/JavaScript/Reference/Global_Objects/Array/Array +tags: + - JavaScript + - Конструктор + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array +--- +<div>{{JSRef}}</div> + +<p>Конструктор <code>Array()</code> використовується для створення об'єктів {{jsxref("Array")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">[<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>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Масив JavaScript ініціалізується наданими елементами, окрім випадку, коли у конструктор <code>Array</code> передається єдиний аргумент, і цей аргумент - число (дивіться нижче параметр arrayLength). Зауважте, що цей особливий випадок стосується лише масивів JavaScript, створених конструктором <code>Array</code>, а не масивних літералів, створених дужковим синтаксисом.</dd> + <dt><code>arrayLength</code></dt> + <dd>Якщо єдиним аргументом, переданим у конструктор <code>Array</code> є ціле число між 0 та 2<sup>32</sup>-1 (включно), це створює новий масив JavaScript, в якого властивості <code>length</code> присвоюється це число (<strong>Заувага: </strong>мається на<strong> </strong>увазі масив довжиною <code>arrayLength</code> з порожних елементів, а не елементів, заповнених значеннями <code>undefined</code>). Якщо аргумент є будь-яким іншим числом, викидається виняток {{jsxref("RangeError")}}.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Нотація_масивного_літералу">Нотація масивного літералу</h3> + +<p>Масиви можна створювати за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Array_literals">літералів</a>:</p> + +<pre class="brush: js">let fruits = ['Яблуко', 'Банан']; + +console.log(fruits.length); // 2 +console.log(fruits[0]); // "Яблуко" +</pre> + +<h3 id="Конструктор_масиву_з_єдиним_параметром">Конструктор масиву з єдиним параметром</h3> + +<p>Масиви можна створювати за допомогою конструктора з єдиним числовим параметром. Властивості масиву <code>length</code> присвоюється це число, а всі елементи масиву є порожніми.</p> + +<pre class="brush: js">let fruits = new Array(2); + +console.log(fruits.length); // 2 +console.log(fruits[0]); // undefined +</pre> + +<h3 id="Конструктор_масиву_з_кількома_параметрами">Конструктор масиву з кількома параметрами</h3> + +<p>Якщо у конструктор передається більше одного параметра, створюється новий об'єкт {{jsxref("Array")}} з наданими елементами.</p> + +<pre class="brush: js">let fruits = new Array('Яблуко', 'Банан'); + +console.log(fruits.length); // 2 +console.log(fruits[0]); // "Яблуко" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Array.Array")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Клас {{jsxref("Array")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/concat/index.html b/files/uk/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..5b56573f93 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,168 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +tags: + - Array + - JavaScript + - Method + - Prototype + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>concat()</strong></code> повертає новий масив, що складається із масиву, в контексті якого метод був викликаний, поєднаного із масивом (масивами) та/або іншими значеннями, що були передані як аргументи.</p> + + + +<p>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value<em>N</em></code></dt> + <dd>Масиви та/або значення, які поєднуються в новий масив. Якщо всі параметри <code>value<em>N</em></code> пропущені, метод <code>concat</code> повертає дрібну копію існуючого масиву, на якому був викликаний. Додаткову інформацію дивіться нижче в описі.</dd> +</dl> + +<h3 id="Повернене_значення">Повернене значення</h3> + +<p>Новий екземпляр об'єкта {{jsxref("Array")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>concat</code> створює новий масив, який складається із елементів об'єкта, на якому метод був викликаний, а також із елементів кожного аргумента (якщо цей аргумент - масив) або з самого аргумента (якщо він не є масивом). Метод не заходить у аргументи вкладених масивів.</p> + +<p>Метод <code>concat</code> не змінює <code>this</code> або будь-який з масивів, що передані як аргументи, але натомість повертає дрібну копію, яка містить копії тих самих елементів, об'єднані з початкових масивів. Елементи початкових масивів копіюються в новий масив таким чином:</p> + +<ul> + <li>Посилання на об'єкти (а не самі об'єкти): <code>concat</code> копіює посилання на об'єкти у новий масив. І початковий, і новий масиви посилаються на той самий об'єкт. Іншими словами, якщо об'єкт, на який посилаються, буде змінено, то зміни будуть видимими для нового та початкового масивів. Це стосується також тих елементів аргументів масиву, які також є масивами.</li> + <li>Рядки, числа та булеві значення (не об'єкти {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}}, та {{jsxref("Global_Objects/Boolean", "Boolean")}}): <code>concat</code> копіює значення рядків та чисел у новий масив.</li> +</ul> + +<div class="note"> +<p><strong>Примітка:</strong> об'єднання масиву (масивів) чи значення (значень) не змінить початкові дані. Більше того, будь-яка операція над новим масивом (тільки якщо елемент не є посиланням на об'єкт) не матиме жодного впливу на початкові масиви, і навпаки.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Об'єднання_двох_масивів">Об'єднання двох масивів</h3> + +<p>Наступний код об'єднує два масиви:</p> + +<pre class="brush: js">const letters = ['a', 'b', 'c'], +const numeric = [1, 2, 3]; + +letters.concat(numeric); +// Результат: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Об'єднання_трьох_масивів">Об'єднання трьох масивів</h3> + +<p>Наступний код об'єднує три масиви:</p> + +<pre class="brush: js">var num1 = [1, 2, 3], + num2 = [4, 5, 6], + num3 = [7, 8, 9]; + +var numbers = num1.concat(num2, num3); + +console.log(numbers); +// Результат: [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h3 id="Об'єднання_значень_у_масив">Об'єднання значень у масив</h3> + +<p>Наступний код об'єднує три значення у масив:</p> + +<pre class="brush: js">var letters = ['a', 'b', 'c']; + +var alphaNumeric = letters.concat(1, [2, 3]); + +console.log(alphaNumeric); +// Результат: ['a', 'b', 'c', 1, 2, 3] +</pre> + + + +<h3 id="Об'єднанная_вкладених_масивів">Об'єднанная вкладених масивів</h3> + +<p>Наступний код об'єднує вкладені масиви та демонструє утримання посилань:</p> + +<pre class="brush: js">const num1 = [[1]]; +const num2 = [2, [3]]; + +const numbers = num1.concat(num2); + +console.log(numbers); +// результат: [[1], 2, [3]] + +// змінити перший елемент num1 +num1[0].push(4); + +console.log(numbers); +// результат: [[1, 4], 2, [3]]</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізоване в JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_веб-переглядачами">Сумісність із веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table in 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.concat")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — додавання/видалення елементів із кінця масиву</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — додавання/видалення елементів із початку масиву</li> + <li>{{jsxref("Array.splice", "splice")}} — додавання/видалення елементів із зазначеного місця масиву</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("Symbol.isConcatSpreadable")}} – налаштування вирівнювання</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/copywithin/index.html b/files/uk/web/javascript/reference/global_objects/array/copywithin/index.html new file mode 100644 index 0000000000..b2d5e837e2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/copywithin/index.html @@ -0,0 +1,188 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +tags: + - ECMAScript 2015 + - JavaScript + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>copyWithin()</strong></code> додає дрібну копію частини масиву в іншу позицію в тому ж масиві та повертає його без зміни довжини.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.copyWithin(<var>target[, start[, end]]</var>) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>target</code></dt> + <dd>Індекс (нумерується з 0), куди потрібно скопіювати послідовність. Якщо індекс є від'ємним, <code>target</code> буде рахуватися з кінця масиву.</dd> + <dd>Якщо значення <code>target</code> дорівнює або більше за <code>arr.length</code>, нічого не скопіюється. Якщо індекс <code>target</code> більший за <code>start</code>, скопійована послідовність буде обрізана відповідно до <code>arr.length</code>.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Індекс (нумерується з 0), з якого потрібно починати копіювання елементів. Якщо він від'ємний, <code>start</code> буде рахуватися з кінця.</dd> + <dd>Якщо параметр <code>start</code> не заданий, <code>copyWithin</code> буде копіювати, починаючи з індекса 0. </dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Індекс (нумерується з 0), на якому потрібно закінчити копіювання елементів. <code>copyWithin</code> копіює до, але не включаючи, <code>end</code>. Якщо індекс від'ємний, <code>end</code> буде рахуватися з кінця.</dd> + <dd>Якщо параметр <code>end</code> не заданий, <code>copyWithin</code> буде копіювати до останнього індекса (за замовченням <code>arr.length</code>).</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Змінений масив.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>copyWithin</code> працює, як <code>memmove</code> у C та C++, і є дуже продуктивним методом для зсунення даних у {{jsxref("Array", "масиві")}}. Це особливо стосується метода {{jsxref("TypedArray/copyWithin", "TypedArray")}} з такою ж самою назвою. Послідовність копіюється та вставляється однією операцією; вставлена послідовність міститиме скопійовані значення, навіть коли ділянки копіювання та вставки накладаються.</p> + +<p>Функція <code>copyWithin</code> є навмисно <em>загальною</em>, вона не вимагає, щоб її <code>this</code> був об'єктом {{jsxref("Array")}}.</p> + +<p>Метод <code>copyWithin</code> є методом модифікації. Він не змінює довжину об'єкта <code>this</code>, але він змінює його зміст та створює нові властивості в разі необхідності.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2); +// [1, 2, 3, 1, 2] + +[1, 2, 3, 4, 5].copyWithin(0, 3); +// [4, 5, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(0, 3, 4); +// [4, 2, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(-2, -3, -1); +// [1, 2, 3, 3, 4] + +[].copyWithin.call({length: 5, 3: 1}, 0, 3); +// {0: 1, 3: 1, length: 5} + +// ES2015 типізовані масиви є підкласами Array +var i32a = new Int32Array([1, 2, 3, 4, 5]); + +i32a.copyWithin(0, 2); +// Int32Array [3, 4, 5, 4, 5] + +// На платформах, які ще не сумісні з ES2015: +[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); +// Int32Array [4, 2, 3, 4, 5] +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js">if (!Array.prototype.copyWithin) { + Object.defineProperty(Array.prototype, 'copyWithin', { + value: function(target, start/*, end*/) { + // Кроки 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Кроки 3-5. + var len = O.length >>> 0; + + // Кроки 6-8. + var relativeTarget = target >> 0; + + var to = relativeTarget < 0 ? + Math.max(len + relativeTarget, 0) : + Math.min(relativeTarget, len); + + // Кроки 9-11. + var relativeStart = start >> 0; + + var from = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Кроки 12-14. + var end = arguments[2]; + var relativeEnd = end === undefined ? len : end >> 0; + + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Крок 15. + var count = Math.min(final - from, len - to); + + // Кроки 16-17. + var direction = 1; + + if (from < to && to < (from + count)) { + direction = -1; + from += count - 1; + to += count - 1; + } + + // Крок 18. + while (count > 0) { + if (from in O) { + O[to] = O[from]; + } else { + delete O[to]; + } + + from += direction; + to += direction; + count--; + } + + // Крок 19. + return O; + }, + configurable: true, + writable: true + }); +}</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('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/entries/index.html b/files/uk/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..b55d83c2e5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,96 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Array/entries +tags: + - Array + - ECMAScript6 + - JavaScript + - Ітератор + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>entries()</strong></code> повертає новий об'єкт ітератора масиву (<code><strong>Array Iterator</strong></code>), який містить пари ключ-значення для кожного індексу в масиві.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>array</var>.entries()</pre> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Новий об'єкт ітератора {{jsxref("Array", "масиву")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Ітерування_за_індексом_та_елементом">Ітерування за індексом та елементом</h3> + +<pre class="brush:js">const a = ['a', 'b', 'c']; + +for (const [index, element] of a.entries()) + console.log(index, element); + +// 0 'a' +// 1 'b' +// 2 'c' +</pre> + +<h3 id="Використання_циклу_for…of">Використання циклу <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a></h3> + +<pre class="brush:js">var a = ['a', 'b', 'c']; +var iterator = a.entries(); + +for (let e of iterator) { + console.log(e); +} +// [0, 'a'] +// [1, 'b'] +// [2, 'c'] +</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('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.entries")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/every/index.html b/files/uk/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..4eb5b229f0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,195 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Global_Objects/Array/every +tags: + - Array + - ECMAScript6 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>every()</strong></code> перевіряє, чи всі елементи масиву відповідають умові, що задана функцією, яка передається як аргумент. Повертає булеве значення.</p> + +<pre class="brush: js">function isBigEnough(element, index, array) { + return element >= 10; +} + +[12, 5, 8, 130, 44].every(isBigEnough); // false +[12, 54, 18, 130, 44].every(isBigEnough); // true</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.every(<var>callback(element[, index[, array]])[, thisArg]</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, яка перевіряє кожен елемент масиву. Приймає три аргументи: + <dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">element</span></font></dt> + <dd>Поточний елемент, який обробляється в масиві.</dd> + <dt><code>index</code> {{Optional_inline}}</dt> + <dd>Індекс поточного елемента, який обробляється в масиві.</dd> + <dt><code>array</code> {{Optional_inline}}</dt> + <dd>Масив для якого був викликаний метод <code>every</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Значення, що використовується як <code>this</code> при виконанні <code>callback</code>.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p><code><strong>true</strong></code>, якщо функція callback повернула {{Glossary("truthy", "правдиве")}} значення для кожного елементу масиву; інакше, <code><strong>false</strong></code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>every</code> виконує функцію <code>callback</code> один раз для кожного елементу масиву поки не знайдено хоча б один елемент, функція <code>callback</code> якого повертає {{Glossary("falsy", "хибне")}} значення. Якщо такий елемент знайдено, метод <code>every </code>одразу повертає <code>false</code>. В іншому ж випадку, якщо функція <code>callback</code> повернула {{Glossary("truthy", "правдиве")}} значення для усіх елементів, <code>every</code> повертає <code>true</code>. Функція <code>callback</code> викликається тільки для тих індексів масиву, які мають присвоєні значення; вона не викликається для тих індексів, котрі були видалені або котрим ніколи не присвоювалися значення.</p> + +<p>Функція <code>callback</code> викликається з трьома аргументами: значення елементу, індекс елементу в масиві і масив по якому робиться перебір.</p> + +<p>Якщо параметр <code>thisArg</code> переданий в <code>every</code>, то він буде використовуватися функцією <code>callback</code> як значення <code>this</code>, коли та буде викликана. В іншому випадку буде передано значення <code>undefined</code> як її значення <code>this</code>. Значення <code>this</code> зрештою видиме для функції <code>callback</code> і визначається відповідно до <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">звичайних правил для визначення this яке видиме функцією</a>.</p> + +<p>Метод <code>every</code> не змінює масив, на якому він був викликаний.</p> + +<p>Діапазон елементів, які обробляються методом <code>every()</code> встановлюється перед першим виконанням функції <code>callback</code>. Елементи, які додаються в масив після того, як метод <code>every()</code>був викликаний, не будуть обходитися функцією <code>callback</code>. Якщо існуючі елементи масиву змінилися, то їхні значення, які передаються в функцію <code>callback</code> будуть значеннями на момент обходу їх методом <code>every()</code>; якщо існуючі елементи масиву видалили, то метод <code>every()</code> обходити їх не буде.</p> + +<p>Метод <code>every</code> схожий за дією на математичний символ "для кожного <img alt="\forall \!\," src="https://wikimedia.org/api/rest_v1/media/math/render/svg/e06890cf9ed539c62153aee819bfd33584ad57d9">". Зокрема, для порожнього масиву він повертає true. (Всі елементи порожнього набору задовольняють будь-якому заданому стану.)</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перевірка_значення_кожного_елементу_масиву">Перевірка значення кожного елементу масиву</h3> + +<p>Даний приклад перевіряє чи всі елементи масиву більші ніж 10.</p> + +<pre class="brush: js">function isBigEnough(element, index, array) { + return element >= 10; +} +[12, 5, 8, 130, 44].every(isBigEnough); // false +[12, 54, 18, 130, 44].every(isBigEnough); // true +</pre> + +<h3 id="Викристання_стрілочних_функцій">Викристання стрілочних функцій</h3> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрілочні функції</a> надають коротший синтаксис для такої ж самої перевірки.</p> + +<pre class="brush: js">[12, 5, 8, 130, 44].every(x => x >= 10); // false +[12, 54, 18, 130, 44].every(x => x >= 10); // true</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Метод <code>every</code> був доданий до ECMA-262 стандарту у 5-ій версії; як такий він може бути не реалізований в усіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, що дозволить використовувати метод <code>every</code> у тих версіях, які не підтримують його початково. Цей алгоритм є саме тим, що зазначений у ECMA-262, 5-ій версії, за умови, що <code>Object</code> і <code>TypeError</code> мають свої первинні значення і що <code>callbackfn.call</code> прирівнюється до первинного значення {{jsxref("Function.prototype.call")}}</p> + +<pre class="brush: js">if (!Array.prototype.every) { + Array.prototype.every = function(callbackfn, thisArg) { + 'use strict'; + var T, k; + + if (this == null) { + throw new TypeError('this дорівнює null або не визначений'); + } + + // 1. Нехай O буде результатом виклику ToObject з передачею значення + // this в якості аргумента. + var O = Object(this); + + // 2. Нехай lenValue буде результатом виклику внутрішнього метода O + // Get з аргументом "length". + // 3. Нехай len буде результатом ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. Якщо IsCallable(callbackfn) повертає false, викинути виняток TypeError. + if (typeof callbackfn !== 'function') { + throw new TypeError(); + } + + // 5. Якщо thisArg було передано, хай T буде thisArg; інакше хай T буде undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Нехай k дорівнює 0. + k = 0; + + // 7. Повторювати, доки k < len + while (k < len) { + + var kValue; + + // а. Нехай Pk буде ToString(k). + // Це неявно для операндів LHS оператора in + // б. Нехай kPresent буде результатом виклику внутрішнього метода + // O HasProperty з аргументом Pk. + // Цей крок можна поєднати з в + // в. Якщо kPresent дорівнює true, тоді + if (k in O) { + + // i. Нехай kValue буде результатом виклику внутрішнього метода + // O Get з аргументом Pk. + kValue = O[k]; + + // ii. Нехай testResult буде результатом виклику внутрішнього метода + // callbackfn Call з T в якості значення this і списком аргументів, + // який містить kValue, k, та O. + var testResult = callbackfn.call(T, kValue, k, O); + + // iii. Якщо ToBoolean(testResult) дорівнює false, повернути false. + if (!testResult) { + return false; + } + } + k++; + } + return true; + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізовано у JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table in 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.every")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("TypedArray.prototype.every()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/fill/index.html b/files/uk/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..666360dc76 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,155 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Reference/Global_Objects/Array/fill +tags: + - Array + - ECMAScript6 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>fill()</strong></code> заповнює (змінює) всі елементи масиву з початкового індексу (за замовчуванням нуль) до кінцевого індексу (за замовчуванням довжина масиву) статичним значенням. Метод повертає змінений масив.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.fill(<var>value[</var>, <var>start[<var>, <var>end]]</var>)</var></var> +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Величина, якою потрібно заповнити масив.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Початковий індекс, за замовчуванням 0.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Кінцевий індекс, за замовчуванням <code>this.length</code>.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Змінений масив.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>fill</code> приймає три аргументи: <code>value</code>, <code>start</code> та <code>end</code>. Аргументи <code>start</code> та <code>end</code> є необов'язковими й за замовчуванням дорівнюють <code>0</code> та значенню <code>length</code> об'єкта <code>this</code>.</p> + +<p>Якщо значення <code>start</code> є від'ємним, воно сприймається як <code>length+start</code>, де <code>length</code> - це довжина масиву. Якщо значення <code>end</code> є від'ємним, воно сприймається як <code>length+end</code>.</p> + +<p>Метод <code>fill</code> є навмисно загальним, він не вимагає, щоб значенням <code>this</code> був об'єкт Array.</p> + +<p><code>fill</code> є методом модифікації, він змінить сам об'єкт <code>this</code> та поверне його, а не просто його копію.</p> + +<p>Коли у <code>fill</code> передається об'єкт, він копіює посилання та заповнює масив посиланнями на цей об'єкт.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4] +[1, 2, 3].fill(4, 1); // [1, 4, 4] +[1, 2, 3].fill(4, 1, 2); // [1, 4, 3] +[1, 2, 3].fill(4, 1, 1); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 3); // [1, 2, 3] +[1, 2, 3].fill(4, -3, -2); // [4, 2, 3] +[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 5); // [1, 2, 3] +Array(3).fill(4); // [4, 4, 4] +[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3} + +// Об'єкти за посиланнями. +var arr = Array(3).fill({}) // [{}, {}, {}]; +arr[0].hi = "привіт"; // [{ hi: "привіт" }, { hi: "привіт" }, { hi: "привіт" }] +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js">if (!Array.prototype.fill) { + Object.defineProperty(Array.prototype, 'fill', { + value: function(value) { + + // Кроки 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Кроки 3-5. + var len = O.length >>> 0; + + // Кроки 6-7. + var start = arguments[1]; + var relativeStart = start >> 0; + + // Крок 8. + var k = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Кроки 9-10. + var end = arguments[2]; + var relativeEnd = end === undefined ? + len : end >> 0; + + // Крок 11. + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Крок 12. + while (k < final) { + O[k] = value; + k++; + } + + // Крок 13. + return O; + } + }); +} +</pre> + +<p>Якщо вам потрібно підтримувати зовсім застарілі рушії JavaScript, які не підтримують <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, краще взагалі не використовувати поліфіли методів <code>Array.prototype</code>, оскільки ви не зможете зробити їх не перелічуваними.</p> + +<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('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.fill")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray.prototype.fill()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/filter/index.html b/files/uk/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..e36b7abc4d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,235 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +tags: + - Array + - ECMAScript5 + - JavaScript + - Prototype + - polyfill + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>filter()</strong></code> створює новий масив з усіма елементами, що пройшли перевірку вказаною функцією.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div> + +<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])</var></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція-<abbr title="предикат">присудок</abbr>, що перевіряє кожен елемент масиву та повертає <code>true</code>, щоб зберегти елемент, або <code>false</code>, щоб видалити. Приймає три аргументи:</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd>Значення чергового елемента масиву.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Індекс чергового елемента в масиві.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Масив, до якого застосовано <code>filter()</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Значення, що використовується як <code><strong>this</strong></code>, коли викликається <code>callback</code>.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Новий масив з елементами, що пройшли пере́вірку. Якщо жоден елемент не пройшов перевірку, повертає порожній масив.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>filter()</code> перебирає всі елементи масиву за зростанням індексу, викликає для кожного функцію <code>callback</code>, та створює новий масив зі значень, для яких виклик <code>callback</code> повертає {{glossary("Truthy", "істинне значення")}}. Метод оминає властивості, які було видалено або не було <abbr title="ініціалізовано">започатковано</abbr> — в розріджених масивах.</p> + +<p>Функція <code>callback</code> викликається з трьома аргументами:</p> + +<ul> + <li>значення елемента;</li> + <li>індекс елемента;</li> + <li>масив по якому робиться обхід.</li> +</ul> + +<p>Якщо для <code>filter()</code> вказано параметр <code>thisArg</code>, його буде використано як <code>this</code> для функції <code>callback</code>. Інакше буде використано значення {{jsxref("undefined")}}. Зрештою, значення <code>this</code> для функції <code>callback</code> визначатиметься відповідно до <a href="/uk/docs/Web/JavaScript/Reference/Operators/this" rel="nofollow">загальних правил</a>.</p> + +<p>Метод <code>filter()</code> не змінює масив, на якому його викликано.</p> + +<p>Множина індексів елементів, що їх перебиратиме <code>filter()</code>, з'ясовується ще до першого виклику <code>callback</code>. Елементи, додані після здійснення виклику <code>filter()</code>, буде знехтувано. Якщо наявні елементи масиву було змінено або видалено, до функції <code>callback</code> потрапить те значення елемента, яке він мав безпосередньо перед відповідним викликом <code>callback</code>. Видалені елементи опрацьовано не буде.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Вилучення_замалих_чисел">Вилучення замалих чисел</h3> + +<p>Наведений приклад за допомогою метода <code>filter()</code> створює новий масив, що міститиме лише числа, які перевищують 10:</p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} + +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered дорівнює [12, 130, 44] +</pre> + +<h3 id="Фільтрування_неправильних_записів_з_JSON">Фільтрування неправильних записів з JSON</h3> + +<p>Цей приклад використовує метод <code>filter()</code>, щоб створити відфільтрований JSON з усіх елементів, які мають ненульове, числове значення <code>id</code>:</p> + +<pre class="brush: js">var arr = [ + { id: 15 }, + { id: -1 }, + { id: 0 }, + { id: 3 }, + { id: 12.2 }, + { }, + { id: null }, + { id: NaN }, + { id: 'undefined' } +]; + +var invalidEntries = 0; + +function isNumber(obj) { + return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj); +} + +function filterByID(item) { + if (isNumber(item.id) && item.id !== 0) { + return true; + } + invalidEntries++; + return false; +} + +var arrByID = arr.filter(filterByID); + +console.log('Відфільтрований масив\n', arrByID); +// Відфільтрований масив +// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }] + +console.log('Кількість неправильних записів = ', invalidEntries); +// Кількість неправильних записів = 5</pre> + +<h3 id="Пошук_у_масиві">Пошук у масиві</h3> + +<p>Цей приклад використовує <code>filter()</code>, щоб відфільтрувати масив за пошуковим критерієм:</p> + +<pre class="brush: js">var fruits = ['яблуко', 'банан', 'виноград', 'манго', 'кокос']; + +/** + * Фільтрувати елементи масиву за пошуковим критерієм (запитом) + */ +function filterItems(arr, query) { + return arr.filter(function(el) { + return el.toLowerCase().indexOf(query.toLowerCase()) !== -1; + }) +} + +console.log(filterItems(fruits, 'ко')); // ['яблуко', 'кокос'] +console.log(filterItems(fruits, 'ан')); // ['банан', 'манго']</pre> + +<h4 id="Реалізація_ES2015">Реалізація ES2015</h4> + +<pre class="brush: js">const fruits = ['яблуко', 'банан', 'виноград', 'манго', 'кокос']; + +/** +* Фільтрувати елементи масиву за пошуковим критерієм (запитом) +*/ +const filterItems = (arr, query) => { + return arr.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) !== -1); +}; + +console.log(filterItems(fruits, 'ко')); // ['яблуко', 'кокос'] +console.log(filterItems(fruits, 'ан')); // ['банан', 'манго']</pre> + +<h2 id="Запасний_варіант_(поліфіл)">Запасний варіант (поліфіл)</h2> + +<p>Метод <code>filter()</code> був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній у всіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наведений нижче код на початку ваших скриптів, це дозволить використовувати <code>filter()</code> у версіях ECMA-262, які не підтримують його початково. Цей алгоритм є точним еквівалентом впровадженого у 5-й версії ECMA-262, за умови, що <code>fn.call</code> відповідає початковому значенню {{jsxref("Function.prototype.bind()")}}, і {{jsxref("Array.prototype.push()")}} не було змінено.</p> + +<pre class="brush: js">if (!Array.prototype.filter) { + Array.prototype.filter = function(func, thisArg) { + 'use strict'; + if (!((typeof func === 'Function' || typeof func === 'function') && this) ) + throw new TypeError(); + + var len = this.length >>> 0, + res = new Array(len), // попередньо створений масив + t = this, c = 0, i = -1; + + var kValue; + if (thisArg === undefined){ + while (++i !== len){ + // перевіряє, чи заданий ключ + if (i in this){ + kValue = t[i]; // у цьому випадку t змінюється у функції callback + if (func(t[i], i, t)){ + res[c++] = kValue; + } + } + } + } + else { + while (++i !== len) { + // перевіряє, чи заданий ключ + if (i in this){ + kValue = t[i]; + if (func.call(thisArg, t[i], i, t)){ + res[c++] = kValue; + } + } + } + } + + res.length = c; // зменшити масив до правильного розміру + return res; + }; +}</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('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкова виознака. Запроваджено у JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<div>{{Compat("javascript.builtins.Array.filter")}}</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/find/index.html b/files/uk/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..a08566da73 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,233 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Array/find +tags: + - Array + - JavaScript + - Method + - Prototype + - polyfill + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>find()</code></strong> повертає <strong>значення</strong> <strong>першого елемента </strong>в масиві, що задовільняє передану функцію тестування. Інакше вертається {{jsxref("undefined")}}.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-find.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<p>Зверніть увагу також на метод {{jsxref("Array.prototype.findIndex", "findIndex()")}}, що натомість повертає <strong>індекс</strong> знайденого елемента масиву, а не значення.</p> + +<p>Якщо вам необхідно знайти позицію елемента або дізнатись, чи існує елемент в масиві, використовуйте {{jsxref("Array.prototype.indexOf()")}} або {{jsxref("Array.prototype.includes()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>arr.find(callback(element[, index[, array]])[, thisArg])</var></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, що виконується для кожного значення в масиві і приймає три аргументи: + <dl> + <dt><code>element</code></dt> + <dd>Значення поточного елемента масиву.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Індекс поточного елемента масиву.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Масив, для якого було викликано <code>find</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd>Необов'язковий об'єкт, що використовується в якості <code>this</code> при виконанні <code>callback</code>.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p><strong>Значення</strong> <strong>першого елемента</strong> в масиві, який задовольняє надану перевірочну функцію. Інакше повертається {{jsxref("undefined")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>find</code> виконує функцію <code>callback</code> один раз для кожного елемента в масиві, аж поки не буде знайдено такий, для якого <code>callback</code> повертає <a href="/uk/docs/Glossary/Truthy">правдиве значення</a>. Щойно такий елемент знайдено, <code>find</code> одразу ж повертає значення цього елемента. В іншому випадку, <code>find</code> повертає {{jsxref("undefined")}}. Функція <code>callback</code> викликається для кожного індексу масиву з <code>0</code> по <code>length - 1</code> і виконується для усіх елементів, не лише для тих, які мають присвоєні значення. Це означає, що цей метод може бути менш ефективним для розріджених масивів у порівнянні з методами, які обробляють лише ті, елементи, яким присвоєні значення.</p> + +<p>Функція <code>callback</code> викликається з трьома аргументами: значення елемента, індекс елемента і об'єкт <code>Array</code>, перебір якого здійснюється.</p> + +<p>Якщо параметр <code>thisArg</code> передано до <code>find</code>, його буде використано як <code>this</code> для кожного виклику <code>callback</code>. Якщо його не передано, тоді використовуватиметься {{jsxref("undefined")}}.</p> + +<p>Метод <code>find()</code> не змінює масив, для якого викликається.</p> + +<p>Діапазон елементів, що їх має обробити <code>find</code>, визначається ще до першого виклику функції <code>callback</code>. Тому <code>callback</code> не обробляє елементи, додані до масиву після того, як почалося виконання <code>find</code>. Якщо існуючий, ще не опрацьований елемент масиву, змінюється функцією <code>callback</code>, його значення, що передається до <code>callback</code>, буде значенням на той момент, коли <code>find</code> доходить до індексу цього елемента. Видалені елементи все одно опрацьовуються.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Знайти_обєкт_в_масиві_за_однією_з_його_властивостей">Знайти об'єкт в масиві за однією з його властивостей</h3> + +<pre class="brush: js notranslate">var inventory = [ + {name: 'яблука', quantity: 2}, + {name: 'банани', quantity: 0}, + {name: 'вишні', quantity: 5} +]; + +function findCherries(fruit) { + return fruit.name === 'вишні'; +} + +console.log(inventory.find(findCherries)); +// виводить { name: 'вишні', quantity: 5 } +</pre> + +<h4 id="Використання_стрілочної_функції_ES2015">Використання стрілочної функції ES2015</h4> + +<pre class="brush: js notranslate">const inventory = [ + {name: 'яблука', quantity: 2}, + {name: 'банани', quantity: 0}, + {name: 'вишні', quantity: 5} +]; + +const result = inventory.find( fruit => fruit.name === 'вишні' ); + +console.log(result) // { name: 'вишні', quantity: 5 } +</pre> + +<h3 id="Знайти_просте_число_у_масиві">Знайти просте число у масиві</h3> + +<p>Наступний приклад знаходить елемент у масиві, який є простим числом (або повертає {{jsxref("undefined")}}, якщо простого числа немає):</p> + +<pre class="brush: js notranslate">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +[4, 6, 8, 12].find(isPrime); // вертає undefined, простих чисел не знайдено +[4, 5, 8, 12].find(isPrime); // вертає 5 +</pre> + +<p>Наступні приклади демонструють, що неіснуючі та видалені елементи теж опрацьовуються, і що значення, передане до функції зворотного виклику - це їхнє значення на момент перевірки.</p> + +<pre class="brush: js notranslate">// Створити масив без елементів за індексами 2, 3 та 4 +const array = [0,1,,,,5,6]; + +// Виводить всі індекси, не лише ті, які мають присвоєні значення +array.find(function(value, index) { + console.log('Індекс ' + index + ' має значення ' + value); +}); + +// Виводить всі індекси, в тому числі видалені +array.find(function(value, index) { + + // Видалити елемент 5 в першій ітерації + if (index == 0) { + console.log('Видалення елемента array[5] зі значенням ' + array[5]); + delete array[5]; + } + // Елемент 5 перевіряється, хоч і був видалений + console.log('Індекс ' + index + ' має значення ' + value); +}); +// очікуваний результат: +// Видалення елемента array[5] зі значенням 5 +// Індекс 0 має значення 0 +// Індекс 1 має значення 1 +// Індекс 2 має значення undefined +// Індекс 3 має значення undefined +// Індекс 4 має значення undefined +// Індекс 5 має значення undefined +// Індекс 6 має значення 6 +</pre> + +<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2> + +<p>Цей метод був доданий у ECMAScript 2015, тож, можливо, поки наявний не у всякій реалізації JavaScript. Проте, ви можете використати наступний код для забезпечення запасного варіанту <code>Array.prototype.find</code>:</p> + +<pre class="brush: js notranslate">// https://tc39.github.io/ecma262/#sec-array.prototype.find +if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, 'find', { + value: function(predicate) { + // 1. Нехай O дорівнює ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Нехай len дорівнює ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. Якщо IsCallable(predicate) дорівнює false, викинути виняток TypeError. + if (typeof predicate !== 'function') { + throw new TypeError('предикат має бути функцією'); + } + + // 4. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined. + var thisArg = arguments[1]; + + // 5. Нехай k дорівнює 0. + var k = 0; + + // 6. Повторювати, поки k < len + while (k < len) { + // a. Нехай Pk дорівнює ! ToString(k). + // b. Нехай kValue дорівнює ? Get(O, Pk). + // c. Нехай testResult дорівнює ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. Якщо testResult дорівнює true, повернути kValue. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return kValue; + } + // e. Збільшити k на 1. + k++; + } + + // 7. Повернути undefined. + return undefined; + } + }); +} +</pre> + +<p>Якщо вам потрібно забезпечити підтримку вкрай застарілих рушіїв JavaScript, в яких відсутня підтримка <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, було б краще взагалі не додавати методів до <code>Array.prototype</code> через відсутність можливості заборонити їх перебір.</p> + +<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('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table in 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.find")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/findindex/index.html b/files/uk/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..550a072e19 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,187 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex +tags: + - Array + - ECMAScript6 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <code><strong>findIndex()</strong></code> повертає <strong>індекс</strong> першого елемента у масиві, <strong>який задовольняє надану перевірочну функцію</strong>. Інакше повертаєтсья -1, зазначаючи, що жодний елемент не пройшов перевірку.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div> + + + +<p>Дивіться також метод {{jsxref("Array.find", "find()")}}, який повертає <strong>значення</strong> елемента масиву замість індексу.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.findIndex<code>(callback(element[, index[, array]])[, thisArg])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, яка виконується на кожному значенні масиву, поки не поверне <code>true</code>, зазначаючи, що відповідний елемент знайдений. Вона приймає три аргументи: + <dl> + <dt><code>element</code></dt> + <dd>Поточний елемент масиву, який обробляється.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Індекс поточного елементу, що обробляється.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Масив, для якого був викликаний метод <code>findIndex</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Необов'язковий об'єкт для використання у якості <code>this</code> під час виконання <code>callback</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Індекс першого елемента у масиві, який успішно пройшов перевірку. Інакше <strong>-1</strong>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>findIndex</code> виконує функцію <code>callback</code> один раз для кожного індексу <code>0..length-1</code> (включно) у масиві, поки не знайде той, для якого <code>callback</code> поверне правдиве значення (таке, що <a href="/uk/docs/Glossary/Type_Conversion">приводиться</a> до <code>true</code>).</p> + +<p>Якщо такий елемент знайдено, <code>findIndex</code> негайно повертає його індекс. Якщо функція зворотного виклику так і не повертає правдиве значення (або довжина масиву <code>length</code> дорівнює 0), <code>findIndex</code> повертає -1. На відміну від інших методів масивів, таких як {{jsxref("Array.some")}}, <code>callback</code> <strong>викликається</strong> навіть для індексів, що не мають значень.</p> + +<p><code>callback</code> викликається з трьома аргументами:</p> + +<ol> + <li>Значення елемента</li> + <li>Індекс елемента</li> + <li>Об'єкт Array, який перебирається</li> +</ol> + +<p>Якщо параметр <code>thisArg</code> передається до <code>findIndex</code>, він буде використаний у якості <code>this</code> всередині кожного виклику <code>callback</code>. Якщо він не наданий, то використовується {{jsxref("undefined")}}.</p> + +<p>Діапазон елементів, які опрацьовує <code>findIndex</code>, встановлюється до першого виклику <code>callback</code>. <code>callback</code> не обробляє елементи, додані до масиву після того, як почалося виконання <code>findIndex</code>. Якщо існуючий, ще не опрацьований елемент масиву змінюється функцією <code>callback</code>, його значення, що передається до <code>callback</code> буде значенням на той момент, коли <code>findIndex</code> доходить до індексу цього елементу. <a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">Видалені</a> елементи все одно опрацьовуються.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Знайти_індекс_простого_числа_у_масиві">Знайти індекс простого числа у масиві</h3> + +<p>Наступний приклад повертає індекс першого елементу у масиві, який є простим числом, або -1, якщо там нема жодного простого числа.</p> + +<pre class="brush: js">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start < 1) { + return false; + } else { + start++; + } + } + return element > 2; +} + +console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, не знайдено +console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 (array[2] дорівнює 7) +</pre> + +<h3 id="Знайти_індекс_використувуючи_стрілочну_функцію">Знайти індекс, використувуючи стрілочну функцію</h3> + +<p>Наступний приклад знаходить індекс фрукта, використувуючи стрілочну функцію:</p> + +<pre class="brush: js">const fruits = ["яблуко", "банан", "диня", "чорниці", "грейпфрут"]; + +const index = fruits.findIndex(fruit => fruit === "чорниці"); + +console.log(index); // 3 +console.log(fruits[index]); // чорниці +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findindex +if (!Array.prototype.findIndex) { + Object.defineProperty(Array.prototype, 'findIndex', { + value: function(predicate) { + // 1. Нехай O дорівнює ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Нехай len дорівнює ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. Якщо IsCallable(predicate) дорівнює false, викинути виняток TypeError. + if (typeof predicate !== 'function') { + throw new TypeError('предикат має бути функцією'); + } + + // 4. Якщо наданий thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined. + var thisArg = arguments[1]; + + // 5. Нехай k дорівнює 0. + var k = 0; + + // 6. Повторювати, поки k < len + while (k < len) { + // a. Нехай Pk дорівнює ! ToString(k). + // b. Нехай kValue дорівнює ? Get(O, Pk). + // c. Нехай testResult дорівнює ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. Якщо testResult дорівнює true, повернути k. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return k; + } + // e. Збільшити k на 1. + k++; + } + + // 7. Повернути -1. + return -1; + }, + configurable: true, + writable: true + }); +} +</pre> + +<p>Якщо вам потрібно підтримувати зовсім застарілі рушії JavaScript, які не підтримують <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, краще взагалі не використовувати поліфіли методів <code>Array.prototype</code>, оскільки ви не зможете зробити їх не перелічуваними.</p> + +<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('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.findIndex")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/flat/index.html b/files/uk/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..ff20a8d058 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,150 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Reference/Global_Objects/Array/flat +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>flat()</strong></code> створює новий масив який містить всі елементи вкладених масивів до вказаної глибини.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p> + + + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<em>[</em><var>depth]</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>depth</code> {{optional_inline}}</dt> + <dd>Глибина, що вказує до якого рівня вкладеності масивів має відбуватись вирівнювання. За замовчуванням 1.</dd> +</dl> + +<h3 id="Вихідне_значення">Вихідне значення</h3> + +<p>Новий масив, що містить елементи вкладених масивів.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Вирівнювання_вкладених_масивів">Вирівнювання вкладених масивів</h3> + +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); +// [1, 2, 3, 4] + +var arr2 = [1, 2, [3, 4, [5, 6]]]; +arr2.flat(); +// [1, 2, 3, 4, [5, 6]] + +var arr3 = [1, 2, [3, 4, [5, 6]]]; +arr3.flat(2); +// [1, 2, 3, 4, 5, 6] +</pre> + +<h3 id="Вирівнювання_і_прогалини_в_масиві">Вирівнювання і прогалини в масиві</h3> + +<p>Метод <code>flat</code> видаляє порожні елементи масивів:</p> + +<pre class="brush: js">var arr4 = [1, 2, , 4, 5]; +arr4.flat(); +// [1, 2, 4, 5] +</pre> + +<h2 id="Альтернатива">Альтернатива</h2> + +<h3 id="reduce_і_concat"><code>reduce</code> і <code>concat</code></h3> + +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); + +//вирівняти один рівень масиву +arr1.reduce((acc, val) => acc.concat(val), []); // [1, 2, 3, 4] + +//або +const flatSingle = arr => [].concat(...arr);</pre> + +<pre class="brush: js">//щоб здійснити глибоке вирівнювання, використовуйте рекурсію з reduce і concat +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; + +function flattenDeep(arr1) { + return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); +} +flattenDeep(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] +</pre> + +<pre class="brush: js">//глибоке вирівнювання без рекурсії, використовуючи stack +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; +function flatten(input) { + const stack = [...input]; + const res = []; + while (stack.length) { + // викидаємо значення зі стеку + const next = stack.pop(); + if (Array.isArray(next)) { + // додаємо елементи масиву, не змінюючи вхідного масиву + stack.push(...next); + } else { + res.push(next); + } + } + //перевертаємо масив, щоб порядок сортування відповідав вхідному + return res.reverse(); +} +flatten(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]</pre> + +<pre class="brush: js">//глибоке вирівнювання з рекурсією +function flatten(array) { + var flattend = []; + (function flat(array) { + array.forEach(function(el) { + if (Array.isArray(el)) flat(el); + else flattend.push(el); + }); + })(array); + return flattend; +}</pre> + +<div class="hidden"> +<p>Будь ласка, не додавайте поліфіли в цю статтю. За довідкою дивіться: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td> + <td>Finished (4)</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flat")}}</p> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatMap()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html b/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html new file mode 100644 index 0000000000..58033475d1 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html @@ -0,0 +1,152 @@ +--- +title: Array.prototype.flatMap() +slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap +tags: + - Array + - JavaScript + - flatMap + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>flatMap()</strong></code> спочатку виконує надану функцію на кожному елементі, а після цього вирівнює отриманий результат і зберігає його у новий масив. Це аналогічно послідовному виклику {{jsxref("Array.prototype.map","map()")}} та {{jsxref("Array.prototype.flat","flat()")}} з глибиною 1, але <code>flatMap()</code> буває доволі корисним, оскільки об'єднання обох методів у один є трохи ефективнішим.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) { + // повернути елемент для нового масиву new_array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, яка створює елемент для нового масиву. Приймає три аргументи: + <dl> + <dt></dt> + <dt><code>currentValue</code></dt> + <dd>Поточний елемент масиву, що обробляється.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Індекс поточного елемента, що обробляється.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Масив, для якого був викликаний метод <code>flatMap</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Значення, що використовується як <code>this</code> під час виконання <code>callback</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий масив, в якому кожний елемент є результатом виклику функції <code>callback</code>, вирівняний до глибини 1.</p> + +<h2 id="Опис">Опис</h2> + +<p>Дивіться детальний опис функції зворотного виклику у {{jsxref("Array.prototype.map()")}}. Метод <code>flatMap</code> є ідентичним послідовному виклику методів <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> та <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> з глибиною 1.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="map()_та_flatMap()"><code>map()</code> та <code>flatMap()</code></h3> + +<pre class="brush: js">let arr1 = [1, 2, 3, 4]; + +arr1.map(x => [x * 2]); +// [[2], [4], [6], [8]] + +arr1.flatMap(x => [x * 2]); +// [2, 4, 6, 8] + +// вирівнюється тільки один рівень +arr1.flatMap(x => [[x * 2]]); +// [[2], [4], [6], [8]] +</pre> + +<p>В той час як наведений вище результат міг бути отриманий використанням самого <code>map</code>, нижче приклад, який краще демонструє використання <code>flatMap</code>.</p> + +<p>Давайте створимо список слів зі списку речень.</p> + +<pre class="brush: js">let arr1 = ["Сьогодні сонячно у", "", "Львові"]; + +arr1.map(x => x.split(" ")); +// [["Сьогодні","сонячно","у"],[""],["Львові"]] + +arr1.flatMap(x => x.split(" ")); +// ["Сьогодні","сонячно","у", "", "Львові"]</pre> + +<p>Зверніть увагу, що довжина результуючого списку може відрізнятися від довжини початкового списку.</p> + +<h3 id="Для_додавання_та_видалення_елементів_під_час_виконання_map()">Для додавання та видалення елементів під час виконання <code>map()</code></h3> + +<p>Метод <code>flatMap</code> можна використовувати, щоб додавати та видаляти елементи (змінювати кількість елементів) під час виконання <code>map</code>. Іншими словами, він дозволяє кожен з множини елементів перетворювати на множину елементів (обробляючи кожен елемент окремо), а не завжди <em>1-1</em>. В цьому плані він протилежність метода <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter</a>. Просто поверніть 1-елементний масив, щоб залишити елемент, багатоелементний масив, щоб додати елементи, або порожній масив, щоб видалити елемент.</p> + +<pre class="brush: js">// Припустимо, ми бажаємо видалити всі від'ємні числа та розбити непарні числа на парне число та 1 +let a = [5, 4, -3, 20, 17, -33, -4, 18] +// |\ \ x | | \ x x | +// [4,1, 4, 20, 16, 1, 18] + +a.flatMap( (n) => + (n < 0) ? [] : + (n % 2 == 0) ? [n] : + [n-1, 1] +) + +// очікуваний результат: [4, 1, 4, 20, 16, 1, 18] +</pre> + +<h2 id="Альтернатива">Альтернатива</h2> + +<h3 id="reduce()_та_concat()"><code>reduce()</code> та <code>concat()</code></h3> + +<pre class="brush: js">var arr1 = [1, 2, 3, 4]; + +arr1.flatMap(x => [x * 2]); +// є еквівалентом +arr1.reduce((acc, x) => acc.concat([x * 2]), []); +// [2, 4, 6, 8] +</pre> + +<p>Зауважте, однак, що цей метод краще не застосовувати для великих масивів, бо він буде неефективним: на кожній ітерації він створює новий тимчасовий масив, який треба прибирати збирачу сміття, і він копіює елементи з поточного масива-накопичувача у новий масив замість того, щоб просто додати нові елементи у існуючий масив.</p> + +<div class="hidden"> +<p>Будь ласка, не додавайте поліфіли у цю статтю. За довідкою, звертайтесь: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Комент</th> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flatMap"><code>Array.prototype.flatMap</code></a></td> + <td>Завершено (4)</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flatMap")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.flat()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/foreach/index.html b/files/uk/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..97a354787f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,290 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Array/forEach +tags: + - ECMAScript5 + - JavaScript + - Method + - Prototype + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>forEach()</strong></code> виконує надану функцію один раз для кожного елемента масиву.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);</var></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, що виконується для кожного елемента. Приймає три аргументи:</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>Черговий елемент масиву, що обробляється.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>Індекс чергового елемента в масиві.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>Масив, для якого було викликано <code>forEach()</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd> + <p>Значення, що використовується як <code><strong>this</strong></code> при виконанні <code>callback</code>.</p> + </dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p><code>undefined</code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>forEach()</code> викликає надану функцію <code>callback</code> для кожного елемента масиву у порядку зростання. Оминає властивості, які було видалено або не було <abbr title="ініціалізовано">започатковано</abbr> (тобто, в розріджених масивах, <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#sparseArray">дивіться приклад, наведений нижче</a>).</p> + +<p>Функція <em><code>callback</code></em> викликається з трьома аргументами:</p> + +<ol> + <li>значення елемента;</li> + <li>індекс елемента;</li> + <li>масив, що перебирається.</li> +</ol> + +<p>Якщо для <code>forEach()</code> вказано параметр <em><code>thisArg</code></em>, його буде використано як <code>this</code> для функції <code>callback</code>. Зрештою значення <code>this</code> для функції <em><code>callback</code></em> визначатиметься відповідно до <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">загальних правил</a>.</p> + +<p>Множина індексів елементів, що їх перебиратиме <code>forEach()</code> з'ясовується ще до першого виклику <em><code>callback</code></em>. Елементи, додані після здійснення виклику <code>forEach()</code>, буде знехтувано (<em><code>callback</code></em> для жодного з них не викликатиметься). Якщо змінити або видалити якийсь з елементів масиву, до функції <code>callback</code> потрапить те значення елемента, яке він мав безпосередньо перед відповідним викликом <code>callback</code>. Якщо елемент видалено до відвідування, відвідано не буде. Якщо вже відвіданий елемент видалено упродовж перебирання (наприклад, за допомогою {{jsxref("Array.prototype.shift()", "shift()")}}), подальші елементи будуть пропущені — <a href="#Якщо_масив_змінено_під_час_перебору_деякі_елементи_може_бути_пропущено">дивіться приклади нижче у статті</a>.</p> + +<p>Метод <code>forEach()</code> виконує функцію <em><code>callback</code></em> один раз для кожного елемента масиву. На відміну від {{jsxref("Array.prototype.map()", "map()")}} чи {{jsxref("Array.prototype.reduce()", "reduce()")}}, він завжди вертає значення {{jsxref("undefined")}}, тож продовжити ланцюжок викликів після нього неможливо. Досить типовим є виклик <code>forEach()</code> наприкінці ланцюжка методів з метою виконання додаткових дій.</p> + +<p>Сам метод <code>forEach()</code> не змінює масив, на якому його викликано, втім усередині функції <em><code>callback</code></em> це можливо.</p> + +<div class="note"> +<p><strong>Заувага:</strong> Зупинити чи перервати цикл <code>forEach()</code> неможливо без викидання винятку. Якщо вам це потрібно, метод <code>forEach()</code> — не ліпший вибір. </p> + +<p>Завчасне переривання може бути виконане за допомогою:</p> + +<ul> + <li>Простого циклу <a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a></li> + <li>Циклів <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> / <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> + +<p>Методи масивів: {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}} та {{jsxref("Array.prototype.findIndex()", "findIndex()")}} перевіряють елементи масиву функцією-предикатом, яка повертає правдиве значення, якщо наступна ітерація необхідна.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="sparseArray" name="sparseArray">Операція не виконується для неініціалізованих значень (розріджені масиви)</h3> + +<pre class="brush: js">const arraySparse = [1,3,,7]; +let numCallbackRuns = 0; + +arraySparse.forEach(function(element){ + console.log(element); + numCallbackRuns++; +}); + +console.log("numCallbackRuns: ", numCallbackRuns); + +// 1 +// 3 +// 7 +// numCallbackRuns: 3 +// коментар: як бачите, пропущене значення між 3 та 7 не викликало функцію.</pre> + +<h3 id="Перетворення_циклу_for_на_forEach">Перетворення циклу for на forEach</h3> + +<pre class="brush: js">const items = ['щось', 'то', 'має', 'бути']; +const copy = []; + +// було +for (let i = 0; i < items.length; i++) { + copy.push(items[i]) +} + +// стане +items.forEach(function(item) { + copy.push(item) +});</pre> + +<h3 id="Друк_вмісту_масиву">Друк вмісту масиву</h3> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Для того, щоб відобразити вміст масиву у консолі, ви можете скористатись методом {{domxref("Console/table", "console.table()")}}, який виведе відформатовану версію масиву. Наступний приклад ілюструє інший спосіб це зробити, за допомогою <code>forEach()</code>.</p> +</div> + +<p>Наведений код виводить значення кожного елемента масиву з нового рядка:</p> + +<pre class="brush:js">function logArrayElements(element, index, array) { + console.log('array[' + index + '] = ' + element); +} + +// Завважте, що індекс 2 буде пропущено, +// позаяк елемента на тому місці в масиві немає. +[2, 5, , 9].forEach(logArrayElements); + +// Буде виведено у консоль: +// array[0] = 2 +// array[1] = 5 +// array[3] = 9 +</pre> + +<h3 id="Використання_thisArg">Використання <em><code>thisArg</code></em></h3> + +<p>Наведений приклад змінює властивості об'єкта відповідно до кожного елемента в отриманому масиві:</p> + +<pre class="brush:js">function Counter() { + this.sum = 0; + this.count = 0; +} + +Counter.prototype.add = function(array) { + array.forEach(function(entry) { + this.sum += entry; + ++this.count; + }, this); + // ^---- Зверніть увагу! +}; + +const obj = new Counter(); +obj.add([2, 5, 9]); +obj.count; +// 3 +obj.sum; +// 16 +</pre> + +<p>Оскільки для <code>forEach()</code> вказано параметр <code>thisArg</code>, для кожного виклику <code>callback</code> (тут безіменної функції) він вживатиметься як <code>this</code>.</p> + +<div class="note"> +<p>Якщо передавати аргумент функції за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкового запису функції</a>, то параметр <em><code>thisArg</code></em> можна не вказувати, позаяк стрілкова функція лексично прив'язує значення {{jsxref("Operators/this", "this")}}.</p> +</div> + +<h3 id="Функція_копіювання_об'єкта">Функція копіювання об'єкта</h3> + +<p>Наступний код створює копію наданого об'єкта. Існує чимало способів створення копії об'єкта. Наведений приклад є лише одним з них і насправді призначений лише для наочного пояснення того, як працює <code>Array.prototype.forEach()</code> на прикладі використання нових функцій ECMAScript 5 з <code>Object.*</code> для роботи з керованими властивостями:</p> + +<pre class="brush: js">function copy(obj) { + const copy = Object.create(Object.getPrototypeOf(obj)); + const propNames = Object.getOwnPropertyNames(obj); + + propNames.forEach(function(name) { + const desc = Object.getOwnPropertyDescriptor(obj, name); + Object.defineProperty(copy, name, desc); + }); + + return copy; +} + +const obj1 = {a: 1, b: 2}; +const obj2 = copy(obj1); // obj2 тепер схожий на obj1 +</pre> + +<h3 id="Якщо_масив_змінено_під_час_перебору_інші_елементи_може_бути_пропущено">Якщо масив змінено під час перебору, інші елементи може бути пропущено</h3> + +<p>Наведений приклад виводить у консоль послідовно "перший", "другий" та "четвертий". Коли перебір сягне другого елемента (що має значення "другий"), виклик <code>words.shift()</code> видалить перший елемент масиву, а всі, що лишаться, посунуться на одне місце ліворуч — "четвертий" стане наступним (після поточного), і "третій" таким чином буде пропущено:</p> + +<pre class="brush:js">var words = ['перший', 'другий', 'третій', 'четвертий']; + +words.forEach(function(word) { + console.log(word); + + if (word === 'другий') { + words.shift(); + } +}); + +// перший +// другий +// четвертий +</pre> + +<h3 id="Вирівнювання_масиву">Вирівнювання масиву</h3> + +<p>Даний приклад наведено суто для навчальння. Якщо вам потрібно вирівняти масив вбудованими методами, ви можете скористатись методом {{jsxref("Array.prototype.flat()")}} (очікується у ES2019 та вже реалізований у деяких переглядачах).</p> + +<pre class="brush: js">/** +* Вирівнює переданий масив у одномірний +* +* @params {array} arr +* @returns {array} +*/ +function flatten(arr) { + const result = []; + + arr.forEach((i) => { + if (Array.isArray(i)) { + result.push(...flatten(i)) + } else { + result.push(i) + } + }); + + return result; +} + +// Використання +const problem = [1, 2, 3, [4, 5, [6, 7], 8, 9]] + +flatten(problem) // [1, 2, 3, 4, 5, 6, 7, 8, 9]</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('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкова виознака. Запроваджено у JavaScript 1.6.</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Array.forEach")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.filter()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/from/index.html b/files/uk/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..7cfb6325b8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,242 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +tags: + - Array + - ECMAScript6 + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Array.from()</strong></code> створює новий екземпляр <code>Array</code> (дрібну копію) з подібного до масиву або ітерабельного об'єкта.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Array.from(<em>arrayLike</em>[, <em>mapFn</em>[, <em>thisArg</em>]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>Подібний до масиву або ітерабельний об'єкт, який треба перетворити на масив.</dd> + <dt><code>mapFn</code> {{Optional_inline}}</dt> + <dd>Функція Map для виклику на кожному елементі масиву.</dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd>Значення <code>this</code> для функції <code>mapFn</code>.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Новий екземпляр {{jsxref("Array")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>Array.from()</code> дозволяє створювати масиви з:</p> + +<ul> + <li>подібних до масивів об'єктів (об'єктів з властивістю <code>length</code> та елементами, що мають числові індекси) або</li> + <li><a href="/uk/docs/Web/JavaScript/Guide/iterable">ітерабельних об'єктів</a> (об'єктів, з яких можна отримати елементи, таких як {{jsxref("Map")}} та {{jsxref("Set")}}).</li> +</ul> + +<p><code>Array.from()</code> має необов'язковий параметр <code>mapFn</code>, який дозволяє виконати функцію {{jsxref("Array.prototype.map", "map")}} на кожному елементі масиву (або об'єкта підкласу), який створюється. Іншими словами, <code>Array.from(obj, mapFn, thisArg)</code> має той самий результат, що й <code>Array.from(obj).map(mapFn, thisArg)</code>, тільки він не створює проміжний масив. Це особливо важливо для певних підкласів масивів, таких як <a href="/uk/docs/Web/JavaScript/Typed_arrays">типізовані масиви</a>, оскільки проміжний масив обов'язково урізав би значення для перетворення у відповідний тип.</p> + +<p>Властивість <code>length</code> методу <code>from()</code> дорівнює 1.</p> + +<p>У ES2015, синтаксис класів дозволяє створення підкласів як для вбудованих класів, так і для тих, що створені користувачем; в результаті статичні методи, такі як <code>Array.from</code> "успадковуються" підкласами класу <code>Array</code> і створюють нові екземпляри підкласу, а не класу <code>Array</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Масив_з_рядка">Масив з рядка</h3> + +<pre class="brush: js">Array.from('foo'); +// [ "f", "o", "o" ]</pre> + +<h3 id="Масив_з_обєкта_Set">Масив з об'єкта <code>Set</code></h3> + +<pre class="brush: js">const set = new Set(['foo', 'bar', 'baz', 'foo']); +Array.from(set); +// [ "foo", "bar", "baz" ]</pre> + +<h3 id="Масив_з_обєкта_Map">Масив з об'єкта <code>Map</code></h3> + +<pre class="brush: js">const map = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(map); +// [[1, 2], [2, 4], [4, 8]] + +const mapper = new Map([['1', 'a'], ['2', 'b']]); +Array.from(mapper.values()); +// ['a', 'b']; + +Array.from(mapper.keys()); +// ['1', '2']; +</pre> + +<h3 id="Масив_з_подібного_до_масиву_обєкта_arguments">Масив з подібного до масиву об'єкта (arguments)</h3> + +<pre class="brush: js">function f() { + return Array.from(arguments); +} + +f(1, 2, 3); + +// [ 1, 2, 3 ]</pre> + +<h3 id="Використання_стрілкових_функцій_та_Array.from">Використання стрілкових функцій та <code>Array.from()</code></h3> + +<pre class="brush: js">// Використання стрілкової функції в якості функції map +// для маніпулювання елементами +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Генерування послідовності чисел +// Оскільки масив ініціалізується значенням `undefined` на кожній позиції, +// значення `v` нижче дорівнюватиме `undefined` +Array.from({length: 5}, (v, i) => i); +// [0, 1, 2, 3, 4] +</pre> + +<h3 id="Генератор_послідовності_range">Генератор послідовності (range)</h3> + +<pre class="brush: js">// Функція генератора послідовності (зазвичай відома як "range", напр. у Clojure, PHP та ін.) +const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step)); + +// Згенерувати числа у діапазоні 0..4 +range(0, 4, 1); +// [0, 1, 2, 3, 4] + +// Згенерувати числа у діапазоні 1..10 з кроком 2 +range(1, 10, 2); +// [1, 3, 5, 7, 9] + +// Згенерувати алфавіт з допомогою Array.from, користуючись тим, що він впорядкований як послідовність +range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x)); +// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Метод <code>Array.from</code> був доданий до стандарту ECMA-262 у 6-й версії (ES2015); таким чином, він може не існувати у інших реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, що дозволить використовувати метод <code>Array.from</code> у реалізаціях, які не мають його вбудованої підтримки. Цей алгоритм саме той, що визначений у ECMA-262, у 6-й версії, за умови, що <code>Object</code> та <code>TypeError</code> мають свої первинні значення і <code>callback.call</code> дорівнює первинному значенню {{jsxref("Function.prototype.call")}}. На додаток, оскільки справжні ітерабельні об'єкти не можуть мати поліфілу, ця реалізація не підтримує загальні ітерабельні об'єкти, визначені у 6-й версії ECMA-262.</p> + +<pre class="brush: js">// Функціональні кроки ECMA-262, версія 6, 22.1.2.1 +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // Властивість length метода from дорівнює 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Нехай C дорівнює значенню this. + var C = this; + + // 2. Нехай items дорівнює ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError('Array.from requires an array-like object - not null or undefined'); + } + + // 4. Якщо mapfn дорівнює undefined, тоді нехай mapping дорівнює false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. інакше + // 5. а Якщо IsCallable(mapfn) дорівнює false, викинути виняток TypeError. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: when provided, the second argument must be a function'); + } + + // 5. б. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Нехай lenValue дорівнює Get(items, "length"). + // 11. Нехай len дорівнює ToLength(lenValue). + var len = toLength(items.length); + + // 13. Якщо IsConstructor(C) дорівнює true, тоді + // 13. а. Нехай A дорівнює результату виклику внутрішнього метода С [[Construct]] + // зі списком аргументів, що містить єдиний елемент len. + // 14. a. Інакше, нехай A дорівнює ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Нехай k дорівнює 0. + var k = 0; + // 17. Повторювати, доки k < len… (також кроки a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Нехай putStatus дорівнює Put(A, "length", len, true). + A.length = len; + // 20. Повернути A. + return A; + }; + }()); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Array.from")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/includes/index.html b/files/uk/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..3030f78d9f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,135 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +tags: + - Array + - JavaScript + - Method + - Prototype + - polyfill + - Довідка + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div>{{JSRef}}</div> + +<p><font face="Open Sans, Arial, sans-serif">Метод </font><code><strong>includes()</strong></code> з'ясовує, чи масив містить елемент із вказаним значенням, та вертає відповідно <code>true</code> або <code>false</code>.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">arr.includes(valueToFind[, fromIndex])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><em><code>valueToFind</code></em></dt> + <dd>Значення елемента, який слід знайти.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Примітка: </strong>При порівнянні рядків та літер, <code>includes()</code> <strong>чутливий до регістру</strong>.</p> +</div> + +<dl> + <dt><em>fromIndex</em> {{optional_inline}}</dt> + <dd>Позиція у масиві, з якої потрібно починати пошук <code>valueToFind</code>; перша літера шукатиметься за індексом <code>fromIndex</code>, якщо <code>fromIndex</code> є позитивним значенням, або за індексом <code>array.length + fromIndex</code>, якщо <code>fromIndex</code> від'ємний (використовуючи {{interwiki("wikipedia", "Модуль_(математика)", "абсолютну величину")}} <code>fromIndex</code> як кількість літер з кінця масиву, де потрібно починати пошук). За замовчуванням дорівнює 0.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Значення {{jsxref("Boolean")}}, яке дорівнює <code>true</code>, якщо значення <code>valueToFind</code> знайдене у масиві (або у частині масиву, якщо заданий параметр <code>fromIndex</code>). Всі нульові значення вважаються рівними, незалежно від знаку (тому -0 вважатиметься рівним і 0, і +0), але <code>false</code> не вважається тим самим, що й 0.</p> + +<div class="blockIndicator note"> +<p><strong>Примітка:</strong> Технічно кажучи, <code>includes()</code> використовує алгоритм <code><a href="/uk/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality">sameValueZero</a></code> для визначення того, чи знайдено заданий елемент.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +</pre> + +<h3 id="fromIndex_більший_або_дорівнює_довжині_масиву"><em><code>fromIndex</code></em> більший або дорівнює довжині масиву</h3> + +<p>Якщо <em><code>fromIndex</code></em> дорівнює або перевищує довжину масиву, пошук не здійснюється й завжди вертається <code>false</code>:</p> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +arr.includes('c', 3); // вертає false +arr.includes('c', 100); // вертає false</pre> + +<h3 id="Обчислений_індекс_менший_за_0">Обчислений індекс менший за 0</h3> + +<p>Якщо значення <em><code>fromIndex</code></em> від'ємне, використовується обчислений індекс для визначення позиції, з якої починати пошук <em><code>valueToFind</code></em> у масиві. Якщо обчислений індекс менший або дорівнює <code>-1 * array.length</code>, пошук здійснюється у всьому масиві.</p> + +<pre class="brush: js">// Довжина масиву дорівнює 3 +// fromIndex дорівнює -100 +// Обчислений індекс дорівнює 3 + (-100) = -97 + +var arr = ['a', 'b', 'c']; + +arr.includes('a', -100); // true +arr.includes('b', -100); // true +arr.includes('c', -100); // true +arr.includes('a', -2); // false</pre> + +<h3 id="Застосування_includes()_як_загального_метода">Застосування <code>includes()</code> як загального метода</h3> + +<p>Реалізація метода <code>includes()</code> є зумисне узагальненою. Об'єкт, на який вказує <code>this</code>, не обов'язково повинен належати до класу <code>Array</code>, тож використання <code>includes()</code> можна поширити на інші масивоподібні об'єкти. В наведеному нижче прикладі його застосовано до об'єкта <code>{{jsxref("Functions/arguments", "arguments")}}</code>:</p> + +<pre class="brush: js">(function() { + console.log([].includes.call(arguments, 'a')); // виводить true + console.log([].includes.call(arguments, 'd')); // виводить false +})('a','b','c'); +</pre> + +<div class="hidden"> +<p>Будь ласка, не додавайте поліфіли у довідкові статті. Більше інформації дивіться у дискусії <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> +</div> + +<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('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Початкова виознака.</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Array.includes")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> 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> diff --git a/files/uk/web/javascript/reference/global_objects/array/indexof/index.html b/files/uk/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..049c3ab869 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,260 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>indexOf()</strong></code> повертає перший індекс, за яким даний елемент був знайдений в масиві, а якщо він відсутній, то повертає -1.</p> + +<div class="note"> +<p><strong>Примітка:</strong> Щодо метода String, дивіться {{jsxref("String.prototype.indexOf()")}}.</p> +</div> + +<pre class="brush: js">var a = [2, 9, 9]; +a.indexOf(2); // 0 +a.indexOf(7); // -1 + +if (a.indexOf(7) === -1) { + // елемент не існує у масиві +} +</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement[</var>, <var>fromIndex]</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Елемент, який потрібно знайти.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>Індекс, з якого починається пошук. Якщо індекс більше або дорівнює довжині масиву, повертається -1, що означає, що масив не буде шукатися. Якщо значення показника є від'ємним числом, то воно трактується як зміщення від кінця масиву.</dd> + <dd><code>Примітка:</code> якщо наданий індекс від'ємний, масив все ще ітерується спереду назад. Якщо індекс рівний 0, то буде проведений пошук по всьому масиву. За замовчуванням: 0 (виконується пошук по всьому масиву).</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Перший індекс елемента в масиві; якщо не знайдено, то <strong>-1</strong>.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>indexOf()</code> порівнює <code>searchElement</code> з елементами Масиву, використовуючи <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">строгу рівність</a> (той самий метод, що використовується з допомогою <code>===</code> або потрійним дорівнює).</p> + +<h2 id="Приклад">Приклад</h2> + +<h3 id="Використання_indexOf()">Використання <code>indexOf()</code></h3> + +<p>У наступному прикладі <code>indexOf()</code> використовується для пошуку значень в масиві.</p> + +<pre class="brush: js">var array = [2, 9, 9]; +array.indexOf(2); // 0 +array.indexOf(7); // -1 +array.indexOf(9, 2); // 2 +array.indexOf(2, -1); // -1 +array.indexOf(2, -3); // 0 +</pre> + +<h3 id="Пошук_всіх_відопвідностей_на_елементі">Пошук всіх відопвідностей на елементі</h3> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.indexOf(element); +while (idx != -1) { + indices.push(idx); + idx = array.indexOf(element, idx + 1); +} +console.log(indices); +// [0, 2, 4] +</pre> + +<h3 id="Пошук_чи_існує_елемент_в_масиві_і_його_оновлення">Пошук, чи існує елемент в масиві, і його оновлення </h3> + +<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) { + if (veggies.indexOf(veggie) === -1) { + veggies.push(veggie); + console.log('Оновлений набір овочів : ' + veggies); + } else if (veggies.indexOf(veggie) > -1) { + console.log(veggie + ' вже існує у наборі овочів.'); + } +} + +var veggies = ['картопля', 'помідор', 'чилі', 'зелений перець']; + +updateVegetablesCollection(veggies, 'шпинат'); +// Оновлений набір овочів: картопля,помідор,чилі,зелений перець,шпинат +updateVegetablesCollection(veggies, 'шпинат'); +// шпинат вже існує у наборі овочів. +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p><code>indexOf()</code> був доданий в стандарт ECMA-262 в 5-му виданні; як такий він може бути присутнім не у всіх браузерах. Це можна обійти, використовуючи наступний код на початку скриптів. Це дозволить вам використовувати метод <code>indexOf()</code>, коли ще немає вбудованої підтримки в браузері. Цей алгоритм збігається із зазначеною в ECMA-262, 5-е видання, припускаючи, що{{jsxref("Global_Objects/TypeError", "TypeError")}} і {{jsxref("Math.abs()")}} має свої оригінальні значення.</p> + +<pre class="brush: js">if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function indexOf(member, startFrom) { + /* + У спрощеному режимі, якщо змінна `this` має значення null або + undefined, то вона встановлюється в об'єкт window. В іншому випадку + `this` автоматично перетворюється в об'єкт. У строгому режимі, якщо + змінна 'this' має значення null або undefined, генерується 'TypeError'. + */ + if (this == null) { + throw new TypeError("Array.prototype.indexOf() - can't convert `" + this + "` to object"); + } + + var + index = isFinite(startFrom) ? Math.floor(startFrom) : 0, + that = this instanceof Object ? this : new Object(this), + length = isFinite(that.length) ? Math.floor(that.length) : 0; + + if (index >= length) { + return -1; + } + + if (index < 0) { + index = Math.max(length + index, 0); + } + + if (member === undefined) { + /* + Оскільки `member` не визначено, ключі, які не існують, + будуть мати те ж значення, що і `member`, і, отже, повинні + бути перевірені. + */ + do { + if (index in that && that[index] === undefined) { + return index; + } + } while (++index < length); + } else { + do { + if (that[index] === member) { + return index; + } + } while (++index < length); + } + + return -1; + }; +}</pre> + +<p>Однак, якщо ви більше зацікавлені у всіх маленьких технічних бітах, визначених стандартом ECMA, і менше стурбовані продуктивністю або лаконічністю, то ви можете знайти це більш описове заповнення більш корисним.</p> + +<pre class="brush: js">// Кроки продукції ECMA-262, Edition 5, 15.4.4.14 +// Посилання: http://es5.github.io/#x15.4.4.14 +if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function(searchElement, fromIndex) { + + var k; + + // 1. Нехай o є результатом виклику ToObject, що передає це + // значення в якості аргументу. + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Нехай lenValue є результатом виклику Get, + // внутрішнього методу o з аргументом "length". + // 3. Нехай len буде ToUint32(lenValue). + var len = o.length >>> 0; + + // 4. Якщо len рівне 0, return -1. + if (len === 0) { + return -1; + } + + // Якщо аргумент fromIndex був переданий, let n = + // ToInteger(fromIndex); інакше let n = 0. + var n = fromIndex | 0; + + // 6. Якщо n >= len, return -1. + if (n >= len) { + return -1; + } + + // 7. Якщо n >= 0, то нехай k дорівнює n. + // 8. Інакше, n<0, нехай k дорівнює len - abs(n). + // Якщо k менше, ніж 0, тоді нехай k дорівнює 0. + k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + // 9. Повторювати, доки k < len + while (k < len) { + // а. Нехай Pk дорівнює ToString(k). Це неочевидно для лівосторонніх операндів оператора in + // б. Нехай kPresent буде результатом виклику + // внутрішнього метода o HasProperty з аргументом Pk. + // Цей крок можна поєднати з в + // в. Якщо kPresent дорівнює true, тоді + // i. Нехай elementK буде результатом виклику + // внутрішнього метода o Getwith з аргументом ToString(k). + // ii. Нехай те саме буде результатом застосування + // Алгоритму Строгого Порівняння (Strict Equality Comparison Algorithm) + // до searchElement та elementK. + // iii. Якщо те саме дорівнює true, повернути k. + if (k in o && o[k] === searchElement) { + return k; + } + k++; + } + return -1; + }; +} +</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('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізовано у JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.indexOf")}}</p> +</div> + +<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2> + +<ul> + <li>Починаючи з Firefox 47 {{geckoRelease(47)}}, цей метод більше не повертатиме <code>-0</code>. Наприклад, <code>[0].indexOf(0, -0)</code> тепер завжди повертатиме <code>+0</code> ({{bug(1242043)}}).</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/isarray/index.html b/files/uk/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..8f7b888535 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,131 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +tags: + - Array + - ECMAScript5 + - JavaScript + - Method + - polyfill + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef}}</div> + +<div>Метод <code><strong>Array.isArray()</strong></code> з'ясовує, чи є передане значення {{jsxref("Array", "масивом")}}.</div> + +<div></div> + +<pre class="brush: js">Array.isArray([1, 2, 3]); // true +Array.isArray({foo: 123}); // false +Array.isArray('foobar'); // false +Array.isArray(undefined); // false +</pre> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox">Array.isArray(<var>value</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Значення, яке має бути перевірено.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Значення <code>true</code>, якщо <code>value</code> є {{jsxref("Array", "масивом")}}; <code>false</code> — якщо ні.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо передане значення є {{jsxref("Array", "масивом")}}, повертається <code>true</code>, інакше повертається <code>false</code>.</p> + +<p>Більш докладні відомості дивіться у статті «<a href="http://web.mit.edu/jwalden/www/isArray.html">Як з'ясувати абсолютно точно, чи є об'єкт у JavaScript масивом</a>». При використанні екземпляра {{jsxref("TypedArray")}} завжди повертається <code>false</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">//Всі наведені далі виклики вертають true: +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +Array.isArray(new Array('a', 'b', 'c', 'd')); +Array.isArray(new Array(3)); +// Маловідомий факт: Array.prototype сам є масивом: +Array.isArray(Array.prototype); + +//Всі наведені далі виклики вертають false: +Array.isArray(); +Array.isArray({}); +Array.isArray(null); +Array.isArray(undefined); +Array.isArray(17); +Array.isArray('Array'); +Array.isArray(true); +Array.isArray(false); +Array.isArray(new Uint8Array(32)); +Array.isArray({ __proto__: Array.prototype });</pre> + +<h3 id="instanceof_проти_isArray"><code>instanceof</code> проти <code>isArray</code></h3> + +<p>Для перевірки, чи є об'єкт екземпляром <code>Array</code>, метод <code>Array.isArray</code> підходить краще, ніж <code>instanceof</code>, тому що він працює між фреймами (<code>iframes</code>).</p> + +<pre class="brush: js">var iframe = document.createElement('iframe'); +document.body.appendChild(iframe); +xArray = window.frames[window.frames.length-1].Array; +var arr = new xArray(1,2,3); // [1,2,3] + +// Коректна перевірка екземпляра Array +Array.isArray(arr); // true +// Вважається небезпечним, бо не працює між фреймами +arr instanceof Array; // false</pre> + +<h2 id="Запасний_варіант_(поліфіл)">Запасний варіант (поліфіл)</h2> + +<p>Наступний код, запущений перед будь-яким іншим кодом, створить метод <code>Array.isArray()</code>, якщо він недоступний початково.</p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</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('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкова виознака. Запроваджено у JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Array.isArray")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/join/index.html b/files/uk/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..116fb03bec --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,114 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +tags: + - Array + - JavaScript + - Method + - Prototype + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +<div>{{JSRef}}</div> + +<p><code>Метод<strong> join()</strong></code> створює та повертає рядок, що об'єднує всі елементи масиву (або <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">подібного до масиву об'єкта</a>), розділені комами або заданим роздільником. Якщо масив містить лише один елемент, то він буде повернений без роздільника.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div> + +<p class="hidden">Джерело цього інтерактивного прикладу знаходиться в GitHub репозиторії. Якщо ви бажаєте зробити внесок до проекту інтерактивних прикладів, будь ласка, склонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та надішліть нам пулл реквест.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.join(<em>[</em><var>separator]</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>separator</code> {{optional_inline}}</dt> + <dd>Визначає рядок, що розділить кожну пару сусідніх елементів масиву. Роздільник перетворюється на рядок, якщо це необхідно. Якщо він пропущений, елементи масиву будуть розділені комою (","). Якщо <code>separator</code> є порожнім рядком, усі елементи будуть обʼєднані без жодних знаків між ними.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Рядок з усіма обʼєднаними елементами масиву. Якщо <code><em>arr</em>.length</code> дорівнює <code>0</code>, буде повернений порожній рядок.</p> + +<h2 id="Опис">Опис</h2> + +<p>Рядкові представлення усіх елементів масиву поєднуються в один рядок.</p> + +<div class="warning"> +<p>Якщо елемент дорівнює <code>undefined</code> або <code>null</code>, він перетворюється на порожній рядок.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Обʼєднання_масиву_різними_шляхами">Обʼєднання масиву різними шляхами</h3> + +<p class="syntaxbox">В наступному прикладі створюється масив <code>a</code> із трьома елементами, після чого поєднується чотири рази: використовуючи роздільник за замовчуванням, кому та пробіл, плюс, порожній рядок.</p> + +<pre class="brush: js">var a = ['Вітер', 'Вода', 'Вогонь']; +a.join(); // 'Вітер,Вода,Вогонь' +a.join(', '); // 'Вітер, Вода, Вогонь' +a.join(' + '); // 'Вітер + Вода + Вогонь' +a.join(''); // 'ВітерВодаВогонь'</pre> + +<h3 id="Обʼєднання_подібного_до_масиву_об'єкта">Обʼєднання подібного до масиву об'єкта</h3> + +<p>В наступному прикладі подібний до масиву об'єкт (<code><a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>) об'єднується шляхом виклику {{jsxref("Function.prototype.call")}} для <code>Array.prototype.join</code>.</p> + +<pre class="brush: js">function f(a, b, c) { + var s = Array.prototype.join.call(arguments); + console.log(s); // '<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">1,a,true'</span></span></span></span> +} +f(1, 'a', true); +//очікуваний результат: "1,a,true" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Запроваджено у JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена з структурованих даних. Якщо ви бажаєте зробити внесок, будь ласка, перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам пулл реквест.</div> + +<p>{{Compat("javascript.builtins.Array.join")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/keys/index.html b/files/uk/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..d631dea894 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,82 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Reference/Global_Objects/Array/keys +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Довідка + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>keys()</strong></code> вертає новий об'єкт <abbr title="Array Iterator">перебирача</abbr> ключів (індексів) масиву.</p> + + + +<p>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.keys()</pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Новий об'єкт <abbr title="ітератора">перебирача</abbr> {{jsxref("Array")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перебирач_ключів_розрідженого_масиву_не_оминає_прогалин">Перебирач ключів розрідженого масиву не оминає прогалин</h3> + +<pre class="brush: js">var arr = ['a', , 'c']; +var sparseKeys = Object.keys(arr); +var denseKeys = [...arr.keys()]; +console.log(sparseKeys); // виводить ['0', '2'] +console.log(denseKeys); // виводить [0, 1, 2] +</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('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкова виознака.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Array.keys")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html new file mode 100644 index 0000000000..97ae6e5457 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -0,0 +1,166 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +tags: + - Array + - ECMAScript5 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>lastIndexOf()</strong></code> повертає останній індекс, за яким заданий елемент було знайдено у масиві, або -1, якщо елемент не знайдено. Пошук відбувається в зворотному порядку, починаючи з індексу <code>fromIndex</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>searchElement[</var>, <var>fromIndex]</var>) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Елемент, який потрібно знайти у масиві.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>Індекс, з якого починається пошук у зворотному порядку. За замовченням дорівнює довжині масиву мінус один (<code>arr.length - 1</code>), тобто пошук відбуватиметься у всьому масиві. Якщо індекс більше або дорівнює довжині масиву, пошук відбуватиметься у всьому масиві. Якщо індекс є від'ємним, він вважається відступом від кінця масиву. Зверніть увагу, що навіть якщо індекс є від'ємним, пошук все одно відбувається з кінця масиву. Якщо обчислений індекс є від'ємним, повертається -1, тобто пошук не відбувається.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Останній індекс елемента у масиві; <strong>-1</strong>, якщо елемент не знайдений.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>lastIndexOf</code> порівнює <code>searchElement</code> з елементами масиву, використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність_()">строгу рівність</a> (метод, що використовує оператор === або потрійне дорівнює).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_lastIndexOf">Використання <code>lastIndexOf</code></h3> + +<p>Наступний приклад використовує <code>lastIndexOf</code>, щоб знайти значення у масиві.</p> + +<pre class="brush: js">var numbers = [2, 5, 9, 2]; +numbers.lastIndexOf(2); // 3 +numbers.lastIndexOf(7); // -1 +numbers.lastIndexOf(2, 3); // 3 +numbers.lastIndexOf(2, 2); // 0 +numbers.lastIndexOf(2, -2); // 0 +numbers.lastIndexOf(2, -1); // 3 +</pre> + +<h3 id="Знаходження_всіх_позицій_входжень_елемента">Знаходження всіх позицій входжень елемента</h3> + +<p>Наступний приклад використовує <code>lastIndexOf</code>, щоб знайти всі індекси елемента у заданому масиві, використовуючи {{jsxref("Array.prototype.push", "push")}}, щоб додати їх до іншого масиву по мірі знаходження.</p> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.lastIndexOf(element); +while (idx != -1) { + indices.push(idx); + idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1); +} + +console.log(indices); +// [4, 2, 0] +</pre> + +<p>Зверніть увагу, що ми маємо окремо обробити випадок <code>idx == 0</code>, тому що елемент завжди буде знайдений, незважаючи на параметр <code>fromIndex</code>, якщо це перший елемент масиву. В цьому відмінність від методу {{jsxref("Array.prototype.indexOf", "indexOf")}}.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Метод <code>lastIndexOf</code> був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній в інших реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, це дозволить використовувати <code>lastIndexOf</code> у реалізаціях, які не підтримують його початково. Цей алгоритм є саме тим, що зазначений у 5-й версії ECMA-262, за умови, що {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}} та {{jsxref("Math.min")}} мають свої початкові значення.</p> + +<pre class="brush: js">// Функціональні кроки ECMA-262, версії 5, 15.4.4.15 +// Довідка: http://es5.github.io/#x15.4.4.15 +if (!Array.prototype.lastIndexOf) { + Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) { + 'use strict'; + + if (this === void 0 || this === null) { + throw new TypeError(); + } + + var n, k, + t = Object(this), + len = t.length >>> 0; + if (len === 0) { + return -1; + } + + n = len - 1; + if (arguments.length > 1) { + n = Number(arguments[1]); + if (n != n) { + n = 0; + } + else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) { + n = (n > 0 || -1) * Math.floor(Math.abs(n)); + } + } + + for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) { + if (k in t && t[k] === searchElement) { + return k; + } + } + return -1; + }; +} +</pre> + +<p>Знову ж таки, зауважте, що ця реалізація прагне повної сумісності з <code>lastIndexOf</code> у Firefox на рушії JavaScript SpiderMonkey, в тому числі у декількох можливих граничних ситуаціях. Якщо ви плануєте використовувати її у застосунках з реального життя, то можете обраховувати <code>from</code> менш складним кодом, якщо знехтуєте цими ситуаціями.</p> + +<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('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p> +</div> + +<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2> + +<ul> + <li>Починаючи з Firefox 47 {{geckoRelease(47)}}, цей метод більше не повертатиме <code>-0</code>. Для прикладу, <code>[0].lastIndexOf(0, -0)</code> тепер завжди повертатиме <code>+0</code> ({{bug(1242043)}}).</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/length/index.html b/files/uk/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..c407dc290b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,139 @@ +--- +title: array.length +slug: Web/JavaScript/Reference/Global_Objects/Array/length +tags: + - Array + - JavaScript + - Property + - Властивість + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>length</strong></code> об'єкта, який є екземпляром типу <code>Array</code>, встановлює або повертає кількість елементів у цьому масиві. Значення є цілим беззнаковим 32-бітним числом, що завжди є більшим за найбільший індекс у масиві.</p> + +<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{EmbedInteractiveExample("pages/js/array-length.html")}}</span></p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="Опис"><strong style="color: #4d4e53; font-size: 2.143rem; font-weight: 700; letter-spacing: -1px;">О</strong><strong style="color: #4d4e53; font-size: 2.143rem; font-weight: 700; letter-spacing: -1px;">пис</strong></h2> + +<p>Значенням властивості <code>length</code> є ціле додатне число, менше за 2 в степені 32 (2<sup>32</sup>).</p> + +<pre class="brush: js">var namelistA = new Array(4294967296); //2 в степені 32 = 4294967296 +var namelistC = new Array(-100) //від'ємне число + +console.log(namelistA.length); //RangeError: Invalid array length +console.log(namelistC.length); //RangeError: Invalid array length + +var namelistB = []; +namelistB.length = Math.pow(2,32)-1; //встановити довжину масиву меншу, ніж 2 в степені 32 +console.log(namelistB.length); + +//4294967295</pre> + +<p>Ви можете присвоїти значення властивості <code>length</code>, щоб скоротити масив. Коли ви розширюєте масив, змінюючи його довжину (властивість <code>length</code>), збільшується кількість фактичних елементів; наприклад, якщо ви присвоїли <code>length</code> 3, коли елементів насправді 2, масив тепер містить 3 елементи, в результаті третій є неітерабельним порожнім елементом.</p> + +<pre class="brush: js">var arr = [1, 2]; +console.log(arr); +// [ 1, 2 ] + +arr.length = 5; // встановити довжину 5, маючи 2 елементи. +console.log(arr); +// [ 1, 2, <3 порожні елементи> ] + +arr.forEach(element => console.log(element)); +// 1 +// 2</pre> + +<p class="brush: js">Таким чином, поле <code>length</code> не обов'язково вказує на кількість визначених значень у масиві. Дивіться також <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array#Зв'язок_між_length_та_числовими_властивостями" title="Relationship between length and numerical properties">Зв'язок між length та числовими властивостями</a>.</p> + +<p>{{js_property_attributes(1, 0, 0)}}</p> + +<ul> + <li><code>Writable (Доступний для запису)</code>: Якщо цей атрибут встановлений у <code>false</code>, значення цієї властивості не можна змінити.</li> + <li><code>Enumerable (Доступний для переліку)</code>: Якщо цей атрибут встановлений у <code>true</code>, властивість ітерується під час виконання циклів <a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a> або <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a>.</li> + <li><code>Configurable (Доступний для налаштування)</code>: Якщо цей атрибут встановлений у <code>false</code>, будь-які спроби видалити властивість або змінити її атрибути (доступність для запису, переліку або налаштування) не спрацюють.</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Циклічне_проходження_по_масиву">Циклічне проходження по масиву</h3> + +<p>В наступному прикладі, проходження по масиву <code>numbers</code> відбувається зважаючи на властивість <code>length</code>. Значення кожного елементу подвоюється.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4, 5]; + +for (var i = 0; i < numbers.length; i++) { + numbers[i] *= 2; +} +// numbers тепер [2, 4, 6, 8, 10] +</pre> + +<h3 id="Скорочення_масиву">Скорочення масиву</h3> + +<p>Наступний приклад скорочує масив <code>statesUS</code> до довжини 3, якщо його поточна довжина більша, ніж 3.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4, 5]; + +if (numbers.length > 3) { + numbers.length = 3; +} + +console.log(numbers); // [1, 2, 3] +console.log(numbers.length); // 3</pre> + +<h3 id="Створення_порожнього_масиву_фіксованої_довжини">Створення порожнього масиву фіксованої довжини</h3> + +<pre class="brush: js">var numbers = []; +numbers.length = 10; +console.log(numbers); // [empty × 10]</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.5.2', 'Array.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<div class="hidden"> +<p>The compatibility table in 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.length")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/map/index.html b/files/uk/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..2c71a1fe6f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,349 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Global_Objects/Array/map +tags: + - Array + - ECMAScript5 + - JavaScript + - Масив + - метод + - поліфіл + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>map()</strong></code> <strong>створює новий масив</strong> з результатами виклику наданої функції на кожному елементі масиву, який викликав метод.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-map.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request." </p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js"><var>var new_array = arr.map(function callback(currentValue[, index[, array]]) { + // Повернути елемент нового масиву new_array +}[, thisArg])</var></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, яка повертає елемент нового масиву. Приймає три аргументи:</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>Поточний елемент масиву.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Індекс поточного елементу масиву</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Сам масив, на якому був викликаний <code>map</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Значення, що буде використане як <code>this</code> при виконанні <code>callback</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається_(return_value)">Значення, що повертається (return value)</h3> + +<p>Новий масив, кожен елемент якого є результатом функції <code>callback</code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>map</code> викликає передану <code>callback-функцію</code> <strong>один раз для кожного елементу</strong> масиву, в заданому порядку, та створює новий масив з результатів. <code>callback</code> викликаться тільки для індексів яким відповідають значення, включно з <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>. Функція не викликається для елеметів значення яких відсутні (мається на увазі, індекси які не були явно задані, які були видалені або яким не було присвоєне значення).</p> + +<p>Остільки <code>map</code> створює новий масив, викликати його, якщо ви не збираєтесь використовувати повернений масив, є антишаблоном; скористайтесь натомість <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach</code></a> або <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Statements/for...of"><code>for-of</code></a>. Ознаки того, що вам не підходить метод <code>map</code>: А) Ви не використовуєте масив, який він повертає, і/або Б) Ви не повертаєте значення у функції <code>callback</code>.</p> + +<p><code>callback</code> викликається з трьома аргументами: значення елемента, індекс елемента, та масив на якому операцію було викликано.</p> + +<p>Якщо <code>thisArg</code> параметр переданий в <code>map</code>, він буде використовуватись як ключове слово this для <code>callback-функції</code>. В іншому випадку, значення {{jsxref("undefined")}} буде використане як <code>this</code>. Значення this, яке спостерігається в callback-функції, в кінцевому рахунку визначається згідно <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">звичайних правил для визначення this, видимого з функції</a>.</p> + +<p><code>map</code> не змінює масив, на якому був викликаний (хоча <code>callback</code>, якщо був викликаний, може змінити).</p> + +<p>Діапазон елементів, які обробляє метод map, визначений до того як callback-функція буде визвана вперше. Елементи які будуть додані до масиву після виклику map, не будуть оброблені callback-функцією. Якщо існуючі в масиві елементи змінені або видалені, їхні значення при потраплянні в callback-функцію, будуть такими якими вони є на той час коли map обробляє їх. Елементи які були видалені до і після того як map був визваний, ігноруються. </p> + +<p>Згідно з алгоритмом, визначеним у специфікації, якщо масив на якому було викликано map, розріджений, то масив на виході теж буде розрідженим, залишаючи ті ж самі індекси пустими.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перетворення_масиву_з_числами_в_масив_квадратних_коренів">Перетворення масиву з числами в масив квадратних коренів</h3> + +<p>Наступний код бере масив з числами і створює новий масив, який складається з квадратних коренів чисел з першого масиву.</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var roots = numbers.map(function(num) { +return Math.sqrt(num) +}); +// roots тепер [1, 2, 3] +// numbers залишається [1, 4, 9] +</pre> + +<h3 id="Використання_map_для_переформатування_об'єктів_в_масиві">Використання map для переформатування об'єктів в масиві</h3> + +<p>Наступний код використовує масив з об'єктами щоб створити новий масив з переформатованими об'єктами.</p> + +<pre class="brush: js">var kvArray = [{key:1, value:10}, + {key:2, value:20}, + {key:3, value: 30}]; + +var reformattedArray = kvArray.map(obj =>{ + var rObj = {}; + rObj[obj.key] = obj.value; + return rObj; +}); +// reformattedArray тепер [{1:10}, {2:20}, {3:30}], + +// kvArray залишається: +// [{key:1, value:10}, +// {key:2, value:20}, +// {key:3, value: 30}] +</pre> + +<h3 id="Перетворення_масиву_чисел_використовуючи_функцію_з_аргументом">Перетворення масиву чисел використовуючи функцію з аргументом</h3> + +<p>Наступний код показує як map працює коли функція що потребує один аргумент, використовує його. Аргумент буде автоматично присвоєний з кожного елементу масиву коли map буде проходитись по оригінальному масиву..</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var doubles = numbers.map(function(num) { + return num * 2; +}); + +// doubles тепер [2, 8, 18] +// numbers залишається [1, 4, 9] +</pre> + +<h3 id="Загальне_використання_map">Загальне використання <code>map</code></h3> + +<p>Цей приклад показує як використовувати map на рядках ({{jsxref("String")}}) щоб отримати масив байтів в ASCII кодуванні яке відображає значення літер:</p> + +<pre class="brush: js">var map = Array.prototype.map; +var a = map.call('Hello World', function(x) { + return x.charCodeAt(0); +}); +// a тепер дорівнює [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] +</pre> + +<h3 id="Загальне_використання_map_з_querySelectorAll">Загальне використання <code>map</code> з <code>querySelectorAll</code></h3> + +<p>Даний приклад показує, як виконати перебір набору об'єктів, отриманих методом <code>querySelectorAll</code>. Тому що метод <code>querySelectorAll</code> повертає <strong><em>NodeList</em></strong>, який є колекцією об'єктів.</p> + +<p>У даному випадку ми повертаємо значення всіх вибраних опцій на екрані:</p> + +<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); +var values = Array.prototype.map.call(elems, function(obj) { + return obj.value; +}); +</pre> + +<p>Це простіше зробити методом {{jsxref("Array.from()")}}.</p> + +<h3 id="Хитрий_спосіб_використання">Хитрий спосіб використання</h3> + +<p>(<a href="http://www.wirfs-brock.com/allen/posts/166">натхненний цим блог-постом</a>)</p> + +<p>Загальноприйнято використовувати функцію callback з одним аргументом (елемент по якому проходиться функція). Деякі функції також використовуються з одним аргументом, хоча можуть приймати і більше додаткових аргументів, що не є обов'язковими. Це може призводити до неочікуваної поведінки.</p> + +<p>Розглянемо:</p> + +<pre class="brush: js">["1", "2", "3"].map(parseInt);</pre> + +<p>Хоча можна було б очікувати <code>[1, 2, 3]</code>, справжнім результатом буде <code>[1, NaN, NaN]</code>.</p> + +<p>Метод <code>parseInt</code> часто використовується з одним аргументом, але приймає два. Перший - це вираз, а другий - основа системи числення для функції зворотного виклику. <code>Array.prototype.map</code> передає 3 аргументи:</p> + +<ul> + <li>елемент</li> + <li>індекс</li> + <li>масив</li> +</ul> + +<p>Третій аргумент ігнорується методом parseInt, <u>але не другий</u>, звідси й можлива плутанина. Ось стислий огляд кроків перебору:</p> + +<pre class="brush: js">// parseInt(string, radix) -> map(parseInt(value, index)) +/* first iteration (index is 0): */ parseInt("1", 0); // 1 +/* second iteration (index is 1): */ parseInt("2", 1); // NaN +/* third iteration (index is 2): */ parseInt("3", 2); // NaN</pre> + +<p>Поговоримо про рішення.</p> + +<pre class="brush: js">function returnInt(element) { + return parseInt(element, 10); +} + +['1', '2', '3'].map(returnInt); // [1, 2, 3] +// Результатом є масив чисел (як і очікувалось) + +// Те саме, але з використанням лаконічного стрілкового синтаксису +['1', '2', '3'].map( str => parseInt(str) ); + +// Простіший спосіб досягти вищевказаного +['1', '2', '3'].map(Number); // [1, 2, 3] + +// На відміну від parseInt(), Number() також поверне десятковий або експоненціальний запис: +['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300] +// Для порівняння, якщо використати parseInt() для попереднього масиву: +['1.1', '2.2e2', '3e300'].map( str => parseInt(str) ); // [1, 2, 3]</pre> + +<p>Ще один варіант результату метода map, що викликається з parseInt в якості параметра, виглядає наступним чином:</p> + +<pre class="brush: js">var xs = ['10', '10', '10']; + +xs = xs.map(parseInt); + +console.log(xs); +// Результат 10,NaN,2 може бути неочікуваним, з огляду вищеописане.</pre> + +<h3 id="Масив_містить_значення_undefined">Масив містить значення undefined</h3> + +<p>Коли повертається undefined або нічого не повертається:</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4]; +var filteredNumbers = numbers.map(function(num, index) { + if(index < 2) { + return num; + } +}); +// filteredNumbers дорівнює [1, 2, undefined, undefined] +// numbers досі дорівнює [1, 2, 3, 4]</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p><font face="Consolas, Liberation Mono, Courier, monospace">Метод <code>map</code> </font>був доданий до ECMA-262 стандарту в 5-тій редакції; тому він може бути присутнім не у всіх реалізаціях стандарту. Ви можете обійти це, вставляючи наступний код на початок вашого скритпу, дозволяючи використовувати map в реалізаціях які ще його не підтримують. Цей алгоритм є точно таким який вказаний в ECMA-262, 5му виданні, передбачаючи що {{jsxref("Object")}}, {{jsxref("TypeError")}}, і {{jsxref("Array")}} мають свої власні значення і що <code>callback.call</code> обчислює початкове значення <code>{{jsxref("Function.prototype.call")}}</code>.</p> + +<pre class="brush: js">// Функціональні кроки ECMA-262, версія 5, 15.4.4.19 +// Довідка: http://es5.github.io/#x15.4.4.19 +if (!Array.prototype.map) { + + Array.prototype.map = function(callback, thisArg) { + + var T, A, k; + + if (this == null) { + throw new TypeError(' this is null or not defined'); + } + + // 1. Нехай O дорівнює результату виклику ToObject з |this| + // в якості аргументу. + var O = Object(this); + + // 2. Нехай lenValue дорівнює результату виклику внутрішнього методу O + // Get з аргументом "length". + // 3. Нехай len дорівнює ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. Якщо IsCallable(callback) дорівнює false, викинути виняток TypeError. + // Див.: http://es5.github.com/#x9.11 + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + // 5. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Нехай A дорівнює новому масиву, створеному виразом new Array(len), + // де Array - це стандартний вбудований конструктор з таким ім'ям, + // а len дорівнює значенню len. + A = new Array(len); + + // 7. Нехай k дорівнює 0 + k = 0; + + // 8. Повторювати, доки k < len + while (k < len) { + + var kValue, mappedValue; + + // а. Нехай Pk дорівнює ToString(k). + // Цей метод неявно застосовується до лівого операнда оператора in + // б. Нехай kPresent дорівнює результату виклику внутрішнього методу O + // HasProperty з аргументом Pk. + // Цей крок можна об'єднати з в + // в. Якщо kPresent дорівнює true, тоді + if (k in O) { + + // і. Нехай kValue дорівнює результату виклику внутрішнього методу O + // Get з аргументом Pk. + kValue = O[k]; + + // ii. Нехай mappedValue дорівнює результату виклику внутрішнього + // методу callback Call з T у якості значення this та списком + // аргументів, що містить kValue, k та O. + mappedValue = callback.call(T, kValue, k, O); + + // iii. Викликати внутрішній метод A DefineOwnProperty з аргументами + // Pk, Property Descriptor + // { Value: mappedValue, + // Writable: true, + // Enumerable: true, + // Configurable: true }, + // та false. + + // У переглядачах, що підтримують Object.defineProperty, використовуйте: + // Object.defineProperty(A, k, { + // value: mappedValue, + // writable: true, + // enumerable: true, + // configurable: true + // }); + + // Для найкращої підтримки переглядачів, використовуйте: + A[k] = mappedValue; + } + // г. Збільшити k на 1. + k++; + } + + // 9. повернути A + return A; + }; +} +</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('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> + <p>Початкове визначення. Реалізоване в JavaScript 1.6.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table in 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.map")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>Об'єкт {{jsxref("Map")}}</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/observe/index.html b/files/uk/web/javascript/reference/global_objects/array/observe/index.html new file mode 100644 index 0000000000..3e3a386c83 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/observe/index.html @@ -0,0 +1,89 @@ +--- +title: Array.observe() +slug: Web/JavaScript/Reference/Global_Objects/Array/observe +tags: + - JavaScript + - Масив + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Array.observe +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод <strong><code>Array.observe()</code></strong> використовувався для асинхронного спостереження за змінами у масивах, схоже на {{jsxref("Object.observe()")}} у об'єктах. Він надавав послідовність змін в порядку виникнення. Як і <code>Object.observe()</code>, він викликається з допустимим списком типів <code>["add", "update", "delete", "splice"]</code>. Однак, цей API застарілий та був прибраний з переглядачів. Ви можете натомість використати більш загальний об'єкт {{jsxref("Proxy")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Array.observe(<var>arr</var>, <var>callback</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>arr</code></dt> + <dd>Масив для спостереження.</dd> + <dt><code>callback</code></dt> + <dd>Функція, яка викликається кожен раз, коли відбуваються зміни, з наступним аргументом: + <dl> + <dt><code>changes</code></dt> + <dd>Масив об'єктів, кожен з яких відображає зміну. Властивості цих об'єктів змін: + <ul> + <li><strong><code>name</code></strong>: Ім'я властивості, яка була змінена.</li> + <li><strong><code>object</code></strong>: Змінений масив після того, як відбулась зміна.</li> + <li><strong><code>type</code></strong>: Строка, що вказує тип зміни. Один з <code>"add"</code>, <code>"update"</code>, <code>"delete"</code>, або <code>"splice"</code>.</li> + <li><strong><code>oldValue</code></strong>: Тільки для типів <code>"update"</code> та <code>"delete"</code>. Значення перед зміною.</li> + <li><strong><code>index</code></strong>: Тільки для типу <code>"splice"</code>. Індекс, за яким відбулася зміна.</li> + <li><strong><code>removed</code></strong>: Тільки для типу <code>"splice"</code>. Масив видалених елементів.</li> + <li><strong><code>addedCount</code></strong>: Тільки для типу <code>"splice"</code>. Кількість доданих елементів.</li> + </ul> + </dd> + </dl> + </dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Функція <code>callback</code> викликається кожен раз, коли у <code>arr</code> відбувається зміна, з масивом усіх змін у порядку, в якому вони відбувались.</p> + +<div class="note"> +<p>Зміни, зроблені методами масивів, такими як <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"><code>Array.prototype.pop()</code></a>, будуть записані як <code>"splice"</code>. Зміни, пов'язані з призначенням величин за індексом, які не змінюють довжину масиву, можуть бути записані як <code>"update"</code>.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Логування_різних_типів_змін">Логування різних типів змін</h3> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +Array.observe(arr, function(changes) { + console.log(changes); +}); + +arr[1] = 'B'; +// [{type: 'update', object: <arr>, name: '1', oldValue: 'b'}] + +arr[3] = 'd'; +// [{type: 'splice', object: <arr>, index: 3, removed: [], addedCount: 1}] + +arr.splice(1, 2, 'beta', 'gamma', 'delta'); +// [{type: 'splice', object: <arr>, index: 1, removed: ['B', 'c'], addedCount: 3}] +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.observe")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="//stackoverflow.com/q/29269057/778272">Under what condition would Array.observe's “add” event trigger?</a></li> + <li>{{jsxref("Array.unobserve()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/of/index.html b/files/uk/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..457b8696bf --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,100 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +tags: + - Array + - ECMAScript6 + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Array.of()</strong></code> створює новий екземпляр <code>Array</code> з заданої кількості аргументів, незважаючи на кількість або тип аргументів.</p> + +<p>Різниця між <code><strong>Array.of()</strong></code> та конструктором <code><strong>Array</strong></code> полягає у поводженні з цілочисельними аргументами: <code><strong>Array.of(7)</strong></code> створює масив з єдиним елементом <code>7</code>, в той час як <code><strong>Array(7)</strong></code> створює порожній масив з величиною властивості <code>length</code>, що дорівнює 7 (<strong>Зауважте:</strong> мається на увазі масив з <code>7</code> порожніми елементами, а не елементами, що дорівнюють <code>undefined</code>).</p> + +<pre class="brush: js">Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // масив з 7-ми порожніх елементів +Array(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Елементи, з яких треба створити масив.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Новий екземпляр {{jsxref("Array")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Ця функція є частиною стандарту ECMAScript 2015. Щоб дізнатися більше, дивіться <a href="https://gist.github.com/rwaldron/1074126">проект <code>Array.of</code> та <code>Array.from</code></a> та <a href="https://gist.github.com/rwaldron/3186576">поліфіл <code>Array.of</code></a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Виконання цього коду перед будь-яким іншим кодом створить метод <code>Array.of()</code>, якщо він не підтримується початково.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + // Або + let vals = [] + for(let prop in arguments){ + vals.push(arguments[prop]) + } + return vals.slice() +}</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('ES2015', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/pop/index.html b/files/uk/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..7be2a9f433 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,118 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +tags: + - JavaScript + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>pop()</strong></code> видаляє останній елемент масиву та повертає цей елемент.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>arr</var>.pop()</code> +</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Видалений елемент масиву; {{jsxref("undefined")}}, якщо масив був порожній.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>pop</code> видаляє останній елемент масиву та повертає його.</p> + +<p>Метод <code>pop</code> є навмисно загальним; він може бути {{jsxref("Function.call", "викликаний", "", 1)}} або {{jsxref("Function.apply", "застосований", "", 1)}} до об'єктів, схожих на масиви. Об'єкти, які не мають властивості <code>length</code>, що відображає останній елемент в серії послідовних числових властивостей, які починаються з нуля, можуть поводити себе неправильно.</p> + +<p>Якщо ви викличите <code>pop()</code> на порожньому масиві, він поверне {{jsxref("undefined")}}.</p> + +<p>Метод {{jsxref("Array.prototype.shift()")}} має схожу з <code>pop</code> поведінку, але застосовується до першого елемента масиву.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Видалення_останнього_елемента_масиву">Видалення останнього елемента масиву</h3> + +<p>Наступний код створює масив <code>myFish</code> , який містить чотири елементи, а потім видаляє останній елемент.</p> + +<pre class="brush: js">var myFish = ['янгол', 'клоун', 'мандарин', 'осетер']; + +console.log(myFish); // ['янгол', 'клоун', 'мандарин', 'осетер'] + +var popped = myFish.pop(); + +console.log(myFish); // ['янгол', 'клоун', 'мандарин' ] + +console.log(popped); // 'осетер' +</pre> + +<h3 id="Використання_apply(_)_або_call_(_)_на_подібних_до_масиву_об'єктах">Використання apply( ) або call ( ) на подібних до масиву об'єктах</h3> + +<p>Наступний код створює подібний до масиву об'єкт <code>myFish</code>, який має чотири елементи та параметр довжини length, потім видаляє його останній елемент та зменшує параметр length.</p> + +<pre><code>var myFish = {0:'янгол', 1:'клоун', 2:'мандарин', 3:'осетер', length: 4}; + +var popped = Array.prototype.pop.call(myFish); //такий самий синтаксис для apply( ) + +console.log(myFish); // {0:'янгол', 1:'клоун', 2:'мандарин', length: 3} + +console.log(popped); // 'осетер'</code></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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table in 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.pop")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/prototype/index.html b/files/uk/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..a4af191650 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,185 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +tags: + - Array + - JavaScript + - Property + - Джава Скріпт + - Масив + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +<div>{{JSRef}}</div> + +<p>Поле <strong><code>Array.prototype</code></strong> представляє собою прототип для конструктора {{jsxref("Array")}} і дозволяє вам додавати нові поля і методи до всіх об'єктів-масивів (Array).</p> + +<pre><code>// Якщо JavaScript не реалізовує метод first() початково, +// додайте новий метод, який буде повертати перший елемент масиву. + +if (!Array.prototype.first) { + Array.prototype.first = function() { + return this[0]; + } +}</code> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Екземпляри {{jsxref("Array")}} успадковуються від <code>Array.prototype</code>. Як і з всіх конструкторів, ви можете змінити прототип конструктора об'єкта, щоб внести зміни у всі екземпляри {{jsxref("Array")}}. Для прикладу, це використовується для {{Glossary("Polyfill", "polyfilling")}}.</p> + +<p>Маловідомий факт: <code>Array.prototype</code> сам є масивом {{jsxref("Array")}}:</p> + +<pre class="brush: js">Array.isArray(Array.prototype); // true +</pre> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>Array.prototype.constructor</code></dt> + <dd>Визначає функцію, що створює прототип об'єкта.</dd> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>Відображає кількість елементів в масиві.</dd> + <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> + <dd>Символ, який містить назви властивостей, які повинні бути виключені з області зв'язування <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<h3 id="Методи_модифікації">Методи модифікації</h3> + +<p>Ці методи модифікують масив:</p> + +<dl> + <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> + <dd>Копіює послідовність елементів масиву всередині масиву.</dd> + <dt>{{jsxref("Array.prototype.fill()")}}</dt> + <dd>Заповнює всі елементи масиву від початкового індексу до кінцевого статичними значеннями.</dd> + <dt>{{jsxref("Array.prototype.pop()")}}</dt> + <dd>Видаляє та повертає останній елемент масиву.</dd> + <dt>{{jsxref("Array.prototype.push()")}}</dt> + <dd>Додає один чи більше елементів в кінець масиву та повертає нову довжину масиву.</dd> + <dt>{{jsxref("Array.prototype.reverse()")}}</dt> + <dd>Змінює порядок елементів масиву на протилежний, викорустовуючи той самий масив — перший стає останнім, а останній - першим.</dd> + <dt>{{jsxref("Array.prototype.shift()")}}</dt> + <dd>Видаляє та повертає перший елемент масиву.</dd> + <dt>{{jsxref("Array.prototype.sort()")}}</dt> + <dd>Сортує елементи всередині масиву, та повертає цей масив.</dd> + <dt>{{jsxref("Array.prototype.splice()")}}</dt> + <dd>Добавляє і/або видаляє елементи з масиву.</dd> + <dt>{{jsxref("Array.prototype.unshift()")}}</dt> + <dd>Добавляє один або більше елементів у початок масиву та повертає нову довжину масиву.</dd> +</dl> + +<h3 id="Методи_доступу">Методи доступу</h3> + +<p>Ці методи не модифікують масив та повертають якесь його представлення.</p> + +<dl> + <dt>{{jsxref("Array.prototype.concat()")}}</dt> + <dd>Повертає новий масив, який складається з цього масиву, об'єднаного з іншим(и) масив(ом/ами) та/або іншими значеннями.</dd> + <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>Визначає, чи масив містить певний елемент, повертаючи, відповідно, <code>true</code> або <code>false</code>.</dd> + <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> + <dd>Повертає перший (останній) індекс елемента всередині даного масиву, який дорівнює вказаному значенню, або -1 якщо нічого не було знайдено.</dd> + <dt>{{jsxref("Array.prototype.join()")}}</dt> + <dd>Об'єднує всі елементи масиву у рядок.</dd> + <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> + <dd>Повертає останній (найбільший) індекс елемента всередині даного масиву, який рівний вказаному значенню, або -1 якщо нічого не було знайдено.</dd> + <dt>{{jsxref("Array.prototype.slice()")}}</dt> + <dd>Витягує частину масиву та повертає новий масив.</dd> + <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Повертає літерал масиву, який відображає вказаний масив; ви можете використовувати це значення для створення нового масиву. Перевизначає метод {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Array.prototype.toString()")}}</dt> + <dd>Повертає рядок, яка відображає даний масив та його елементи. Перевизначає метод {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> + <dd>Повертає локалізований рядок, яка відображає даний масив та його елементи. Перевизначає метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd> +</dl> + +<h3 id="Методи_перебору">Методи перебору</h3> + +<p>Декілька методів приймають у якості аргументів функції, які будуть викликані у процесі обробки масиву. Коли ці методи викликаються, довжина поля <code>length</code> вибраного масиву запам'ятовується, і будь-які елементи, додані поза цією довжиною зсередини функції зворотнього виклику (callback), не будуть обходитися. Інші зміни до масиву (встановлення значення елементу або його видалення) можуть впливати на результат операції, якщо метод після цього звертається до зміненого елемента. Хоча специфічна поведінка цих методів у даних випадках є добре визначеною, не варто на неї надто покладатися, щоб не заплутати тих, хто може прочитати ваш код. Якщо вам необхідно змінити даний масив, краще скопіюйте його у новий масив.</p> + +<dl> + <dt>{{jsxref("Array.prototype.entries()")}}</dt> + <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить пари ключ/значення для кожного індекса в даному масиві.</dd> + <dt>{{jsxref("Array.prototype.every()")}}</dt> + <dd>Повертає <code>true</code>, якщо кожен елемент у цьому масиві виконує умови переданої тест-функції.</dd> + <dt>{{jsxref("Array.prototype.filter()")}}</dt> + <dd>Створює новий масив зі всіма елементами цього масиву, для яких передана функція фільтрації повертае <code>true</code>.</dd> + <dt>{{jsxref("Array.prototype.find()")}}</dt> + <dd>Повертає знайдене у масиві значення, якщо елемент у цьому масиві виконує умови переданої тест-функції або <code>undefined</code> якщо елемента не знайдено.</dd> + <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> + <dd>Повертає знайдений у масиві індекс, якщо елемент у цьому масиві виконує умови переданої тест-функції або <code>-1</code> якщо елемента не знайдено.</dd> + <dt>{{jsxref("Array.prototype.forEach()")}}</dt> + <dd>Викликає функцію для кожного елементу масиву.</dd> + <dt>{{jsxref("Array.prototype.keys()")}}</dt> + <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить ключі для кожного індекса в даному масиві.</dd> + <dt>{{jsxref("Array.prototype.map()")}}</dt> + <dd>Створює новий масив з результатами виклику на кожному елементі масиву переданої функції.</dd> + <dt>{{jsxref("Array.prototype.reduce()")}}</dt> + <dd>Застосовує функцію над акумулятором та кожним значенням даного масиву (зліва направо), щоб скоротити його до єдиного значення.</dd> + <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> + <dd>Застосовує функцію над акумулятором та кожним значенням даного масиву (справа наліво), щоб скоротити його до єдиного значення.</dd> + <dt>{{jsxref("Array.prototype.some()")}}</dt> + <dd>Повертає <code>true</code>, якщо принаймні один елемент у цьому масиві виконує умови переданої тест-функції.</dd> + <dt>{{jsxref("Array.prototype.values()")}}</dt> + <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить значення для кожного індекса в масиві.</dd> + <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> + <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить значення для кожного індекса в масиві.</dd> +</dl> + +<h3 id="Загальні_методи_(нестандартні)">Загальні методи (нестандартні)</h3> + +<p>Багато методів на JavaScript об'єкті Array спроектовані таким чином, щоб їх можна було застосувати на всіх об'ектах, які "виглядають як" масиви. Таким чином, вони можуть бути використані на будь-якому об'єкті, у якого є поле <code>length</code>, а також тих об'єктах, доступ до яких можна отримати завдяки числовим назвам полів (як з індексацією масиву <code>array[5]</code>). Деякі методи, такі як {{jsxref("Array.join", "join")}}, лише зчитують довжину (length) і числові поля об'єктів, на яких вони викликаються. Інші, такі як {{jsxref("Array.reverse", "reverse")}}, вимагають, щоб числові поля об'єкту та поле <code>length</code> були доступні для редагування; тому ці методи можуть не викликатися на об'єктах типу {{jsxref("String")}}, який не дозволяє редагувати його поле <code>length</code> або синтезовані числові поля.</p> + +<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.3.1', 'Array.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Додані методи <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex().</code></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Доданий метод <code>includes()</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_веб-переглядачами">Сумісність із веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table in 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.prototype")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/push/index.html b/files/uk/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..af185f399f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,136 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Global_Objects/Array/push +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>push()</strong></code> додає один або більше елементів у кінець масиву та повертає нову довжину масиву.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div> + +<p class="hidden">Джерело цього інтерактивного прикладу зберігається у репозіторії на GitHub. Якщо ви бажаєте залучитися до проекту зі створення інтерактивних прикладів, будь ласка, скопіюйте це посилання <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та надішліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.push(<var>element1</var>[, ...[, <var>elementN</var>]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Елементи, що додаються у кінець масиву.</dd> +</dl> + +<h3 id="Повернене_значення">Повернене значення</h3> + +<p>Нова {{jsxref("Array.length", "length")}} властивість об'єкта, на якому був визваний цей метод.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>push</code> додає значення у масив.</p> + +<p><code>push</code> було навмисно створено загальним методом. Він може використовуватися з {{jsxref("Function.call", "call()")}} або {{jsxref("Function.apply", "apply()")}} на об'єктах, подібних до масивів. Метод <code>push</code> спирається на властивість <code>length</code>, щоб розуміти, з якого місця починати додавання заданих значень. Якщо властивість <code>length</code> неможливо перетворити на число, використовується індекс рівний 0. До цього також належить випадок, коли властивості <code>length</code> взагалі не існує, y цьому разі <code>length</code> також буде створено.</p> + +<p>Хоча {{jsxref("Global_Objects/String", "strings", "", 1)}} - це найближчі, масивоподібні об'єкти, з ними неможливо використовувати цей метод, оскільки рядки є незмінними. Аналогічно до найближчого, масивоподібного об'єкта {{jsxref("Functions/arguments", "arguments", "", 1)}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Додавання_елементів_у_масив">Додавання елементів у масив</h3> + +<p>Наступний приклад створює <code>sports</code> масив з двома елементами, потім у нього додаються еще два елементи. Змінна <code>total</code> містить нову довжину масиву.</p> + +<pre class="brush: js">var sports = ['soccer', 'baseball']; +var total = sports.push('football', 'swimming'); + +console.log(sports); // ['soccer', 'baseball', 'football', 'swimming'] +console.log(total); // 4 +</pre> + +<h3 id="Поєднання_двох_масивів">Поєднання двох масивів</h3> + +<p>Цей приклад використовує {{jsxref("Function.apply", "apply()")}} для того, щоб запушити усі елементи з другого масиву.</p> + +<p><em>Не</em> використовуйте цей метод, якщо другий масив (<code>moreVegs</code> у цьому прикладі) занадто великий, оскільки максимальна кількість параметрів, які може вмістити одна функція обмежена, як доводить це практика. Дивиться {{jsxref("Function.apply", "apply()")}} для отримання більш докладної інформації.</p> + +<pre class="brush: js">var vegetables = ['parsnip', 'potato']; +var moreVegs = ['celery', 'beetroot']; + +// Merge the second array into the first one +// Equivalent to vegetables.push('celery', 'beetroot'); +Array.prototype.push.apply(vegetables, moreVegs); + +console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot'] +</pre> + +<h3 id="Використання_об'єкта_у_масивоподібний_спосіб">Використання об'єкта у масивоподібний спосіб</h3> + +<p>Як зазначено вище, <code>push</code> було навмисно створено загаліним методом, і це може зіграти нам на користь. <code>Array.prototype.push</code> добре працює на об'єктах, як це показує наш приклад. Зауважте, що ми не створюємо масив для зберігання колекції об'єктів. Натомість ми зберігаємо колекцію у самому об'єкті та використовуємо метод <code>call</code> на <code>Array.prototype.push</code>, щоб змусити його думати, начебто ми використовуємо його на масиві, і це працює, завдяки тому, що JavaScript дозволяє нам встановлювати контекст використання, як нам зручно.</p> + +<pre class="brush: js">var obj = { + length: 0, + + addElem: function addElem(elem) { + // obj.length is automatically incremented + // every time an element is added. + [].push.call(this, elem); + } +}; + +// Let's add some empty objects just to illustrate. +obj.addElem({}); +obj.addElem({}); +console.log(obj.length); +// → 2 +</pre> + +<p>Зверніть увагу, що <code>obj</code> хоч і не є масивом, метод <code>push</code> успішно збільшив його властивість <code>length</code> так само, наче б ми мали справу зі справжнім масивом.</p> + +<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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізоване в JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці береться зі струкрутованих даних. кщо ви бажаєте залучитися до створення цих даних, будь ласка, перегляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам pull request.</div> + +<p>{{Compat("javascript.builtins.Array.push")}}</p> +</div> + +<h2 id="Дивиться_також">Дивиться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/reduce/index.html b/files/uk/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..0f9ce6e0e2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,578 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce +tags: + - ECMAScript 5 + - JavaScript + - Reduce + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>reduce()</strong></code> виконує функцію <strong>reducer</strong> (функцію вказуєте ви) для кожного елемента масиву та повертає єдине значення.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div> + + + +<p>Функія <strong>reducer</strong> отримує чотири параметри:</p> + +<ol> + <li>Accumulator (<em><code>acc</code></em>) - Акумулятор</li> + <li>Current Value (<code><em>cur</em></code>) - Поточне значення</li> + <li>Current Index (<em><code>idx</code></em>) - Поточний індекс</li> + <li>Source Array (<em><code>src</code></em>) - Вхідний масив</li> +</ol> + +<p>Функція <strong>reducer</strong> повертає значення та присовює його акумулятору. Значення аккумулятора запам'ятовується через усі ітерації і повертається наприкінці як єдиний результат.</p> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="notranslate"><var>arr</var>.reduce(<var>callback</var>( <var>accumulator</var>, <var>currentValue</var>[, <var>index</var>[, <var>array</var>]] )[, +<var>initialValue</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><em><code>callback</code></em></dt> + <dd>Фунція, що виконується з кожним елементом масиву (приймає 4 аргументи): + <dl> + <dt><em><code>accumulator</code></em></dt> + <dd>Акумулює значення, які повертає <code>callback</code>. В акумуляторі зберігається попереднє значення результату виклику <code>callback</code> функції або <code>initialValue</code>, якщо воно було надано (дивись нижче).</dd> + <dt><em><code>currentValue</code></em></dt> + <dd>Поточний елемент, над яким виконується дія.</dd> + <dt><em><code>currentIndex</code></em>{{optional_inline}}</dt> + <dd>Індекс поточного елемента, над яким виконується дія. Починається із 0 індексу, якщо, було надано значення <code>initialValue</code>, інакше з 1 .</dd> + <dt><em><code>array</code></em>{{optional_inline}}</dt> + <dd>Масив, для якого було викликано <code>reduce()</code>.</dd> + </dl> + </dd> + <dt><em><code>initialValue</code></em>{{optional_inline}}</dt> + <dd>Значення, що буде використане як перший аргумент під час виклику <code>callback</code> функції. Якщо це значення не було задане, буде використано перший елемент масиву. Виклик <code>reduce()</code> на порожньому масиві без вказання initial value призведе до помилки.</dd> +</dl> + +<h3 id="Значення_яке_буде_повернене">Значення, яке буде повернене</h3> + +<p>Значення, що зберігається в акумуляторі після останньої ітерації.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>reduce()</code> виконує <em><code>callback</code> </em>функцію один раз для кожного елемента масиву за виключенням дірок (порожніх елементів). Функція отримує чотири аргументи:</p> + +<ul> + <li><em><code>accumulator</code></em></li> + <li><em><code>currentValue</code></em></li> + <li><em><code>currentIndex</code></em></li> + <li><em><code>array</code></em></li> +</ul> + +<p>При першому виклику <em><code>callback</code> </em>функції <em><code>accumulator</code></em> і <em><code>currentValue</code></em> можуть мати одне із двох значень. Якщо значення <em><code>initialValue</code></em> задане при виклику <code>reduce()</code>, значення <em><code>accumulator</code></em> дорівнюватиме значенню <em><code>initialValue</code></em>, а <em><code>currentValue</code></em> дорівнюватиме першому елементу масиву. Якщо значення <em><code>initialValue</code></em> не задане, <em><code>accumulator</code></em> буде рівним першому елементу масиву, а <em><code>currentValue</code></em> -- другому.</p> + +<div class="note"> +<p><strong>Примітка:</strong> Якщо значення <code>initialValue</code> не задане, <code>reduce()</code> виконуватиме <code>callback</code> функцію починаючи з індексу 1, пропустивши перший індекс. Якщо <code>initialValue</code> задане, виконання почнеться із 0-го індексу.</p> +</div> + +<p>Якщо масив порожній і значення <code>initialValue</code> не задане, буде створено помилку {{jsxref("TypeError")}}. Якщо масив складається тільки з одного елемента (незалежно від його позиції) і значення <code>initialValue</code> не задане, або якщо значення <code>initialValue</code> задане, але масив порожній, буде повернуто єдине наявне значення, а <em>функція <code>callback</code> не буде викликана</em>.</p> + +<p>Зазвичай безпечніше вказувати початкове значення (<code>initialValue</code>), адже без нього можливі три різні результати (див. приклад).</p> + +<pre class="brush: js notranslate">var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x ); +var maxCallback2 = ( max, cur ) => Math.max( max, cur ); + +// reduce() без initialValue +[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42 +[ { x: 22 } ].reduce( maxCallback ); // { x: 22 } +[ ].reduce( maxCallback ); // TypeError + +// map/reduce; краще рішення, працюватиме також для порожніх чи великих масивів +[ { x: 22 }, { x: 42 } ].map( el => el.x ) + .reduce( maxCallback2, -Infinity ); +</pre> + +<h3 id="Як_працює_reduce">Як працює reduce()</h3> + +<p>Нехай відбувся наступний виклик <code>reduce()</code>:</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) { + return accumulator + currentValue; +}); +</pre> + +<p><code>callback</code> буде викликано чотири рази із наступними аргументами та значеннями, поверненими при кожному виклику:</p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">повернене<br> + значення</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">перший виклик</th> + <td><code>0</code></td> + <td><code>1</code></td> + <td>1</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">другий виклик</th> + <td><code>1</code></td> + <td><code>2</code></td> + <td>2</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>3</code></td> + </tr> + <tr> + <th scope="row">третій виклик</th> + <td><code>3</code></td> + <td><code>3</code></td> + <td>3</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>6</code></td> + </tr> + <tr> + <th scope="row">четвертий виклик</th> + <td><code>6</code></td> + <td><code>4</code></td> + <td>4</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>Значення, повернене <code>reduce()</code> буде значенням, отриманим при останньому виклику <code>callback</code> (<code>10</code>).</p> + +<p>The value returned by <code>reduce()</code> would be that of the last callback invocation (<code>10</code>).</p> + +<p>Можна також задати {{jsxref("Functions/Arrow_functions", "Arrow Function","",1)}} замість повної функції. Наступний код згенерує такий самий результат, як код у попередньому блоці.</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) => accumulator + currentValue ); +</pre> + +<p>Якщо початкове значення (<code>initialValue)</code> задати як другий аргумент функції <code>reduce()</code>, результат буде наступним:</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { + return accumulator + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">повернене значення</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">перший виклик</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">другий виклик</th> + <td><code>10</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>11</code></td> + </tr> + <tr> + <th scope="row">третій виклик</th> + <td><code>11</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>13</code></td> + </tr> + <tr> + <th scope="row">четвертий виклик</th> + <td><code>13</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>16</code></td> + </tr> + <tr> + <th scope="row"> + <p>п'ятий виклик</p> + </th> + <td><code>16</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>Значення, повернене функцією <code>reduce()</code> у цьому випадку дорівнюватиме <code>20</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Сума_усіх_елементів_масиву">Сума усіх елементів масиву</h3> + +<pre class="brush: js notranslate">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { + return accumulator + currentValue; +}, 0); +// sum is 6 + +</pre> + +<p>Приклад вище, реалізований за допомогою arrow function:</p> + +<pre class="brush: js notranslate">var total = [ 0, 1, 2, 3 ].reduce( + ( accumulator, currentValue ) => accumulator + currentValue, + 0 +);</pre> + +<h3 id="Сума_значень_у_масиві_обєктів">Сума значень у масиві об'єктів</h3> + +<p>Щоб підсумувати значення, що знаходяться у масиві об'єктів, Ви <strong>повинні</strong> вказати початкове значення для того, щоб для кожного із елементів була викликана Ваша функція.</p> + +<pre class="brush: js notranslate">var initialValue = 0; +var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) { + return accumulator + currentValue.x; +},initialValue) + +console.log(sum) // logs 6 +</pre> + +<p>Також за допомогою arrow function: </p> + +<pre class="brush: js notranslate">var initialValue = 0; +var sum = [{x: 1}, {x:2}, {x:3}].reduce( + (accumulator, currentValue) => accumulator + currentValue.x + ,initialValue +); + +console.log(sum) // logs 6</pre> + +<h3 id="Сплюснути_flatten_масив_масивів">Сплюснути (flatten) масив масивів</h3> + +<p>Сплющення (flattening) - процес, у результаті якого із масиву масивів отримуємо один масив, що містить елементи усіх вкладених масивів.</p> + +<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + function(accumulator, currentValue) { + return accumulator.concat(currentValue); + }, + [] +); +// flattened is [0, 1, 2, 3, 4, 5] +</pre> + +<p>Також за допомогою arrow function:</p> + +<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + ( accumulator, currentValue ) => accumulator.concat(currentValue), + [] +); +</pre> + +<h3 id="Підрахунок_кількості_однакових_значень_у_обєкті">Підрахунок кількості однакових значень у об'єкті</h3> + +<pre class="brush: js notranslate">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; + +var countedNames = names.reduce(function (allNames, name) { + if (name in allNames) { + allNames[name]++; + } + else { + allNames[name] = 1; + } + return allNames; +}, {}); +// countedNames is: +// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 } +</pre> + +<h3 id="Групування_обєктів_за_властивістю_property">Групування об'єктів за властивістю (property)</h3> + +<pre class="brush: js notranslate">var people = [ + { name: 'Alice', age: 21 }, + { name: 'Max', age: 20 }, + { name: 'Jane', age: 20 } +]; + +function groupBy(objectArray, property) { + return objectArray.reduce(function (acc, obj) { + var key = obj[property]; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(obj); + return acc; + }, {}); +} + +var groupedPeople = groupBy(people, 'age'); +// groupedPeople is: +// { +// 20: [ +// { name: 'Max', age: 20 }, +// { name: 'Jane', age: 20 } +// ], +// 21: [{ name: 'Alice', age: 21 }] +// } +</pre> + +<h3 id="Bonding_arrays_contained_in_an_array_of_objects_using_the_spread_operator_and_initialValue">Bonding arrays contained in an array of objects using the spread operator and initialValue</h3> + +<pre class="brush: js notranslate">// friends - an array of objects +// where object field "books" - list of favorite books +var friends = [{ + name: 'Anna', + books: ['Bible', 'Harry Potter'], + age: 21 +}, { + name: 'Bob', + books: ['War and peace', 'Romeo and Juliet'], + age: 26 +}, { + name: 'Alice', + books: ['The Lord of the Rings', 'The Shining'], + age: 18 +}]; + +// allbooks - list which will contain all friends' books + +// additional list contained in initialValue +var allbooks = friends.reduce(function(accumulator, currentValue) { + return [...accumulator, ...currentValue.books]; +}, ['Alphabet']); + +// allbooks = [ +// 'Alphabet', 'Bible', 'Harry Potter', 'War and peace', +// 'Romeo and Juliet', 'The Lord of the Rings', +// 'The Shining' +// ]</pre> + +<h3 id="Видалення_повторюваних_значень_у_масиві">Видалення повторюваних значень у масиві</h3> + +<pre class="brush: js notranslate">let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]; +let result = arr.sort().reduce((accumulator, current) => { + const length = accumulator.length + if (length === 0 || accumulator[length - 1] !== current) { + accumulator.push(current); + } + return accumulator; +}, []); +console.log(result); //[1,2,3,4,5] +</pre> + +<h3 id="Запуск_Promises_у_послідовності">Запуск Promises у послідовності</h3> + +<pre class="brush: js notranslate">/** + * Runs promises from array of functions that can return promises + * in chained manner + * + * @param {array} arr - promise arr + * @return {Object} promise object + */ +function runPromiseInSequence(arr, input) { + return arr.reduce( + (promiseChain, currentFunction) => promiseChain.then(currentFunction), + Promise.resolve(input) + ); +} + +// promise function 1 +function p1(a) { + return new Promise((resolve, reject) => { + resolve(a * 5); + }); +} + +// promise function 2 +function p2(a) { + return new Promise((resolve, reject) => { + resolve(a * 2); + }); +} + +// function 3 - will be wrapped in a resolved promise by .then() +function f3(a) { + return a * 3; +} + +// promise function 4 +function p4(a) { + return new Promise((resolve, reject) => { + resolve(a * 4); + }); +} + +const promiseArr = [p1, p2, f3, p4]; +runPromiseInSequence(promiseArr, 10) + .then(console.log); // 1200 +</pre> + +<h3 id="Function_composition_enabling_piping">Function composition enabling piping</h3> + +<pre class="brush: js notranslate">// Building-blocks to use for composition +const double = x => x + x; +const triple = x => 3 * x; +const quadruple = x => 4 * x; + +// Function composition enabling pipe functionality +const pipe = (...functions) => input => functions.reduce( + (acc, fn) => fn(acc), + input +); + +// Composed functions for multiplication of specific values +const multiply6 = pipe(double, triple); +const multiply9 = pipe(triple, triple); +const multiply16 = pipe(quadruple, quadruple); +const multiply24 = pipe(double, triple, quadruple); + +// Usage +multiply6(6); // 36 +multiply9(9); // 81 +multiply16(16); // 256 +multiply24(10); // 240 + +</pre> + +<h3 id="write_map_using_reduce">write map using reduce</h3> + +<pre class="brush: js notranslate">if (!Array.prototype.mapUsingReduce) { + Array.prototype.mapUsingReduce = function(callback, thisArg) { + return this.reduce(function(mappedArray, currentValue, index, array) { + mappedArray[index] = callback.call(thisArg, currentValue, index, array); + return mappedArray; + }, []); + }; +} + +[1, 2, , 3].mapUsingReduce( + (currentValue, index, array) => currentValue + index + array.length +); // [5, 7, , 10] + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.21 +// Reference: http://es5.github.io/#x15.4.4.21 +// https://tc39.github.io/ecma262/#sec-array.prototype.reduce +if (!Array.prototype.reduce) { + Object.defineProperty(Array.prototype, 'reduce', { + value: function(callback /*, initialValue*/) { + if (this === null) { + throw new TypeError( 'Array.prototype.reduce ' + + 'called on null or undefined' ); + } + if (typeof callback !== 'function') { + throw new TypeError( callback + + ' is not a function'); + } + + // 1. Let O be ? ToObject(this value). + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // Steps 3, 4, 5, 6, 7 + var k = 0; + var value; + + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k < len && !(k in o)) { + k++; + } + + // 3. If len is 0 and initialValue is not present, + // throw a TypeError exception. + if (k >= len) { + throw new TypeError( 'Reduce of empty array ' + + 'with no initial value' ); + } + value = o[k++]; + } + + // 8. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kPresent be ? HasProperty(O, Pk). + // c. If kPresent is true, then + // i. Let kValue be ? Get(O, Pk). + // ii. Let accumulator be ? Call( + // callbackfn, undefined, + // « accumulator, kValue, k, O »). + if (k in o) { + value = callback(value, o[k], k, o); + } + + // d. Increase k by 1. + k++; + } + + // 9. Return accumulator. + return value; + } + }); +} +</pre> + +<p>If you need to support truly obsolete JavaScript engines that don't support <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a></code>, it's best not to polyfill <code>Array.prototype</code> methods at all, as you can't make them <strong>non-enumerable</strong>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reduce")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/reduceright/index.html b/files/uk/web/javascript/reference/global_objects/array/reduceright/index.html new file mode 100644 index 0000000000..2471147574 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/reduceright/index.html @@ -0,0 +1,364 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +tags: + - Array + - ECMAScript5 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>reduceRight()</strong></code> застосовує функцію до акумулятора та кожного елемента масиву (справа наліво), зменшуючи його до єдиного значення.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}</div> + + + +<p>Дивіться також {{jsxref("Array.prototype.reduce()")}}, який виконується зліва направо.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])</var></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, яка виконується на кожному елементі масиву. Приймає чотири аргументи: + <dl> + <dt><code>accumulator</code></dt> + <dd>Значення, яке було повернене з попереднього виклику функції, або <code>initialValue</code>, якщо є. (Дивіться нижче.)</dd> + <dt><code>currentValue</code></dt> + <dd>Поточний елемент масиву, що опрацьовується.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Індекс поточного елемента масиву.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Масив, для якого було викликано <code>reduceRight()</code>.</dd> + </dl> + </dd> + <dt><code>initialValue</code>{{optional_inline}}</dt> + <dd>Значення, що використовується в якості акумулятора для першого виклику <code>callback</code>. Якщо початкового значення нема, то буде використаний та пропущений останній елемент масиву. Виклик <code>reduce</code> або <code>reduceRight</code> на порожньому масиві без початкового значення створить виняток <code>TypeError</code>.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Значення, що є результатом зменшення.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>reduceRight</code> виконує функцію зворотного виклику один раз для кожного елемента у масиві, крім порожніх елементів, отримуючи чотири аргументи: початкове значення (або значення від попереднього виклику функції), значення поточного елемента, поточний індекс та масив, обхід якого виконується.</p> + +<p>Виклик функції <code>callback</code> у reduceRight виглядатиме десь так:</p> + +<pre class="brush: js">array.reduceRight(function(accumulator, currentValue, index, array) { + // ... +}); +</pre> + +<p>Коли функція викликається вперше, <code>accumulator</code> та <code>currentValue</code> можуть мати одне з двох значень. Якщо значення <code>initialValue</code> було надане під час виклику <code>reduceRight</code>, тоді <code>accumulator</code> дорівнюватиме <code>initialValue</code>, а <code>currentValue</code> останньому елементу масиву. Якщо значення <code>initialValue</code> не визначено, тоді <code>accumulator</code> дорівнюватиме останньому елементу масиву, а <code>currentValue</code> передостанньому.</p> + +<p>Якщо масив порожній, а <code>initialValue</code> не надано, то буде викинуто виняток {{jsxref("TypeError")}}. Якщо масив має лише один елемент (незалежно від позиції), і немає значення <code>initialValue</code>, або якщо <code>initialValue</code> надано, але масив порожній, це єдине значення повернеться без виклику <code>callback</code>.</p> + +<p>Для прикладу, функція може виглядати так:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { + return accumulator + currentValue; +}); +</pre> + +<p>Функція зворотного виклику буде виконана чотири рази, аргументи та значення, які повертаються, наведені нижче:</p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">вертає</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">перший виклик</th> + <td><code>4</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>7</code></td> + </tr> + <tr> + <th scope="row">другий виклик</th> + <td><code>7</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>9</code></td> + </tr> + <tr> + <th scope="row">третій виклик</th> + <td><code>9</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">четвертий виклик</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>Значення, яке повертає <code>reduceRight</code> буде тим, яке вертає останній виклик <code>callback</code> (<code>10</code>).</p> + +<p>А якби ви надали значення <code>initialValue</code>, результат виглядав би так:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { + return accumulator + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">вертає</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">перший виклик</th> + <td><code>10</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>14</code></td> + </tr> + <tr> + <th scope="row">другий виклик</th> + <td><code>14</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>17</code></td> + </tr> + <tr> + <th scope="row">третій виклик</th> + <td><code>17</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>19</code></td> + </tr> + <tr> + <th scope="row">четвертий виклик</th> + <td><code>19</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + <tr> + <th scope="row">п'ятий виклик</th> + <td><code>20</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>Цього разу <code>reduceRight</code>, звісно, повернув би <code>20</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Знайти_суму_елементів_масиву">Знайти суму елементів масиву</h3> + +<pre class="brush: js">var sum = [0, 1, 2, 3].reduceRight(function(a, b) { + return a + b; +}); +// сума дорівнює 6 +</pre> + +<h3 id="Вирівняти_масив_масивів">Вирівняти масив масивів</h3> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { + return a.concat(b); +}, []); +// Результат [4, 5, 2, 3, 0, 1] + +</pre> + +<h3 id="Виконати_послідовно_набір_асинхронних_функцій_з_функціями_зворотного_виклику_щоб_кожна_передавала_свій_результат_у_наступну">Виконати послідовно набір асинхронних функцій з функціями зворотного виклику, щоб кожна передавала свій результат у наступну</h3> + +<pre class="brush: js">const waterfall = (...functions) => (callback, ...args) => + functions.reduceRight( + (composition, fn) => (...results) => fn(composition, ...results), + callback + )(...args); + +const randInt = max => Math.floor(Math.random() * max) + +const add5 = (callback, x) => { + setTimeout(callback, randInt(1000), x + 5); +}; +const mult3 = (callback, x) => { + setTimeout(callback, randInt(1000), x * 3); +}; +const sub2 = (callback, x) => { + setTimeout(callback, randInt(1000), x - 2); +}; +const split = (callback, x) => { + setTimeout(callback, randInt(1000), x, x); +}; +const add = (callback, x, y) => { + setTimeout(callback, randInt(1000), x + y); +}; +const div4 = (callback, x) => { + setTimeout(callback, randInt(1000), x / 4); +}; + +const computation = waterfall(add5, mult3, sub2, split, add, div4); +computation(console.log, 5) // -> 14 + +// те саме, що й: + +const computation2 = (input, callback) => { + const f6 = x=> div4(callback, x); + const f5 = (x, y) => add(f6, x, y); + const f4 = x => split(f5, x); + const f3 = x => sub2(f4, x); + const f2 = x => mult3(f3, x); + add5(f2, input); +}</pre> + +<h3 id="Різниця_між_reduce_та_reduceRight">Різниця між <code>reduce</code> та <code>reduceRight</code></h3> + +<pre class="brush: js">var a = ['1', '2', '3', '4', '5']; +var left = a.reduce(function(prev, cur) { return prev + cur; }); +var right = a.reduceRight(function(prev, cur) { return prev + cur; }); + +console.log(left); // "12345" +console.log(right); // "54321"</pre> + +<h3 id="Визначення_композиції_функцій">Визначення композиції функцій</h3> + +<p>Концепція композиції функцій проста - вона об'єднує функції. Це послідовний, справа наліво, виклик кожної функції з результатом попередньої.</p> + +<pre class="brush: js">/** + * Композиція функцій - це підхід, в якому результат однієї функції + * передається у іншу і т.д. + * + * h(x) = f(g(x)) + * + * Виконання функцій відбувається справа наліво + * + * <a href="https://uk.wikipedia.org/wiki/Композиція_функцій">https://uk.wikipedia.org/wiki/Композиція_функцій</a> + */ + +const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value) + +// Збільшує передане число на 1 +const inc = (n) => n + 1 + +// Подвоює передане значення +const double = (n) => n * 2 + +// використання композиції функцій +console.log(compose(double, inc)(2)); // 6 + +// використання композиції функцій +console.log(compose(inc, double)(2)); // 5 +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Метод <code>reduceRight</code> був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній у всіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, це дозволить використовувати метод <code>reduceRight</code> у версіях, які не підтримують його початково.</p> + +<pre class="brush: js">// Функціональні кроки ECMA-262, версія 5, 15.4.4.22 +// Довідка: http://es5.github.io/#x15.4.4.22 +if ('function' !== typeof Array.prototype.reduceRight) { + Array.prototype.reduceRight = function(callback /*, initialValue*/) { + 'use strict'; + if (null === this || 'undefined' === typeof this) { + throw new TypeError('Array.prototype.reduce called on null or undefined'); + } + if ('function' !== typeof callback) { + throw new TypeError(callback + ' is not a function'); + } + var t = Object(this), len = t.length >>> 0, k = len - 1, value; + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k >= 0 && !(k in t)) { + k--; + } + if (k < 0) { + throw new TypeError('Reduce of empty array with no initial value'); + } + value = t[k--]; + } + for (; k >= 0; k--) { + if (k in t) { + value = callback(value, t[k], k, t); + } + } + return value; + }; +} +</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('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/reverse/index.html b/files/uk/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..e1d3dade19 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,89 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +tags: + - Array + - JavaScript + - Method + - Prototype + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>reverse()</strong></code> перевертає масив <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">на місці</a></em>, змінюючи послідовність елементів на протилежну. Тобто, перший елемент стає останнім, а останній — першим.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>a</var>.reverse()</pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Перевернутий масив.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>reverse()</code> змінює масив, для якого його викликано, спротилежнюючи послідовність елементів, і вертає посилання на той масив.</p> + +<p>Метод <code>reverse</code> є навмисно загальним; його можна викликати або застосувати до об'єктів, які схожі на масиви. Об'єкти, які не мають властивості <code>length</code>, що відображає останню з серії послідовних, числових властивостей, що починаються з нуля, можуть поводитися непередбачувано.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перевертання_елементів_у_масиві">Перевертання елементів у масиві</h3> + +<p>У наведеному прикладі започатковується масив <code>a</code> з трьома елементами, а тоді їх порядок спротилежнюється. Виклик методу <code>reverse()</code> повертає посилання на перевернутий масив <code>а</code>.</p> + +<pre class="brush: js">var a = ['спершу', 'було', 'слово']; +var reversed = a.reverse(); + +console.log(reversed === a); // виводить true +console.log(a); // виводить ['слово', 'було', 'спершу'] +console.log(reversed); // виводить ['слово', 'було', 'спершу'] +</pre> + +<h3 id="Перевертання_елементів_у_подібному_до_масиву_обєкті">Перевертання елементів у подібному до масиву об'єкті</h3> + +<p>Наступний приклад створює подібний до масиву об'єкт <code>a</code>, що містить три елементи та властивість довжини, а тоді перевертає цей об'єкт. Виклик методу <code>reverse()</code> повертає посилання на перевернутий об'єкт <code>a</code>.</p> + +<pre class="brush: js">const a = {0: 1, 1: 2, 2: 3, length: 3}; + +console.log(a); // {0: 1, 1: 2, 2: 3, length: 3} + +Array.prototype.reverse.call(a); //такий самий синтаксис для apply() + +console.log(a); // {0: 3, 1: 2, 2: 1, length: 3}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Array.reverse")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/shift/index.html b/files/uk/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..7c3d20f114 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,141 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +<div>{{JSRef}}</div> + +<p>Метод <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>shift()</strong></span></font> видаляє <strong>перший</strong> елемент з масиву і повертає цей елемент. Цей метод змінює довжину масиву.</p> + +<pre class="brush: js">var a = [1, 2, 3]; +a.shift(); + +console.log(a); // [2, 3]</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.shift()</pre> + +<h3 id="Повернене_значення">Повернене значення</h3> + +<p>Видалений елемент.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>shift</code> видаляє елемент із нульовим індексом і зсуває значення з послідовними індексами назад, потім повертає видалене значення. Якщо {{jsxref("Array.length", "length")}} властивість рівна 0, {{jsxref("undefined")}} повертається.</p> + +<p><code>shift</code> є загальним навмисно; Цей метод може бути {{jsxref("Function.call", "викликаний", "", 1)}} чи {{jsxref("Function.apply", "застосований", "", 1)}} до схожих із масивами об'єктів. Об'єкти, які не містять length властивості, що відображає кінець послідовного ряду, базовані на нулі числові властивості можуть себе вести беззмістовним чином.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Видалення_елементу_з_масиву">Видалення елементу з масиву</h3> + +<p>Поданий нижче код відображає myFish масив до і після видалення його першого елементу. Також він відображає видалений елемент.</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; + +console.log('myFish before: ' + myFish); +// "myFish before: angel,clown,mandarin,surgeon" + +var shifted = myFish.shift(); + +console.log('myFish after: ' + myFish); +// "myFish after: clown,mandarin,surgeon" + +console.log('Removed this element: ' + shifted); +// "Removed this element: angel"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Cтатус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Впроваджено в JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Браузерна_сумісність">Браузерна сумісність</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Браузер</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Браузер</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Дивись_також">Дивись також</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/slice/index.html b/files/uk/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..0e3b098fda --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,242 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>slice()</strong></code> повертає дрібну копію частини масиву у новий масив, починаючи з <code>begin</code> і до <code>end</code> (не включаючи <code>end</code>), де <code>begin</code> та <code>end</code> є індексами елементів масиву. Початковий масив не змінюється.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]]) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>begin</var></code> {{optional_inline}}</dt> + <dd>Індекс на основі нуля, з якого починається копіювання.</dd> + <dd>Індекс може бути від'ємним, зазначаючи відступ з кінця послідовності. <code>slice(-2)</code> копіює останні два елементи послідовності.</dd> + <dd>Якщо <code><var>begin</var></code> не надано, <code>slice</code> починається з індексу <code>0</code>.</dd> + <dd>Якщо <code><var>begin</var></code> більший за довжину послідовності, повертається порожній масив.</dd> + <dt><code><var>end</var></code> {{optional_inline}}</dt> + <dd>Індекс на основі нуля <em>до</em> якого вібувається копіювання. <code>slice</code> копіює до, але не включаючи <code><var>end</var></code>.</dd> + <dd>Наприклад, <code>slice(1,4)</code> копіює з другого по четвертий елемент (елементи за індексами 1, 2 та 3).</dd> + <dd>Індекс може бути від'ємним, зазначаючи відступ з кінця послідовності. <code>slice(2,-1)</code> копіює з третього елемента по другий з кінця.</dd> + <dd>Якщо <code><var>end</var></code> пропущений, <code>slice</code> копіює до кінця послідовності (<code>arr.length</code>).</dd> + <dd>Якщо <code><var>end</var></code> більший за довжину послідовності, <code>slice</code> копіює до кінця послідовності (<code>arr.length</code>).</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий масив, який містить скопійовані елементи.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>slice</code> не змінює початковий масив. Він повертає дрібну копію елементів початкового масиву. Елементи початкового масиву копіюються у повернений масив наступним чином:</p> + +<ul> + <li>Для посилань на об'єкт (але не самих об'єктів), <code>slice</code> копіює посилання на об'єкт у новий масив. І початковий, і новий масиви посилатимуться на той самий об'єкт. Якщо цей об'єкт зміниться, зміни відобразяться у обох масивах, новому та початковому.</li> + <li>Для рядків, чисел та булевих значень (не об'єктів {{jsxref("String")}}, {{jsxref("Number")}} та {{jsxref("Boolean")}}), <code>slice</code> копіює значення у новий масив. Зміни у рядках, числах або булевих значеннях одного масиву не відображатимуться у іншому масиві.</li> +</ul> + +<p>Якщо новий елемент додано у якийсь з масивів, інший масив не зміниться.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Повернути_частину_існуючого_масиву">Повернути частину існуючого масиву</h3> + +<pre class="brush: js">var fruits = ['Банан', 'Апельсин', 'Лимон', 'Яблуко', 'Манго']; +var citrus = fruits.slice(1, 3); + +// fruits містить ['Банан', 'Апельсин', 'Лимон', 'Яблуко', 'Манго'] +// citrus містить ['Апельсин','Лимон'] +</pre> + +<h3 id="Використання_slice">Використання <code>slice</code></h3> + +<p>У наступному прикладі <code>slice</code> створює новий масив <code>newCar</code> з <code>myCar</code>. Обидва містять посилання на об'єкт <code>myHonda</code>. Коли колір <code>myHonda</code> змінюється на фіолетовий, обидва масиви відображають зміну.</p> + +<pre class="brush: js">// Використання slice, створення newCar з myCar. +var myHonda = { color: 'червоний', wheels: 4, engine: { cylinders: 4, size: 2.2 } }; +var myCar = [myHonda, 2, 'чудовий стан', 'придбана 1997']; +var newCar = myCar.slice(0, 2); + +// Вивести значення myCar, newCar та колір myHonda +// з обох масивів. +console.log('myCar = ' + JSON.stringify(myCar)); +console.log('newCar = ' + JSON.stringify(newCar)); +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); + +// Змінити колір myHonda. +myHonda.color = 'фіолетовий'; +console.log('Новий колір Honda ' + myHonda.color); + +// Вивести колір myHonda з обох масивів. +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); +</pre> + +<p>Скрипт запише:</p> + +<pre class="brush: js">myCar = [{color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2, + 'чудовий стан', 'придбана 1997'] +newCar = [{color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2] +myCar[0].color = червоний +newCar[0].color = червоний +Новий колір Honda фіолетовий +myCar[0].color = фіолетовий +newCar[0].color = фіолетовий +</pre> + +<h2 id="Подібні_до_масиву_об'єкти">Подібні до масиву об'єкти</h2> + +<p>Метод <code>slice</code> також може перетворювати подібні до масиву об'єкти/колекції на нові об'єкти Array. Ви просто прив'язуєте метод до об'єкта. {{jsxref("Functions/arguments", "Аргументи")}} всередині функції є прикладом подібного до масиву об'єкта.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Прив'язати можна функцією .<code>call</code> з {{jsxref("Function.prototype")}}, також можна скоротити запис, використовуючи <code>[].slice.call(arguments)</code> замість <code>Array.prototype.slice.call</code>. В будь-якому випадку, все можна спростити за допомогою {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js">var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +function list() { + return slice(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Оптимізація_кросбраузерної_поведінки">Оптимізація кросбраузерної поведінки</h2> + +<p>Хоча об'єкти середовища виконання (такі як об'єкти DOM) за специфікацією не зобов'язані відповідати поведінці Mozilla при перетворенні методом <code>Array.prototype.slice</code>, і IE < 9 цього не робить, версії IE починаючи від 9-ї дозволяють це. Використання шима дозволяє створити надійну кросбраузерну поведінку. Поки інші сучасні переглядачі підтримують цю можливість, як нині роблять IE, Mozilla, Chrome, Safari та Opera, розробники, які читають (підтримують для об'єктів DOM) slice-код, що покладається на цей шим, не будуть введені в оману семантикою; вони спокійно можуть покладатися на семантику, щоб реалізувати тепер вже <em>де-факто</em> стандартну поведінку. (Шим також виправляє роботу IE з другим аргументом <code>slice()</code>, коли він явно заданий як {{jsxref("null")}}/{{jsxref("undefined")}}, чого більш ранні версії IE також не дозволяли, але всі сучасні переглядачі, в тому числі IE >= 9, зараз дозволяють.)</p> + +<pre class="brush: js">/** + * Шим для "виправлення" слабкої підтримки IE (IE < 9) використання slice + * на об'єктах середовища, таких як NamedNodeMap, NodeList та HTMLCollection + * (технічно, оскільки об'єкти середовища були залежні від реалізації, + * принаймні до ES2015, IE не мав потреби у цій функціональності.) + * Також працює для рядків, виправляє IE < 9, дозволяючи явно задане значення + * undefined другим аргументом (як у Firefox) та запобігає помилкам + * при виклику на інших об'єктах DOM. + */ +(function () { + 'use strict'; + var _slice = Array.prototype.slice; + + try { + // Не можна використовувати з елементами DOM у IE < 9 + _slice.call(document.documentElement); + } catch (e) { // Не працює у IE < 9 + // Працюватиме для справжніх масивів, подібних до масивів об'єктів, + // NamedNodeMap (атрибутів, сутностей, нотацій), + // NodeList (напр., getElementsByTagName), HTMLCollection (напр., childNodes), + // і не схибить на інших об'єктах DOM (як на елементах DOM у IE < 9) + Array.prototype.slice = function(begin, end) { + // IE < 9 не любить undefined в якості аргументу end + end = (typeof end !== 'undefined') ? end : this.length; + + // Для об'єктів Array використовуємо рідну функцію slice + if (Object.prototype.toString.call(this) === '[object Array]'){ + return _slice.call(this, begin, end); + } + + // Для подібних до масивів об'єктів робимо це самостійно. + var i, cloned = [], + size, len = this.length; + + // Обробляємо від'ємне значення "begin" + var start = begin || 0; + start = (start >= 0) ? start : Math.max(0, len + start); + + // Обробляємо від'ємне значення "end" + var upTo = (typeof end == 'number') ? Math.min(end, len) : len; + if (end < 0) { + upTo = len + end; + } + + // Очікуваний розмір нового масиву + size = upTo - start; + + if (size > 0) { + cloned = new Array(size); + if (this.charAt) { + for (i = 0; i < size; i++) { + cloned[i] = this.charAt(start + i); + } + } else { + for (i = 0; i < size; i++) { + cloned[i] = this[start + i]; + } + } + } + + return cloned; + }; + } +}()); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізовано у JavaScript 1.2.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.splice()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/some/index.html b/files/uk/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..934df016e0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,206 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Reference/Global_Objects/Array/some +tags: + - ECMAScript5 + - Довідка + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <strong><code>some()</code></strong> з'ясовує, чи містить масив хоч один елемент, для якого зазначена функція <code>callback</code> повертає <code>true</code> (або значення, що зводиться до <code>true</code>). Повертає значення типу Boolean.</span></p> + +<div class="note"> +<p><strong>Зауваження</strong>: для порожнього масиву цей метод незмінно повертає <code>false</code>.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div> + +<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи покращення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.some(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, яка перевіряє елементи. Приймає три аргументи: + <dl> + <dt><code>element</code></dt> + <dd>Значення чергового елемента масиву.</dd> + <dt><code>index</code> {{Optional_inline}}</dt> + <dd>Індекс чергового елемента в масиві.</dd> + <dt><code>array</code>{{Optional_inline}}</dt> + <dd>Масив, до якого застосовано <code>some()</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Значення, що використовується як <code><strong>this</strong></code> коли викликається <code>callback</code>.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p><code><strong>true</strong></code>, якщо функція повертає {{Glossary("truthy", "істинне")}} значення принаймні для одного з елементів масива. Інакше <code><strong>false</strong></code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>some()</code> викликає функцію <code>callback</code> для кожного елемента в масиві один за одним, доки не знайде такий, для якого <code>callback</code> повертає істинне значення (значення, яке стає <code>true</code> внаслідок перетворення на Boolean). Щойно такий елемент знайдено, <code>some()</code> негайно повертає <code>true</code>, не перевіряючи решту елементів. Якщо таких елементів не знайдено, метод <code>some()</code> повертає <code>false</code>.</p> + +<p>Зауважте, що <code>callback</code> викликається лише для індексів масиву, яким надано значення. Тож індекси без встановлених значень, а також видалені елементи будуть знехтувані.</p> + +<p>Функція <code>callback</code> викликається з трьома аргументами: значення елемента, індекс елемента і об'єкт масиву, для якого викликано метод <code>some()</code>.</p> + +<p>Якщо для <code>some()</code> визначено параметр <code>thisArg</code>, його буде використано як значення <code>this</code> для функції <code>callback</code>. В іншому випадку, буде використано значення {{jsxref("undefined")}}. Зрештою, значення <code>this</code> для функції <code>callback</code> буде визначено відповідно до <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">загальних правил</a>.</p> + +<p>Метод <code>some()</code> не змінює масив, для якого його викликано.</p> + +<p>Межі індексів елементів, які буде перевірено, встановлюються перед найпершим викликом <code>callback</code>. Тож всі елементи, додані в кінець масиву вже під час виконання <code>some()</code>, будуть знехтувані. Якщо значення котрогось елемента буде змінено зсередини <code>callback</code>, наступний виклик <code>callback</code> (якщо такий буде) це врахує. Видалені елементи перевірено не буде.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перевірка_елементів_масива">Перевірка елементів масива</h3> + +<p>В цьому прикладі виклик <code>some()</code> перевіряє, чи містить масив числа більші від 10:</p> + +<pre class="brush: js">function isBiggerThan10(element, index, array) { + return element > 10; +} + +[2, 5, 8, 1, 4].some(isBiggerThan10); // вертає false +[12, 5, 8, 1, 4].some(isBiggerThan10); // вертає true +</pre> + +<h3 id="Перевірка_елементів_масива_стрілковою_функцією">Перевірка елементів масива стрілковою функцією</h3> + +<p>Те саме, що і в попередньому прикладі, але із синтаксисом <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкової функції</a>:</p> + +<pre class="brush: js">[2, 5, 8, 1, 4].some(x => x > 10); // вертає false +[12, 5, 8, 1, 4].some(x => x > 10); // вертає true +</pre> + +<h3 id="Перевірка_наявності_певного_значення_в_масиві">Перевірка наявності певного значення в масиві</h3> + +<p>Щоб відтворити поведінку метода {{jsxref("Array.prototype.includes()", "includes()")}}, функція повертає <code>true</code>, щойно знаходить шукане значення в масиві:</p> + +<pre class="brush: js">var fruits = ['яблуко', 'груша', 'персик', 'банан']; + +function contains(array, value) { + return array.some(function(v) { + return value === v; + }); +} + +contains(fruits, 'вишня'); // вертає false +contains(fruits, 'банан'); // вертає true</pre> + +<h3 id="Перевірка_наявності_певного_значення_в_масиві_стрілковою_функцією">Перевірка наявності певного значення в масиві стрілковою функцією</h3> + +<pre class="brush: js">var fruits = ['яблуко', 'груша', 'персик', 'банан']; + +function contains(array, value) { + return array.some(v => value === v); +} + +contains(fruits, 'вишня'); // вертає false +contains(fruits, 'банан'); // вертає true</pre> + +<h3 id="Зведення_всякого_значення_до_Boolean">Зведення всякого значення до Boolean</h3> + +<pre class="brush: js">var TRUTHY_VALUES = [true, 'true', 1]; + +function getBoolean(value) { + 'use strict'; + + if (typeof value === 'string') { + value = value.toLowerCase().trim(); + } + + return TRUTHY_VALUES.some(function(t) { + return t === value; + }); +} + +getBoolean(false); // вертає false +getBoolean('false'); // вертає false +getBoolean(1); // вертає true +getBoolean('true'); // вертає true</pre> + +<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2> + +<p>Цей метод було стандартизовано 5-им випуском ECMA-262. Для рушіїв, що не мають підтримки цього метода, стане в пригоді наведене нижче рішення. Цей алгоритм аналогічно відповідає вимогам 5-го випуску ECMA-262 за умови, що {{jsxref("Object")}} і {{jsxref("TypeError")}} не було змінено, а виклик <code>callback.call()</code> відповідає очікуваному {{jsxref("Function.prototype.call()")}}:</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.17 +// Reference: http://es5.github.io/#x15.4.4.17 +if (!Array.prototype.some) { + Array.prototype.some = function(fun, thisArg) { + 'use strict'; + + if (this == null) { + throw new TypeError('Array.prototype.some called on null or undefined'); + } + + if (typeof fun !== 'function') { + throw new TypeError(); + } + + var t = Object(this); + var len = t.length >>> 0; + + for (var i = 0; i < len; i++) { + if (i in t && fun.call(thisArg, t[i], i, t)) { + return true; + } + } + + return false; + }; +} +</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('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкова виознака. Запроваджено у JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Array.some")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("TypedArray.prototype.some()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/sort/index.html b/files/uk/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..2f592898bd --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,274 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/Array/sort +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>sort()</strong></code> відсортовує елементи масиву <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">на місці</a></em> та повертає відсортований масив. За замовчуванням порядок сортування будується на перетворенні елементів у рядки, а потім на порівнянні іхньої послідовності значень кодових одиниць UTF-16.</p> + +<p>Часова та просторова складність такого сортування не може гарантуватися, оскільки вона залежить від реалізації.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div> + +<p class="hidden">Джерело цього інтерактивного прикладу зберігається у репозіторії на GitHub. Якщо ви бажаєте залучитися до проекту зі створення інтерактивних прикладів, будь ласка, скопіюйте це посилання <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та надішліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.sort(<var>[compareFunction]</var>) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>compareFunction</code> {{optional_inline}}</dt> + <dd>Вказує функцію, яка визначає порядок сортування. Якщо не вказувати, елементи масиву будуть перетворені на рядки, а потім відсортовані згідно до значення кодових точок Unicode кожного символу.</dd> + <dd> + <dl> + <dt><code>firstEl</code></dt> + <dd>Перший елемент для порівняння.</dd> + <dt><code>secondEl</code></dt> + <dd>Другий елемент для порівняння.</dd> + </dl> + </dd> +</dl> + +<h3 id="Повернене_значення">Повернене значення</h3> + +<p>Відсортований масив. Зверніть увагу на те, що масив сортується <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">на місці</a></em>, без створення копії.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо <code>compareFunction</code> не передається, усі визначені (non-<code>undefined</code>) елементи масиву відсортовуються через перетворення у рядки та порівняння цих рядків в UTF-16 порядку кодових точок. Наприклад, "banana" іде перед "cherry". У числовому сортуванні, 9 іде перед 80, але оскільки числа перетворюються на рядки, "80" іде перед "9" в Unicode порядку. Усі <code>undefined</code> елементи відсортуються у кінець масиву. </p> + +<div class="blockIndicator note"> +<p><strong>Примітка :</strong> В UTF-16, Unicode символи вище за <code>\uFFFF</code> кодуються як дві сурогатні кодові одиниці, діапазону <code>\uD800</code>-<code>\uDFFF</code>. Значення кожної кодової одиниці враховується для порівняння окремо. Таким чином, символ створений сурогатною парою <code>\uD655\uDE55</code> буде відсортований перед символом <code>\uFF3A</code>.</p> +</div> + +<p>Якщо <code>compareFunction</code> передається, усі визначені (non-<code>undefined</code>) елементи масиву відсортовуються згідно до поверненого значення функції порівняння (усі <code>undefined</code> елементи масиву відсортовуються у кінець масиву, без виклику <code>compareFunction</code>). Якщо <code>a</code> та <code>b</code> є двома елементами, що порівнюються, тоді: </p> + +<ul> + <li> + <p>Якщо <code>compareFunction(a, b)</code> менше ніж 0, сортування поставить <code>a</code> нижче за індексом ніж <code>b</code> (тобто <code>a</code> іде першим).</p> + </li> + <li> + <p>Якщо <code>compareFunction(a, b)</code> повертає 0, сортування залишить <code>a</code> та <code>b</code> незміненими по відношенню один до одного, проте відсортує по відношенню до усіх інших елементів. Зверніть увагу: стандарт ECMAscript не гарантує таку поведінку, отже, не всі браузери (наприклад, Mozilla версій, принаймні, до 2003) додержуються цього.</p> + </li> + <li> + <p>Якщо <code>compareFunction(a, b)</code> більше ніж 0, сортування поставить <code>b</code> нижче за індексом ніж <code>a</code> (тобто <code>b</code> іде першим).</p> + </li> + <li><code>compareFunction(a, b)</code> завжди повинна повертати теж саме значення для певної пари елементів <code>a</code> та <code>b</code> , що служать у якості її двух аргументів. Якщо будуть повертатися непослідовні результати, порядок сортування буде невизначеним.</li> +</ul> + +<p>Таким чином, функція порівняння має наступний вигляд:</p> + +<pre class="brush: js notranslate">function compare(a, b) { + if (a is less than b by some ordering criterion) { + return -1; + } + if (a is greater than b by the ordering criterion) { + return 1; + } + // a must be equal to b + return 0; +} +</pre> + +<p>Для того, щоб порівняти числа замість рядків, функція порівняння може просто відняти <code>b</code> з <code>a</code>. Наступна функція відсортовує масив у порядку зростання (якщо тільки вона не містить <code>Infinity</code> та <code>NaN</code>):</p> + +<pre class="brush: js notranslate">function compareNumbers(a, b) { + return a - b; +} +</pre> + +<p>Метод <code>sort</code> зручно використовувати з {{jsxref("Operators/function", "function expressions", "", 1)}}:</p> + +<pre class="brush: js notranslate">var numbers = [4, 2, 5, 1, 3]; +numbers.sort(function(a, b) { + return a - b; +}); +console.log(numbers); + +// [1, 2, 3, 4, 5] +</pre> + +<p>ES2015 надає {{jsxref("Functions/Arrow_functions", "arrow function expressions", "", 1)}} за допомогою навіть коротшого синтаксису. </p> + +<pre class="brush: js notranslate">let numbers = [4, 2, 5, 1, 3]; +numbers.sort((a, b) => a - b); +console.log(numbers); + +// [1, 2, 3, 4, 5]</pre> + +<p>Об'єкти можна сортувати, використовуючи значення однієї зі своїх властивостей. </p> + +<pre class="brush: js notranslate">var items = [ + { name: 'Edward', value: 21 }, + { name: 'Sharpe', value: 37 }, + { name: 'And', value: 45 }, + { name: 'The', value: -12 }, + { name: 'Magnetic', value: 13 }, + { name: 'Zeros', value: 37 } +]; + +// sort by value +items.sort(function (a, b) { + return a.value - b.value; +}); + +// sort by name +items.sort(function(a, b) { + var nameA = a.name.toUpperCase(); // ignore upper and lowercase + var nameB = b.name.toUpperCase(); // ignore upper and lowercase + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; + } + + // names must be equal + return 0; +});</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_відображення_та_сортування_масиву">Створення, відображення, та сортування масиву</h3> + +<p>У наступному прикладі створюються чотири масиви і відображаються спершу початковий, потім відсортованний масиви. Числові масиви сортуються без функції порівняння, а відсортовані потім - з нею.</p> + +<pre class="brush: js notranslate">var stringArray = ['Blue', 'Humpback', 'Beluga']; +var numericStringArray = ['80', '9', '700']; +var numberArray = [40, 1, 5, 200]; +var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200]; + +function compareNumbers(a, b) { + return a - b; +} + +console.log('stringArray:', stringArray.join()); +console.log('Sorted:', stringArray.sort()); + +console.log('numberArray:', numberArray.join()); +console.log('Sorted without a compare function:', numberArray.sort()); +console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers)); + +console.log('numericStringArray:', numericStringArray.join()); +console.log('Sorted without a compare function:', numericStringArray.sort()); +console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers)); + +console.log('mixedNumericArray:', mixedNumericArray.join()); +console.log('Sorted without a compare function:', mixedNumericArray.sort()); +console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers)); +</pre> + +<p>Цей приклад буде мати наступний вивід. Згідно до нього, при використанні функції порівняння, числа сортуються належним чином, як самі числа, так і рядки з числами.</p> + +<pre class="notranslate">stringArray: Blue,Humpback,Beluga +Sorted: Beluga,Blue,Humpback + +numberArray: 40,1,5,200 +Sorted without a compare function: 1,200,40,5 +Sorted with compareNumbers: 1,5,40,200 + +numericStringArray: 80,9,700 +Sorted without a compare function: 700,80,9 +Sorted with compareNumbers: 9,80,700 + +mixedNumericArray: 80,9,700,40,1,5,200 +Sorted without a compare function: 1,200,40,5,700,80,9 +Sorted with compareNumbers: 1,5,9,40,80,200,700 +</pre> + +<h3 id="Сортування_не-ASCII_символів">Сортування не-ASCII символів</h3> + +<p>Для сортування рідків, які містять символи, що не входять до ASCII, наприклад, рядків з діакритичними знаками (e, é, è, a, ä, тощо), чи рядків мовою іншою за англійську, використовується {{jsxref("String.localeCompare")}}. Ця функція може порівнювати ці символи таким чином, що вони з'являються у правильному порядку. </p> + +<pre class="brush: js notranslate">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +items.sort(function (a, b) { + return a.localeCompare(b); +}); + +// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] +</pre> + +<h3 id="Сортування_за_допомогою_функції_map">Сортування за допомогою функції map()</h3> + +<p>Функція <code>compareFunction</code> може викликатися багато разів на елемент всередені масиву. В залежності від характеру <code>compareFunction</code>, це може призводити до високих накладних витрат. Чим більше роботи виконує <code>compareFunction</code>, чим більше елементів їй треба відсортувати, тим доцільнішим буде використання функції <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> задля цієї задачі. Map() працює наступним чином: функція перебирає масив лише один раз, потім вона перетягує фактичні значення для сортування у тимчасовий масив, відсортовує цей масив, а потім перебирає його для того, щоб досягти правильного порядку. </p> + +<pre class="brush: js notranslate" dir="rtl">// the array to be sorted +var list = ['Delta', 'alpha', 'CHARLIE', 'bravo']; + +// temporary array holds objects with position and sort-value +var mapped = list.map(function(el, i) { + return { index: i, value: el.toLowerCase() }; +}) + +// sorting the mapped array containing the reduced values +mapped.sort(function(a, b) { + if (a.value > b.value) { + return 1; + } + if (a.value < b.value) { + return -1; + } + return 0; +}); + +// container for the resulting order +var result = mapped.map(function(el){ + return list[el.index]; +}); +</pre> + +<p>У відкритому доступі є бібліотека під назвою <a href="https://null.house/open-source/mapsort">mapsort</a>, яка застосовує цей підхід. </p> + +<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> + <p>Початкове визначення.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці береться зі струкрутованих даних. кщо ви бажаєте залучитися до створення цих даних, будь ласка, перегляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам pull request.</div> + +<p>{{Compat("javascript.builtins.Array.sort")}}</p> +</div> + +<h2 id="Дивиться_також">Дивиться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> + <li><a href="https://v8.dev/blog/array-sort">About the stability of the algorithm used by V8 engine</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/splice/index.html b/files/uk/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..0565d3f266 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,162 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - Array + - JavaScript + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>splice()</strong></code> змінює вміст масиву, видаляючи існуючі та/або додаючи нові елементи.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>var arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])</var> +</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>start</code></dt> + <dd>Індекс елемента, з якого розпочнеться зміна масиву. Якщо індекс більший за розмір масиву, <code>start</code> буде рівним довжині масиву. Якщо індекс від'ємний, позначатиме кількість елементів з кінця масиву (починаючи з -1, тобто -n означатиме індекс n-го елемента з кінця, і таким чином є еквівалентом <code>array.length - n</code>). Якщо абсолютна величина <code>start</code> є більшою за довжину масиву, зміни почнуться з індексу 0.</dd> + <dt><code>deleteCount</code>{{optional_inline}}</dt> + <dd>Число, що вказує на кількість елементів масиву, які необхідно видалити, починаючи з індексу <code>start</code>.</dd> + <dd>Якщо аргумент <code>deleteCount</code> не заданий, або його значення більше чи дорівнює <code>arr.length - start</code> (тобто, більше чи дорівнює кількості елементів, які залишились у масиві, починаючи зі <code>start</code>), тоді будуть видалені всі елементи, починаючи зі <code>start</code> і до кінця масиву.</dd> + <dd>Якщо <code>deleteCount</code> рівний 0 або від'ємний, жоден елемент не буде видалений. У цьому випадку необхідно вказати хоча б один новий елемент для вставки (див. нижче).</dd> + <dt><code>item1, item2, <em>...</em></code>{{optional_inline}}</dt> + <dd>Елементи, що будуть додані до масиву, починаючи з індексу <code>start</code>. Якщо не вказати жодного нового елемента, <code>splice()</code> лише видалить елементи з масиву.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Масив видалених елементів. Якщо видалено лише один елемент, метод поверне масив з одним елементом. Якщо жоден з елементів не видалявся, метод повертає пустий масив.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо задана кількість елементів для вставлення відрізняється від кількості елементів на видалення, довжина масиву зміниться після виконання функції.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Видалення_0_елементів_починаючи_з_індексу_2_і_вставлення_drum">Видалення 0 елементів, починаючи з індексу 2, і вставлення "drum"</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'mandarin'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'drum'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// myFish дорівнює ["angel", "clown", "drum", "mandarin", "sturgeon"] </span> +<span class="comment token">// removed дорівнює [], жодний елемент не було видалено</span></code> +</pre> + +<h3 id="Видалення_0_елементів_починаючи_з_індексу_2_і_вставлення_drum_та_guitar">Видалення 0 елементів, починаючи з індексу 2, і вставлення "drum" та "guitar"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum', 'guitar'); + +// myFish дорівнює ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"] +// removed дорівнює [], жодний елемент не було видалено</pre> + +<h3 id="Видалення_1_елемента_починаючи_з_індексу_3">Видалення 1 елемента, починаючи з індексу 3</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'drum'</span><span class="punctuation token">,</span> <span class="string token">'mandarin'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// removed дорівнює ["mandarin"]</span> +<span class="comment token">// myFish дорівнює ["angel", "clown", "drum", "sturgeon"]</span></code></pre> + +<h3 id="Видалення_1_елементу_починаючи_з_індексу_2_і_вставлення_trumpet">Видалення 1 елементу, починаючи з індексу 2, і вставлення "trumpet"</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'drum'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'trumpet'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// myFish дорівнює ["angel", "clown", "trumpet", "sturgeon"]</span> +<span class="comment token">// removed дорівнює ["drum"]</span></code></pre> + +<h3 id="Видалення_2-ох_елементів_починаючи_з_індексу_0_і_вставлення_у_масив_елементів_parrot_anemone_і_blue">Видалення 2-ох елементів, починаючи з індексу 0, і вставлення у масив елементів "parrot", "anemone" і "blue"</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'trumpet'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="string token">'parrot'</span><span class="punctuation token">,</span> <span class="string token">'anemone'</span><span class="punctuation token">,</span> <span class="string token">'blue'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// myFish дорівнює ["parrot", "anemone", "blue", "trumpet", "sturgeon"] </span> +<span class="comment token">// removed дорівнює ["angel", "clown"]</span></code></pre> + +<h3 id="Видалення_2-ох_елементів_починаючи_з_індексу_2">Видалення 2-ох елементів, починаючи з індексу 2</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'parrot'</span><span class="punctuation token">,</span> <span class="string token">'anemone'</span><span class="punctuation token">,</span> <span class="string token">'blue'</span><span class="punctuation token">,</span> <span class="string token">'trumpet'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(2</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// myFish дорівнює ["parrot", "anemone", "sturgeon"] </span> +<span class="comment token">// removed дорівнює ["blue", "trumpet"]</span></code> +</pre> + +<h3 id="Видалення_1-го_елемента_починаючи_з_індексу_-2">Видалення 1-го елемента, починаючи з індексу -2</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(-2, 1); + +// myFish дорівнює ["angel", "clown", "sturgeon"] +// removed дорівнює ["mandarin"]</pre> + +<h3 id="Видалення_всіх_елементів_починаючи_з_індексу_2_(включно).">Видалення всіх елементів, починаючи з індексу 2 (включно).</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'mandarin'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// myFish дорівнює ["angel", "clown"] </span> +<span class="comment token">// removed дорівнює ["mandarin", "sturgeon"]</span></code></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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізовано у JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачів">Підтримка веб-переглядачів</h2> + +<div class="hidden"> +<p>The compatibility table in 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.splice")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — додати/видалити елементи з кінця масиву</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — додати/видалити елементи з початку масиву</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}} — повертає новий масив, складений шляхом об'єднання цього масиву з іншим масивом(-ами) чи значеннями.</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html new file mode 100644 index 0000000000..75448b5e72 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html @@ -0,0 +1,182 @@ +--- +title: Array.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>toLocaleString()</strong></code> повертає рядок, що відображає елементи масиву. Елементи перетворюються у рядки, використовуючи свої методи <code>toLocaleString</code>, і ці рядки розділяються символами, що відповідають локалі (наприклад, комою “,”).</p> + +<div>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.toLocaleString([<var>locales[</var>, <var>options]]</var>); +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>locales</code> {{optional_inline}}</dt> + <dd>Рядок з міткою мови BCP 47 або масив таких рядків. Щодо загального вигляду та інтерпретації аргументу <code>locales</code> дивіться {{jsxref("Intl")}}.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>Об'єкт з властивостями конфігурації, для числових значень дивіться {{jsxref("Number.prototype.toLocaleString()")}}, а для дат {{jsxref("Date.prototype.toLocaleString()")}}.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Текстовий рядок, що відображає елементи масиву.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_locales_та_options">Використання <code>locales</code> та <code>options</code></h3> + +<p>Елементи масиву перетворюються на рядки, використовуючи свої методи <code>toLocaleString</code>.</p> + +<ul> + <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li> + <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> + +<p>Завжди відображати знак валюти для рядків та чисел у масиві <code>prices</code>:</p> + +<pre class="brush: js">var prices = ['￥7', 500, 8123, 12]; +prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); + +// "￥7,￥500,￥8,123,￥12" +</pre> + +<p>Більше прикладів дивіться на сторінках {{jsxref("Intl")}}, {{jsxref("NumberFormat")}} та {{jsxref("DateTimeFormat")}}.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring +if (!Array.prototype.toLocaleString) { + Object.defineProperty(Array.prototype, 'toLocaleString', { + value: function(locales, options) { + // 1. Нехай O дорівнює ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var a = Object(this); + + // 2. Нехай len дорівнює ? ToLength(? Get(A, "length")). + var len = a.length >>> 0; + + // 3. Нехай separator дорівнює рядковому значенню + // роздільника елементів списку згідно поточної + // локалі середовища виконання (це значення + // визначається реалізацією). + // ЗАУВАГА: В даному випадку ми використовуємо кому + var separator = ','; + + // 4. Якщо len дорівнює нулю, повернути порожінй рядок. + if (len === 0) { + return ''; + } + + // 5. Нехай firstElement дорівнює ? Get(A, "0"). + var firstElement = a[0]; + // 6. Якщо firstElement дорівнює undefined або null, тоді + // a. Нехай R дорівнює порожньому рядку. + // 7. Інакше, + // a. Нехай R дорівнює ? + // ToString(? + // Invoke( + // firstElement, + // "toLocaleString", + // « locales, options » + // ) + // ) + var r = firstElement == null ? + '' : firstElement.toLocaleString(locales, options); + + // 8. Нехай k дорівнює 1. + var k = 1; + + // 9. Повторювати, доки k < len + while (k < len) { + // а. Нехай S дорівнює рядковому значенню, утвореному + // об'єднанням R та separator. + var s = r + separator; + + // б. Нехай nextElement дорівнює ? Get(A, ToString(k)). + var nextElement = a[k]; + + // в. Якщо nextElement дорівнює undefined або null, тоді + // i. Нехай R дорівнє порожньому рядку. + // г. Інакше, + // i. Нехай R дорівнює ? + // ToString(? + // Invoke( + // nextElement, + // "toLocaleString", + // « locales, options » + // ) + // ) + r = nextElement == null ? + '' : nextElement.toLocaleString(locales, options); + + // ґ. Нехай R дорівнює рядковому значенню, утвореному + // об'єднанням S та R. + r = s + r; + + // д. Збільшити k на 1. + k++; + } + + // 10. Повернути R. + return r; + } + }); +} +</pre> + +<p>Якщо вам потрібно підтримувати зовсім застарілі рушії JavaScript, які не підтримують <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, краще взагалі не використовувати поліфіли методів <code>Array.prototype</code>, оскільки ви не зможете зробити їх не перелічуваними.</p> + +<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('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Початкове визначення було надане у ECMAScript 3.</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td>Це визначення замінює визначення, надане у ECMA-262.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Object.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/tosource/index.html b/files/uk/web/javascript/reference/global_objects/array/tosource/index.html new file mode 100644 index 0000000000..d493fe0e4f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/tosource/index.html @@ -0,0 +1,72 @@ +--- +title: Array.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Array/toSource +tags: + - Array + - JavaScript + - Масив + - метод + - нестандартний +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<div>Метод <code><strong>toSource()</strong></code> повертає рядкове представлення першокоду масиву.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.toSource()</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядкове представлення першокоду масиву.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>toSource()</code> повертає наступні значення:</p> + +<ul> + <li>Для вбудованого об'єкта {{jsxref("Array")}} <code>toSource()</code> повертає наступний рядок, який вказує, що першокод недоступний: + + <pre class="brush: js">function Array() { + [native code] +} +</pre> + </li> + <li>Для екземплярів {{jsxref("Array")}} <code>toSource()</code> повертає рядкове представлення першокоду.</li> +</ul> + +<p>Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді. Ви можете викликати <code>toSource()</code> під час налагодження для дослідження вмісту масиву.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Досліджуємо_першокод_масиву">Досліджуємо першокод масиву</h3> + +<p>Для дослідження першокоду масиву:</p> + +<pre class="brush: js">var alpha = new Array('a', 'б', 'в'); + +alpha.toSource(); +//повертає ['a', 'б', 'в'] +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодного стандарту. Реалізовано у JavaScript 1.3.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table in 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.toSource")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/tostring/index.html b/files/uk/web/javascript/reference/global_objects/array/tostring/index.html new file mode 100644 index 0000000000..53505797f4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/tostring/index.html @@ -0,0 +1,80 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toString +tags: + - Array + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>toString()</strong></code> повертає рядкове представлення заданого масиву та його елементів.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.toString()</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядкове представлення елементів масиву.</p> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкт {{jsxref("Array")}} заміщує метод <code>toString</code> об'єкта {{jsxref("Object")}}. Для об'єктів Array метод <code>toString</code> об'єднує масив та повертає один рядок, що містить усі елементи масиву, розділені комами.</p> + +<p>JavaScript викликає метод <code>toString</code> автоматично, коли масив потрібно відобразити у вигляді текстового значення або при посиланні на масив у поєднанні рядків.</p> + +<h3 id="Семантика_ECMAScript_5">Семантика ECMAScript 5</h3> + +<p>Введений у JavaScript 1.8.5 (Firefox 4) та сумісний з семантикою 5-ї версії ECMAScript, метод <code>toString()</code> є загальним і може використовуватися з будь-яким об'єктом. Буде викликаний метод {{jsxref("Object.prototype.toString()")}}, який поверне значення результату.</p> + +<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>Початкове визначення. Реалізоване у JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.toString")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/unobserve/index.html b/files/uk/web/javascript/reference/global_objects/array/unobserve/index.html new file mode 100644 index 0000000000..308a8a01d6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/unobserve/index.html @@ -0,0 +1,89 @@ +--- +title: Array.unobserve() +slug: Web/JavaScript/Reference/Global_Objects/Array/unobserve +tags: + - Array + - JavaScript + - Масив + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Array.unobserve +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод Array<strong>.unobserve()</strong> використовувався для видалення спостерігачів, встановлених методом {{jsxref("Array.observe()")}}, але він застарів та був прибраний з переглядачів. Ви можете натомість скористатись більш загальним об'єктом {{jsxref("Proxy")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Array.unobserve(<var>arr</var>, <var>callback</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>arr</code></dt> + <dd>Масив, де треба припинити спостереження.</dd> + <dt><code>callback</code></dt> + <dd>Посилання на спостерігач, який треба припинити викликати кожен раз, коли у масиві <strong>arr</strong> відбувається зміна.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>Array.unobserve()</code> має викликатися після {{jsxref("Array.observe()")}}, щоб прибрати спостерігач з масиву.</p> + +<p>Параметр callback має бути посиланням на функцію, а не анонімною функцією, бо це посилання буде використано, щоб прибрати попередній спостерігач. Немає сенсу викликати <strong>Array.unobserve()</strong> з анонімною функцією зворотного виклику, вона не прибере жоден спостерігач.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Припинення_спостереження_за_масивом">Припинення спостереження за масивом</h3> + +<pre class="brush: js">var arr = [1, 2, 3]; + +var observer = function(changes) { + console.log(changes); +} + +Array.observe(arr, observer); + +arr.push(4); +// [{type: "splice", object: <arr>, index: 3, removed:[], addedCount: 1}] + +Array.unobserve(arr, observer); + +arr.pop(); +// Функція зворотного виклику не викликалась</pre> + +<h3 id="Використання_анонімної_функції">Використання анонімної функції</h3> + +<pre class="brush: js">var persons = ['Халід', 'Ахмед', 'Мухаммед']; + +Array.observe(persons, function (changes) { + console.log(changes); +}); + +persons.shift(); +// [{type: "splice", object: <arr>, index: 0, removed: [ "Халід" ], addedCount: 0 }] + +Array.unobserve(persons, function (changes) { + console.log(changes); +}); + +persons.push('Абдулла'); +// [{type: "splice", object: <arr>, index: 2, removed: [], addedCount: 1 }] +// Функція зворотного виклику викликатиметься завжди +</pre> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.unobserve")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/unshift/index.html b/files/uk/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..0621da3662 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,123 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +tags: + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>unshift()</strong></code> додає один або декілька елементів на початок масиву і повертає новий розмір масиву.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>arr</var>.unshift([<var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Елементи для додавання в початок масиву.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Нова властивість {{jsxref("Array.length", "length")}} об'єкту, для якого було викликано функцію.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>unshift</code> вставляє задані значення в початок масиву.</p> + + + +<p>Метод <code>unshift</code> є навмисно загальним; він може бути {{jsxref("Function.call", "викликаний", "", 1)}} або {{jsxref("Function.apply", "застосований", "", 1)}} у об'єктах, схожих на масиви. Об'єкти, які не мають властивості <code>length</code>, що відображає останню з серії послідовних числових властивостей, що починаються з нуля, можуть поводитися непередбачувано.</p> + +<p>Будь ласка, зауважте, якщо у параметри передається більше одного значення, вони всі вставляються на початку об'єкта, саме в тому порядку, в якому були передані у параметри. Отже, виклик unshift з <strong>n</strong> аргументів <strong>за один раз</strong>, або виклик <strong>n</strong> разів з <strong>1</strong> аргументом (наприклад, у циклі), не дадуть однаковий результат. Наприклад:</p> + +<pre class="brush: js">let arr = [4, 5, 6]; + +arr.unshift(1, 2, 3); +console.log(arr); +// [<strong>1, 2, 3</strong>, 4, 5, 6] + +arr = [4, 5, 6]; // скидаємо значення масиву + +arr.unshift(1); +arr.unshift(2); +arr.unshift(3); + +console.log(arr); +// [<strong>3, 2, 1</strong>, 4, 5, 6]</pre> + + + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">var arr = [1, 2]; + +arr.unshift(0); // результатом виклику буде значення 3, нова довжина масиву +// arr дорівнює [0, 1, 2] + +arr.unshift(-2, -1); // нова довжина масиву дорівнює 5 +// arr дорівнює [-2, -1, 0, 1, 2] + +arr.unshift([-4, -3]); // нова довжина масиву дорівнює 6 +// arr дорівнбє [[-4, -3], -2, -1, 0, 1, 2] + +arr.unshift([-7, -6], [-5]); // нова довжина масиву дорівнює 8 +// arr дорівнює [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізовано в JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table in 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.unshift")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/values/index.html b/files/uk/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..8df5438b95 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,93 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Ітератор + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>values()</code></strong> повертає новий об'єкт ітератора масиву (<strong><code>Array Iterator</code></strong>), який містить значення кожного елемента масиву.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p> + +<pre class="brush: js">var a = ['a', 'б', 'в', 'г', 'ґ']; +var iterator = a.values(); + +console.log(iterator.next().value); // а +console.log(iterator.next().value); // б +console.log(iterator.next().value); // в +console.log(iterator.next().value); // г +console.log(iterator.next().value); // ґ</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.values()</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий об'єкт ітератора масиву.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перебір_за_допомогою_циклу_for...of">Перебір за допомогою циклу <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code></h3> + +<pre class="brush: js">var arr = ['а', 'б', 'в', 'г', 'ґ']; +var iterator = arr.values(); + +for (let letter of iterator) { + console.log(letter); +} +</pre> + +<p><strong>Array.prototype.values</strong> є реалізацією за замовчуванням для <strong>Array.prototype[Symbol.iterator]</strong>.</p> + +<pre class="brush: js">Array.prototype.values === Array.prototype[Symbol.iterator] //true</pre> + +<p><strong>TODO</strong>: please write about why we need it, use cases.</p> + +<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('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.values")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> |