Оператор Rest: знакомство с оператором "остаточные параметры"

Rest оператор: принцип работы


Как мы уже знаем, функцию можно вызвать, передав ей некоторое число аргументов в её параметры, например

Код

const log = function(a, b) {
  console.log(a + b);
  };
   
  log(15, 2);

Классический пример, ничего особенного. При этом число аргументов и число параметров функции одинаковы. Но функцию вполне можно вызвать и с большим количеством аргументов, чем число её параметров, и при этом ошибки не будет, будет использовано столько аргументов, сколько параметров задано у функции, например, в данном примере, несмотря на то, что аргументов передаётся четыре, использованы будут только первые два: 15 и 2

Код

const log = function(a, b) {
  console.log(a + b);
  };
   
  log(15, 2, 4, 7);

Но это примеры, в которых число параметров функции постоянно, в том же случае, если конечное число параметров заранее не известно, используется оператор Rest, записывается он как троеточие, после которого указывается название (например, rest, rs и т.д). Более того, rest оператор записывается всегда последним:

Код

const log = function(a, b, ...rest) {
  console.log(a, b, rest);
  };
   
  log('Вася', 'Петя', 'Коля', 'Саша');

Как видим, у нашей функции изначально заданы два парамера, дальше указан оператор rest, поэтому в консоли мы увидим, что первые два аргумента, переданные в функцию ('Вася' и 'Петя'), выведутся в консоли как обычно, а вот следующие два, которым "не хватило" параметров функции, выведутся массивом:

Код

Вася Петя [ 'Коля', 'Саша' ]

Это сработал rest оператор, он собрал все те аргументы, которым не хватило параметров и обединил их в массив.

Параметры по умолчанию


До появления стандарта ES6 параметры по умолчанию можно было указывать, к примеру, так, с помощью логического оператора ИЛИ:

Код

  function result(a,b) {
  b = b || 2;
  console.log(a * b);
  }

Смысл такой, что если при вызове этой функции будет передан только один аргумент (a), то в качестве второго подставится параметр по умолчанию (цифра 2 в данном случае)
Например, если мы сейчас вызовем эту функцию, передав ей только один аргумент:

Код

result(3);

то в консоли увидим в результате цифру 6 ( 3 * 2 = 6)

С появлением стандарта ES6 всё стало гораздо проще: параметры по умолчанию можно прописывать сразу при объявлении функции:

Код

  function result(a,b = 2) {
  console.log(a * b);
  }

  result(3);

Комментарии к материалу:

0
ABC
(29.08.2020 13:08)

Здесь в последнем пункте урока можно посмотреть как динамически присваивается класс элементам с помощью Rest оператора

avatar