Оператор остатка и разброса в JavaScript

Операторы Rest и Spread используют (...) три точки, но это не одно и то же.

Оператор Rest

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

Пример

function sumAll(...args) {
 // args is the name for the array
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}
// here the function can be called with any number of arguments
sumAll(1)
sunAll(1,2,3)

Мы можем выбрать получение первых параметров в качестве переменных, а собрать только остальные.

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar
  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");

// If we access the arguments object from an arrow function,
// it takes them from the outer "normal" function.

Примечание: параметр Rest всегда должен находиться в конце списка параметров, иначе это приведет к ошибке.

Существует также специальный объект типа array с именем arguments, который содержит все аргументы по их индексу. Но минус в том, что хотя arguments и является массивоподобным и итерируемым, он не является массивом. Он не поддерживает методы массивов, поэтому мы не можем вызвать аргументы.map(.), например. Кроме того, он всегда содержит все аргументы. Мы не можем захватить их частично, как это было с параметрами отдыха. Поэтому, когда нам нужны эти возможности, предпочтение отдается остальным параметрам.

Нельзя использовать "use strict" внутри функции, содержащей параметр Rest, иначе компьютер выдаст синтаксическую ошибку.

Оператор rest в качестве разрушающего присваивания

Оператор rest обычно используется в качестве префикса последней переменной деструктурирующего присваивания.

Пример

// Define a destructuring array with two regular variables
// and one rest variable:
const [firstName, lastName, ...otherInfo] = [
  "Naruto", "Sasuke", "Goku", "Ichigo", "Kirito"
];

// Invoke the otherInfo variable:
console.info(otherInfo); 

// The invocation above will return:
["Goku", "Ichigo", "Kirito"]

Оператор разброса

При использовании оператора rest мы создаем массив параметров, но иногда нужно сделать наоборот - извлечь все значения, тогда мы используем оператор spread

Синтаксис spread работает в литералах массивов, вызовах функций и инициализированных объектах свойств для разнесения значений итерируемых объектов по отдельным элементам. Таким образом, по сути, он выполняет действие, противоположное оператору rest.

let arr = [3, 5, 1];
alert( Math.max(...arr) );

Мы можем даже комбинировать синтаксис spread с обычными значениями:

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
alert( Math.max(1, ...arr1, 2, ...arr2, 25) );

Может также использоваться для преобразования строки в массив символов

let str="Hello";
alert( [...str] ); // H,e,l,l,o

Копирование массива/объекта

let obj = { a: 1, b: 2, c: 3 };

let objCopy = { ...obj }; // spread the object into a list of parameters
                          // then return the result in a new object

// do the objects have the same contents?
alert(JSON.stringify(obj) === JSON.stringify(objCopy)); // true

Кроме того, при копировании значения во вложенном файле происходит не глубокое, а поверхностное копирование

Использование шаблонов:

• Rest-параметры используются для создания функций, принимающих любое количество аргументов.
• Синтаксис spread используется для передачи массива в функции, которые обычно требуют список из многих аргументов.

Если вы хотите быть в курсе событий, подписывайтесь, хлопайте, ставьте лайк и делитесь. Будьте здоровы!