diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/uk/web/javascript/reference/global_objects/array/map/index.html | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/uk/web/javascript/reference/global_objects/array/map/index.html')
| -rw-r--r-- | files/uk/web/javascript/reference/global_objects/array/map/index.html | 349 |
1 files changed, 0 insertions, 349 deletions
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 deleted file mode 100644 index 2c71a1fe6f..0000000000 --- a/files/uk/web/javascript/reference/global_objects/array/map/index.html +++ /dev/null @@ -1,349 +0,0 @@ ---- -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> |
