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

Сводка

Оператор расширения позволяет расширять выражения в тех местах, где предусмотрено использование нескольких аргументов (при вызовах функции) или ожидается несколько элементов (для массивов).

Синтаксис

При вызовах функции:

f(...iterableObj);

В литералах массива:

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

При деструктивном присваивании:

[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

Примеры

Улучшенная версия apply

Пример: очень широко используется Function.prototype.apply при необходимости передачи массива аргументов в функцию:

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

При помощи оператора разворота ES2015 вы можете использовать следующий эквивалент:

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

Оператор может использоваться для любого аргумента, в том числе и несколько раз:

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

Удобные литералы массивов

Пример: в настоящий момент, если у вас есть массив и вы хотите создать из его части новый массив, то синтаксис литералов вам не поможет и придётся использовать императивный подход с комбинацией push, splice, concat и т.п. При помощи оператора расширения это можно сделать проще:

var parts = ['плечи', 'колени'];
var lyrics = ['голова', ...parts, 'и', 'пальцы']; // ["голова", "плечи", "колени", "и", "пальцы"]

Также как и в случае со списком аргументов функции ... может быть использован в любом месте определения массива, в том числе и многократно.

Подходит для new

Пример: в ES5 невозможно выполнить комбинацию new и apply (в терминах ES5 apply выполняет вызов метода, а не конструктора). В ES2015 оператор разворота поддерживает это:

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

Улучшенная версия push

Пример: push часто используется для добавления элементов в конец массива. В ES5 это выглядит следующим образом:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Добавить все элементы из массива arr2 в arr1
Array.prototype.push.apply(arr1, arr2);

В ES2015 при использовании оператора разворота это становится:

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

Применяется только для простых массивов

var obj = {"key1":"value1"};
function myFunction(x) {
    console.log(x); // undefined
}
myFunction(...obj);
var args = [...obj];
console.log(args, args.length) //[] 0

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

Спецификация Статус Комментарий
ECMAScript 2015 (6th Edition, ECMA-262) Стандарт Определён в нескольких секциях спецификации: Инициализатор массивов, Списки аргументов
ECMAScript 2017 Draft (ECMA-262) Черновик  

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

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Оператор в литерах массивов 46 16 (16) Edge Нет 7.1
Оператор при вызовах функций 46 27 (27) Edge Нет 7.1
Оператор при деструктивном присваивании 49 34 (34) Нет ? ?
Возможность Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Оператор в литерах массивов Нет 16.0 (16) Нет Нет iOS 8
Оператор при вызовах функций Нет 27.0 (27) Нет Нет iOS 8
Оператор при деструктивном присваивании ? 34 (34) ? ? ?

Смотрите также

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

 Внесли вклад в эту страницу: kdex, midvik, nkapliev, standy, BychekRU, KrickRay, xowiun, dtretyakov
 Обновлялась последний раз: kdex,