Остаточные параметры (rest parameters)

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

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

Интерактивный пример

function sum(...theArgs) {  let total = 0;  for (const arg of theArgs) {    total += arg;  }  return total;}console.log(sum(1, 2, 3));// Expected output: 6console.log(sum(1, 2, 3, 4));// Expected output: 10

Синтаксис

function(a, b, ...theArgs) {  // ...}

Если последний именованный аргумент функции имеет префикс..., он автоматически становится массивом с элементами от0 доtheArgs.length-1 в соответствии с актуальным количеством аргументов, переданных в функцию.

function myFun(a, b, ...manyMoreArgs) {  console.log("a", a);  console.log("b", b);  console.log("manyMoreArgs", manyMoreArgs);}myFun("один", "два", "три", "четыре", "пять", "шесть");// Console Output:// a, один// b, два// manyMoreArgs, [три, четыре, пять, шесть]

Отличия остаточных параметров от объекта`arguments`

Существует три основных отличия остаточных параметров от объектаarguments:

остаточные параметры включают только те, которым не задано отдельное имя, в то время как объектarguments содержит все аргументы, передаваемые в функцию;
объектarguments не является массивом, в то время как остаточные параметры являются экземпляромArray и методыsort,map,forEach илиpop могут непосредственно у них использоваться;
объектarguments имеет дополнительную функциональность, специфичную только для него (например, свойствоcallee).

Из аргументов в массив

Остаточные параметры были введены для уменьшения количества шаблонного кода:

// До появления остаточных параметров "arguments" конвертировали в обычный массив используя:function f(a, b) {  var normalArray = Array.prototype.slice.call(arguments);  // -- или --  var normalArray = [].slice.call(arguments);  // -- или --  var normalArray = Array.from(arguments);  var first = normalArray.shift(); // OK, даёт первый аргумент  var first = arguments.shift(); // ERROR (arguments не является обычным массивом)}// Теперь мы можем легко получить остаточные параметры как обычный массивfunction f(...args) {  var normalArray = args;  var first = normalArray.shift(); // OK, даёт первый аргумент}

Деструктуризация остаточных параметров

Остаточные параметры могут быть деструктурированы (только массивы). Это означает, что их данные могут быть заданы как отдельные значения. СмотритеДеструктурирующее присваивание.

function f(...[a, b, c]) {  return a + b + c;}f(1)          // NaN (b и c равны undefined)f(1, 2, 3)    // 6f(1, 2, 3, 4) // 6 (четвёртый параметр не деструктурирован)

Примеры

В этом примере первый аргумент задан как"a", второй как"b", так что эти аргументы используются как обычно. Однако третий аргумент"manyMoreArgs" будет массивом, который содержит 3-й, 4-й, 5-й, 6-й ... n-й аргументы, которые передаст пользователь.

function myFun(a, b, ...manyMoreArgs) {  console.log("a", a);  console.log("b", b);  console.log("manyMoreArgs", manyMoreArgs);}myFun("один", "два", "три", "четыре", "пять", "шесть");// a, один// b, два// manyMoreArgs, [три, четыре, пять, шесть]

Ниже... даже если передано одно значение последним аргументом, оно всё равно помещается в массив.

// использование той же функции, что и в примере вышеmyFun("один", "два", "три");// a, один// b, два// manyMoreArgs, [три]

Ниже... третий аргумент не был передан, но "manyMoreArgs" всё ещё массив (хотя и пустой).

// использование той же функции, что и в примере вышеmyFun("один", "два");// a, один// b, два// manyMoreArgs, []

ПосколькуtheArgs является массивом, количество элементов в нём определяется свойствомlength:

function fun1(...theArgs) {  console.log(theArgs.length);}fun1(); // 0fun1(5); // 1fun1(5, 6, 7); // 3

В следующем примере, остаточные параметры используются для сбора всех аргументов после первого в массив. Каждый из них умножается на первый параметр и возвращается массив:

function multiply(multiplier, ...theArgs) {  return theArgs.map(function (element) {    return multiplier * element;  });}var arr = multiply(2, 1, 2, 3);console.log(arr); // [2, 4, 6]

МетодыArray могут быть использованы на остаточных параметрах, но не на объектеarguments:

function sortRestArgs(...theArgs) {  var sortedArgs = theArgs.sort();  return sortedArgs;}console.log(sortRestArgs(5, 3, 7, 1)); // 1, 3, 5, 7function sortArguments() {  var sortedArgs = arguments.sort();  return sortedArgs; // это никогда не выполнится}console.log(sortArguments(5, 3, 7, 1)); // TypeError (arguments.sort is not a function)

Чтобы использовать методыArray на объектеarguments, нужно преобразовать его в настоящий массив.

function sortArguments() {  var args = Array.from(arguments);  var sortedArgs = args.sort();  return sortedArgs;}console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7