diff options
Diffstat (limited to 'files/uk/web/javascript/reference/global_objects/array/slice/index.html')
| -rw-r--r-- | files/uk/web/javascript/reference/global_objects/array/slice/index.html | 242 |
1 files changed, 242 insertions, 0 deletions
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> |