aboutsummaryrefslogtreecommitdiff
path: root/files/uk/web/javascript/reference/operators/оператор_розпакування/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/uk/web/javascript/reference/operators/оператор_розпакування/index.html')
-rw-r--r--files/uk/web/javascript/reference/operators/оператор_розпакування/index.html283
1 files changed, 0 insertions, 283 deletions
diff --git a/files/uk/web/javascript/reference/operators/оператор_розпакування/index.html b/files/uk/web/javascript/reference/operators/оператор_розпакування/index.html
deleted file mode 100644
index 4e635569ae..0000000000
--- a/files/uk/web/javascript/reference/operators/оператор_розпакування/index.html
+++ /dev/null
@@ -1,283 +0,0 @@
----
-title: Оператор розпакування
-slug: Web/JavaScript/Reference/Operators/Оператор_розпакування
-tags:
- - Iterator
- - JavaScript
- - Operator
- - Ітератор
- - Оператор
-translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
-translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p><strong>Оператор розпакування</strong> дозволяє розкласти колекцію в місця, де потрібні нуль чи декілька аргументів (як от виклики функцій), або декілька елементів (масиви), чи декілька змінних (деструктуризаційне присвоєння). Також можна розкласти об’єкт у місця де потрібні нуль чи більше пар ключ-значення (для оголошення об’єктів).</p>
-
-<h2 id="Синтаксис">Синтаксис</h2>
-
-<p>Для виклику функцій:</p>
-
-<pre class="brush: js">myFunction(...iterableObj);
-</pre>
-
-<p>Для масивів:</p>
-
-<pre class="brush: js">[...iterableObj, 4, 5, 6];</pre>
-
-<p>Для об’єктів (нове в ECMAScript; чернетка в 3-ій стадії):</p>
-
-<pre class="brush: js">let objClone = { ...obj };</pre>
-
-<h2 id="Приклади">Приклади</h2>
-
-<h3 id="Розпакування_у_викликах_функції">Розпакування у викликах функції</h3>
-
-<h4 id="Заміна_apply">Заміна apply</h4>
-
-<p><strong>Приклад:</strong> {{jsxref( "Function.prototype.apply")}} прийнято використовувати у випадках, коли потрібно застосувати елементи масиву як аргументи функції.</p>
-
-<pre class="brush: js">function myFunction(x, y, z) { }
-var args = [0, 1, 2];
-myFunction.apply(null, args);</pre>
-
-<p>З розпакуванням тепер отак:</p>
-
-<pre class="brush: js">function myFunction(x, y, z) { }
-var args = [0, 1, 2];
-myFunction(...args);</pre>
-
-<p>Оператор розпакування може бути застосований до будь-якого аргументу та може бути застосований кілька разів.</p>
-
-<pre class="brush: js">function myFunction(v, w, x, y, z) { }
-var args = [0, 1];
-myFunction(-1, ...args, 2, ...[3]);</pre>
-
-<h4 id="Apply_для_new">Apply для new</h4>
-
-<p>Викликаючи конструктор з <code>new, </code>неможливо напряму використовувати на ньому <code>apply</code> (<code>apply</code> робить <code>[[Call]],</code> а не <code>[[Construct]]</code>). Проте з оператором розпакування можна легко розкладати масив у аргументи конструктора:</p>
-
-<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Січ 1970
-// var d = new Date.apply(dateFields) не спрацює. Викине TypeError
-var d = new Date(...dateFields); // вуаля</pre>
-
-<h3 id="Розпакування_в_масивах">Розпакування в масивах</h3>
-
-<h4 id="Ліпше_оголошення_масивів">Ліпше оголошення масивів</h4>
-
-<p>Без розпакування, коли потрібно створити новий масив так, щоб якийсь існуючий був його частиною, старого синтаксису оголошення масиву не достатньо та необхідно використовувати комбінацію методів <code>push</code>, <code>splice</code>, <code>concat</code>, тощо. З оператором розпакування це стає значно лаконічніше:</p>
-
-<pre class="brush: js">var parts = ['shoulders', 'knees'];
-var lyrics = ['head', ...parts, 'and', 'toes'];
-// ["head", "shoulders", "knees", "and", "toes"]</pre>
-
-<p>Як і з розпакуванням списку аргументів, <code>...</code> можна використовувати будь-де в оголошенні масиву та будь-яку кількість разів.</p>
-
-<h4 id="Копіювання_масиву">Копіювання масиву</h4>
-
-<pre class="brush: js">var arr = [1, 2, 3];
-var arr2 = [...arr]; // так само як arr.slice()
-arr2.push(4);
-
-// arr2 стає [1, 2, 3, 4]
-// arr залишається незміненим</pre>
-
-<p><strong>Зауваження:</strong> оператор розпакування при копіюванні масиву йде лише на <strong>один</strong> рівень вглиб. Таким чином він не придатний для копіювання багатовимірних масивів, що видно з наступного прикладу (те саме з {{jsxref("Object.assign()")}} та розпакуванням об’єктів).</p>
-
-<pre class="brush: js">var a = [[1], [2], [3]];
-var b = [...a];
-b.shift().shift(); // 1
-// Тепер масив a також змінено: [[], [2], [3]]</pre>
-
-<h4 id="Ліпше_злиття_масивів">Ліпше злиття масивів</h4>
-
-<p>{{jsxref("Array.concat")}} часто використовується, щоб додати один масив у кінець іншого. Без розпакування це робиться так:</p>
-
-<pre class="brush: js">var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-// Доддати всі елементи з arr2 в arr1
-arr1 = arr1.concat(arr2);</pre>
-
-<p>З розпакуванням це стає:</p>
-
-<pre class="brush: js">var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-arr1 = [...arr1, ...arr2];</pre>
-
-<p>{{jsxref("Array.unshift")}} часто використовується для того, щоб вставити значення з одного масиву в початок іншого. Без розпакування це робиться так:</p>
-
-<pre class="brush: js">var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-// Вставити всі елементи з arr2 в початок arr1
-Array.prototype.unshift.apply(arr1, arr2) // arr1 тепер [3, 4, 5, 0, 1, 2]</pre>
-
-<p>З розпакуванням це стає:</p>
-
-<pre class="brush: js">var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-arr1 = [...arr2, ...arr1]; // arr1 тепер [3, 4, 5, 0, 1, 2]</pre>
-
-<h4 id="Розпакування_об’єктів">Розпакування об’єктів</h4>
-
-<p>Пропозиція <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (стадія 3) додає розпакування до <a href="/uk/docs/Web/JavaScript/Reference/Operators/%D0%86%D0%BD%D1%96%D1%86%D1%96%D0%B0%D0%BB%D1%96%D0%B7%D0%B0%D1%86%D1%96%D1%8F_%D0%BE%D0%B1%E2%80%99%D1%94%D0%BA%D1%82%D1%96%D0%B2">об’єктів</a>. It copies own enumerable properties from a provided object onto a new object.</p>
-
-<p>Однорівневе клонування (без прототипу) чи злиття об’єктів тепер можливе використовуючи коротший запис ніж {{jsxref("Object.assign()")}}.</p>
-
-<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 };
-var obj2 = { foo: 'baz', y: 13 };
-
-var clonedObj = { ...obj1 };
-// Object { foo: "bar", x: 42 }
-
-var mergedObj = { ...obj1, ...obj2 };
-// Object { foo: "baz", x: 42, y: 13 }</pre>
-
-<p>Зауваж, що {{jsxref("Object.assign()")}} викликає <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/set">сетери</a>, а оператор розпакування - ні.</p>
-
-<h4 id="Лише_для_ітерованих">Лише для ітерованих</h4>
-
-<p>Розпакування може бути застосоване лише для <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">ітерованик</a> об’єктів:</p>
-
-<pre class="brush: js">var obj = {'key1': 'value1'};
-var array = [...obj]; // TypeError: obj is not iterable</pre>
-
-<p><strong>Зауваження:</strong> наразі (липень 2017) можна говорити про появу розпакування об’єктів у специфікації (дивись попередній підзаголовок). Але ще не до кінця зрозуміло як працюватиме вищенаведений приклад, адже ще немає конкретного рішення щодо цього у спецефікації. Тобто тепер ти можеш розпакувати об’єкт в об’єкт, але не зрозуміло, що станеться, якщо об’єкт розпаковувати у масив і навпаки, масив у об’єкт. Наприклад транспілятор <a href="https://babeljs.io/">babel</a> вертає наступні результати:</p>
-
-<pre class="brush: js">var obj = {'key1': 'value1'};
-var array = [...obj]; // запише в array пустий масив []
-
-var arr = [1,1,1];
-var obj1 = {...arr}; // запише в obj1 {'0': 1, '1': 1, '2': 1}</pre>
-
-<h4 id="Розпакування_великих_колекцій">Розпакування великих колекцій</h4>
-
-<p>Використовуючи розпакування зважай на можливість досягнення ліміту аргументів, встановленого у JavaScript рушії, адже оператор розпакування витягує <strong>всі</strong> елементи колекції в стек, скільки б їх не було. Дивись <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> щоб дізнатись більше.</p>
-
-<h2 id="Оператор_решти">Оператор решти</h2>
-
-<p>Оператор решти виглядає точно так само як і оператор розпакування. До певної міри, він протилежний оператору розпакування - оператор розпакування розкладає колекцію на елементи, а оператор решти, натомість, складає кілька елементів у колекцію. Дивись <a href="/uk/docs/Web/JavaScript/Reference/Functions/%D1%80%D0%B5%D1%88%D1%82%D0%B0_%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%96%D0%B2">решта параметрів</a>.</p>
-
-<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-initializer')}}</td>
- <td>{{Spec2('ES2015')}}</td>
- <td>Визначено в деяких секціях специфікацій: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td>Без змін.</td>
- </tr>
- <tr>
- <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a></td>
- <td>Чернетка</td>
- <td>Чернетка в 3 стадії</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Chrome</th>
- <th>Firefox (Gecko)</th>
- <th>Internet Explorer</th>
- <th>Opera</th>
- <th>Safari (WebKit)</th>
- </tr>
- <tr>
- <td>Spread operation in array literals</td>
- <td>{{CompatChrome("46")}}</td>
- <td>{{ CompatGeckoDesktop("16") }}</td>
- <td>{{CompatIE("Edge/10240")}}</td>
- <td>{{CompatNo}}</td>
- <td>7.1</td>
- </tr>
- <tr>
- <td>Spread operation in function calls</td>
- <td>{{CompatChrome("46")}}</td>
- <td>{{ CompatGeckoDesktop("27") }}</td>
- <td>{{CompatIE("Edge/10240")}}</td>
- <td>{{CompatNo}}</td>
- <td>7.1</td>
- </tr>
- <tr>
- <td>Spread operation in destructuring</td>
- <td>{{CompatChrome("49")}}</td>
- <td>{{ CompatGeckoDesktop("34") }}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatUnknown}}</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Android</th>
- <th>Android Webview</th>
- <th>Firefox Mobile (Gecko)</th>
- <th>IE Mobile</th>
- <th>Opera Mobile</th>
- <th>Safari Mobile</th>
- <th>Chrome for Android</th>
- </tr>
- <tr>
- <td>Spread operation in array literals</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatChrome("46")}}</td>
- <td>{{ CompatGeckoMobile("16") }}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- <td>8</td>
- <td>{{CompatChrome("46")}}</td>
- </tr>
- <tr>
- <td>Spread operation in function calls</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatChrome("46")}}</td>
- <td>{{ CompatGeckoMobile("27") }}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- <td>8</td>
- <td>{{CompatChrome("46")}}</td>
- </tr>
- <tr>
- <td>Spread operation in destructuring</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- <td>{{ CompatGeckoDesktop("34") }}</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatUnknown}}</td>
- <td>{{CompatNo}}</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/%D1%80%D0%B5%D1%88%D1%82%D0%B0_%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%96%D0%B2">Решта параметрів</a></li>
-</ul>