Разпределящ синтаксис

Разпределящият синтаксис позволява на итериращ се израз като масив или символен низ да бъде разширен на места, където се използват нула или повече аргументи (или извиквания на функции), елементи (дефиниция на масиви), както и обект да бъде разширен на места, където се очакват нула или повече двойки от тип ключ-стойност (дефиниция на обекти).

Синтаксис

За извиквания на функции:

myFunction(...iterableObj);

За стойности на масиви или символни низове:

[...iterableObj, '4', 'five', 6];

За стойности на обекти (ново от ECMAScript 2018):

let objClone = { ...obj };

Примери

Разпределящ синтаксис при извикване на функции

Замяна на apply()

Често се използва Function.prototype.apply() в случаите, когато искаме да използваме елементите на даден масив като аргументи на функция. 

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

С разпределящия синтаксис можем да запишем горния израз по следния начин: 

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]);

Използване на аpply вместо new за конструиране на обект

Когато извикваме конструктор с new не е възможно директно да бъде използван масив и функцията apply(apply прави [[Извикване]], а не [[Конструиране]]). С помощта на разпределящия синтаксис обаче масивът може да бъде използван лесно за конструиране на обект:

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

За да използваме new с масив от параметри без разпределящ синтаксис, трябва да го направим косвено чрез прилагане на части:

function applyAndNew(constructor, args) {
   function partial () {
      return constructor.apply(this, args);
   };
   if (typeof constructor.prototype === "object") {
      partial.prototype = Object.create(constructor.prototype);
   }
   return partial;
}


function myConstructor () {
   console.log("arguments.length: " + arguments.length);
   console.log(arguments);
   this.prop1="val1";
   this.prop2="val2";
};

var myArguments = ["hi", "how", "are", "you", "mr", null];
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);

console.log(new myConstructorWithArguments);
// (вътрешна бележка за myConstructor):           arguments.length: 6
// (вътрешна бележка myConstructor):           ["hi", "how", "are", "you", "mr", null]
// (бележка на "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}

Разпределящ синтаксис при стойности на масиви

По-мощен запис при създаване на масив

Без разпределящ синтаксис създаването на нов масив с помощта на вече съществуващ като част от него, синтаксисът за създаване на масив вече не върши работа. Трябва да пишем повече, например да използваме някой от следните методи: push(), splice(), concat() и т.н. Използвайки разпределящия синтаксис записът става много по-кратък:

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

Както се използва разпределящ синтаксис за списък от аргументи, ... може да бъде използван и при създаване на масив, и то многократно.

Копиране на масив

var arr = [1, 2, 3];
var arr2 = [...arr]; // като arr.slice()
arr2.push(4); 

// arr2 става [1, 2, 3, 4]
// arr остава неафектиран

Забележка: Разпределящият синтаксис ефективно минава едно ниво по-дълбоко докато копира масив. Затова може да не е подходящ за копиране на многомерни масиви както показва следния пример(същото е с Object.assign() и разпределящ синтаксис).

var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// Сега масивът a също е афектиран: [[], [2], [3]]

По-добър начин за конкатениране на масиви

Array.prototype.concat() често е използван за конкатениране на масив към края на вече съществуващ масив. Без използване на разпределящ синтаксис това може да бъде направено по следния начин:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Добавя всички елементи от arr2 след тези на arr1
arr1 = arr1.concat(arr2);

С разпределящ синтаксис това има вида: 

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // arr1 сега е [0, 1, 2, 3, 4, 5]

Array.prototype.unshift() често се използва за добавяне на масив със стойности в началото на вече съществуващ масив. Без разпределящ синтаксис това може да бъде направено по следния начин: 

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]

С разпределящ синтаксис става по следния начин: 

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 сега е [3, 4, 5, 0, 1, 2]

Забележка: За разлика от unshift(), това създава нов arr1, а не модифицира оригиналния масив arr1

Разпределящ синтаксис при дефиниця на обекти

Предложението за Rest/Spread Properties for ECMAScript (етап 4) добавя разпределящи свойства към дефиницията на обекти. То копира собствени изброими свойства от даден обект към нов обект.

Повърхностното клониране(изключващо prototype) или смесването на обекти вече е възможно с помощта на по-кратък синтаксис от Object.assign().

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Обект { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Обект { foo: "baz", x: 42, y: 13 }

Обърнете внимание, че Object.assign() извиква setters за разлика от разпределящия синтаксис.

Забележете, че функцията  Object.assign() не може нито да бъде подменена, нито да се напише подобна:

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
const merge = ( ...objects ) => ( { ...objects } );

var mergedObj = merge ( obj1, obj2);
// Обект { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }

var mergedObj = merge ( {}, obj1, obj2);
// Обект { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }

В горния пример разпределящият синтаксис не работи както се очаква: той разпределя масив от аргументи в дефиницията на обекта според зададените параметри. 

Само за итериращи променливи

Разпределящият синтаксис (както и разпределящите свойства) може да бъде приложен само върху обекти, които могат да бъдат итерирани:

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj не може да се итерира

Разпределящ синтаксис с много стойности 

Когато използваме разпределящ синтаксис за извикване на функции трябва да бъдем запознати с възможността за надвишаване на лимита на брой на аргументи на функция в Javascript. За повече информация вижте apply().

Обединяващ синтаксис (параметри) 

Обединяващият синтаксис изглежда точно както разпределящия синтаксис, но е използван за разлагане на масиви и обекти. Иначе казано, обединяващият синтаксис е точно обратното на разпределящия синтаксис: докато разпределящият синтаксис разширява масива си със стойности, обединяващият синтаксис събира няколко елемента и ги събира в един елемент. За повече информация вижте rest parameters.

Спецификации

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262) Standard Дефинирана в няколко секции на спецификацията: Array Initializer, Argument Lists
ECMAScript 2018 (ECMA-262) Standard Дефинирана в Object Initializer
ECMAScript Latest Draft (ECMA-262) Draft Няма промени.
ECMAScript Latest Draft (ECMA-262) Draft Няма промени.

Съвместимост с браузъри

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Spread in array literalsChrome Full support 46Edge Full support 12Firefox Full support 16IE No support NoOpera Full support 37Safari Full support 8WebView Android Full support 46Chrome Android Full support 46Firefox Android Full support 16Opera Android Full support 37Safari iOS Full support 8Samsung Internet Android Full support 5.0nodejs Full support 5.0.0
Full support 5.0.0
Full support 4.0.0
Disabled
Disabled From version 4.0.0: this feature is behind the --harmony runtime flag.
Spread in function callsChrome Full support 46Edge Full support 12Firefox Full support 27IE No support NoOpera Full support 37Safari Full support 8WebView Android Full support 46Chrome Android Full support 46Firefox Android Full support 27Opera Android Full support 37Safari iOS Full support 8Samsung Internet Android Full support 5.0nodejs Full support 5.0.0
Full support 5.0.0
Full support 4.0.0
Disabled
Disabled From version 4.0.0: this feature is behind the --harmony runtime flag.
Spread in destructuringChrome Full support 49Edge No support NoFirefox Full support 34IE No support NoOpera Full support 37Safari ? WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 34Opera Android Full support 37Safari iOS ? Samsung Internet Android Full support 5.0nodejs Full support Yes
Spread in object literals
Experimental
Chrome Full support 60Edge No support NoFirefox Full support 55IE No support NoOpera Full support 47Safari Full support 11.1WebView Android Full support 60Chrome Android Full support 60Firefox Android Full support 55Opera Android ? Safari iOS Full support 11.3Samsung Internet Android Full support 8.2nodejs Full support 8.3.0
Full support 8.3.0
Full support 8.0.0
Disabled
Disabled From version 8.0.0: this feature is behind the --harmony runtime flag.

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

Вижте още