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

Оператор отдыха

Оператор используется для помещения некоторых пользовательских значений в массив. Текст после оператора 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 всегда должен быть в конце списка параметров, иначе это вызовет ошибку.

Существует также специальный объект, похожий на массив, с именем arguments, который содержит все аргументы по их индексу. Но недостатком является то, что хотя 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.log(otherInfo); 

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

Оператор спреда

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

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

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

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

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

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

Используйте шаблоны:

  • Остальные параметры используются для создания функций, которые принимают любое количество аргументов.
  • Синтаксис расширения используется для передачи массива функциям, которым обычно требуется список из множества аргументов.

Если вы хотите быть в курсе, подписывайтесь, хлопайте, ставьте лайки и делитесь новостями. Здоровья!