Залишкові параметри

Синтаксис залишкових параметрів дозволяє представити невизначену кількість аргументів у вигляді масиву.

Синтаксис

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

Опис

Перед останнім параметром функції може стояти ..., в результаті решта аргументів (наданих користувачем) будуть розміщені у  "стандартному" масиві JavaScript.

Лише останній параметр може бути "залишковим".

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("один", "два", "три", "чорити", "п'ять", "шість");

// Виведе:
// a, один
// b, два
// manyMoreArgs, ["три", "чотири", "п'ять", "шість"]

Різниця між залишковими параметрами та об'єктом arguments

Існують три основні відмінності між залишковими параметрами та об'єктом arguments:

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

Від arguments до масиву

Залишкові параметри були запроваджені, щоб зменшити кількість шаблонного коду, спричиненого об'єктом arguments.

// До появи залишкових параметрів, "arguments" можна було перетворити на масив таким чином:

function f(a, b) {

  let normalArray = Array.prototype.slice.call(arguments);
  // -- або --
  let normalArray = [].slice.call(arguments);
  // -- або --
  let normalArray = Array.from(arguments);

  let first = normalArray.shift(); // OK, вертає перший аргумент
  let first = arguments.shift(); // ERROR (arguments не є справжнім масивом)
}

// Тепер ми легко можемо отримати звичайний масив за допомогою залишкових параметрів

function f(...args) {
  let normalArray = args;
  let first = normalArray.shift(); // OK, вертає перший аргумент
}

Приклади

Використання залишкових параметрів

У цьому прикладі перший аргумент відповідає "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()         // 0
fun1(5)        // 1
fun1(5, 6, 7)  // 3

Звичайний параметр та залишкові параметри

У наступному прикладі залишковий параметр використовується, щоб зібрати усі аргументи після першого у масиві. Далі кожен з них помножується на перший параметр, і масив повертається:

function multiply(multiplier, ...theArgs) {
  return theArgs.map(function(element) {
    return multiplier * element;
  });
}

let arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]

Використання з об'єктом arguments

Методи Array можуть використовуватись на залишкових параметрах, але не на об'єкті arguments:

function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}

console.log(sortRestArgs(5, 3, 7, 1)); // виводить [1, 3, 5, 7]

function sortArguments() {
  var sortedArgs = arguments.sort();
  return sortedArgs; // цього ніколи не станеться
}

// викидає TypeError: arguments.sort is not a function
console.log(sortArguments(5, 3, 7, 1));

Щоб скористатись методами 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]

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

Специфікація
ECMAScript (ECMA-262)
The definition of 'Function Definitions' in that specification.

Сумісність з веб-переглядачами

BCD tables only load in the browser

Див. також