MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Оператор розпакування

Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

Оператор розпакування дозволяє розкласти колекцію в місця, де потрібні декілька аргументів (як от виклики функцій), або декілька елементів (масиви), чи декілька змінних (деструктуризаційне пирсвоєння).

Синтаксис

Для виклику функцій:

myFunction(...iterableObj);

Для масивів:

[...iterableObj, 4, 5, 6];

Приклади

Ліпший apply

Приклад: Function.prototype.apply прийнято використовувати у випадках, коли потрібно застосувати елементи масиву як аргументи функції.

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

З ES2015 розпакуванням ти можеш тепер написати подане вище таким чином:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

Оператор розпакування може бути застосований до будь-якого аргументу та може бути застосований кілька разів.

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

Краще оголошення масивів

Приклад: без ES2015 розпакування, коли потрібно створити новий масив так, щоб якийсь існуючий був його частиною, старого синтаксису оголошення масиву не достатньо та необхідно використовувати комбінацію методів push, splice, concat, тощо. З оператором розпакування це стає значно лаконічніше:

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

Як і з розпакуванням списку аргументів, ... можна використовувати будь-де в оголошенні масиву та будь-яку кількість разів.

Apply для new

Приклад: в ES5 неможливо поєднувати new із apply (в термінах ES5, apply робить [[Call]], а не [[Construct]]). В ES2015 оператор розпакування це підтримує:

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

Copy an array

var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4); 

// arr2 becomes [1, 2, 3, 4]
// arr remains unaffected

Note: Typically the spread operators in ES2015 goes one level deep while copying an array. Therefore, they are unsuitable for copying multidimensional arrays. It's the same case with Object.assign() and Object spread operators. Look at the example below for a better understanding.

var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift();// a is now [[], [2], [3]]

A better way to concatenate arrays

Example: concat is often used to concatenate an array to the end of an existing array. In ES5 this is done as:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
arr1 = arr1.concat(arr2);

In ES2015 with spread this becomes:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];

Example: unshift is often used to insert values in an array at the start of an existing array. In ES5 this is done as:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Prepend all items from arr2 onto arr1
Array.prototype.unshift.apply(arr1, arr2)

In ES2015 with spread this becomes:

var arr1 = [4, 5, 6];
var arr2 = [1, 2, 3];
arr1 = [...arr2, ...arr1]; // arr1 is now [1, 2, 3, 4, 5, 6]

Only for iterables

Note that the spread operator can be applied only to iterable objects:

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

Rest operator

Rest operator looks exactly like the spread syntax, and is used for destructuring arrays and objects. In a way, Rest elements are the opposite of spread elements - spread elements 'expands' an array into its elements, and rest elements collects multiple elements and 'condenses' into a single element. See rest parameters.

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262) Standard Defined in several sections of the specification: Array Initializer, Argument Lists
ECMAScript Latest Draft (ECMA-262) Draft No changes.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Spread operation in array literals 46 16 (16) Edge/10240 No support 7.1
Spread operation in function calls 46 27 (27) Edge/10240 No support 7.1
Spread operation in destructuring 49 34 (34) No support ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Spread operation in array literals No support 46 16.0 (16) No support No support 8 46
Spread operation in function calls No support 46 27.0 (27) No support No support 8 46
Spread operation in destructuring No support No support 34 (34) ? ? ? No support

See also

Мітки документа й учасники

 Зробили внесок у цю сторінку: trofima, KadirTopal
 Востаннє оновлена: trofima,