Открыть меню    

Spread и rest в ES6

Оператор ... , в зависимости от контекста может использоваться:
как оператор spread (расширение, раскладывать) или как оператор rest (остальные, основывать, собирать).

Оператор spread

Оператор spread используется для разделения коллекций на отдельные элементы:

var log = function(a, b, c) {
  console.log(a, b, c);
};

log(...[1, 2, 3]); // 1 2 3 

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

log.apply(null, [12, 2, 3]); // 12 2 3
// Равнозначно
log(...[13, 2, 3]); // 13 2 3

Оператор spread, примеры использования

var arr = [3, 4, 5];
var arr2 = [1, 2, ...arr, 6, 7, 8];
console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7, 8 ]

Оператор rest (остальные, собирать, основывать)

Также оператор ... может объединять группу значений в массив:

var log = function(a, b, ...rest) {
  console.log(a, b, rest);
};

log(1, 2, 3, 4, 5, 6); // 1 2 [ 3, 4, 5, 6 ]

При отсутствии именованных параметров будут собраны все аргументы:

var log = function(...rest) {
  console.log(rest);
};

log(1, 2, 3, 4, 5, 6); // [ 1, 2, 3, 4, 5, 6 ]

Отсюда интересная возможность: использовать оператор ... в качестве альтернативы arguments.

function foo(...args) {
    // args это массив

    // удаляем первый элемент массива
    args.shift();

    console.log(...args);
}
foo(1,2,3,4); // 2, 3, 4

Как видите, если оператор ... используется при объявлении функции, то с целью сбора значений.

Комментарии к статье