Оператор распространения, представленный тремя последовательными точками (...), представляет собой функцию, представленную в ES6 (ECMAScript 2015), которая позволяет расширять итерируемый объект, такой как массив, строка или объект, в отдельные элементы или свойства.

Ситуация:

Это пример использования старого способа объединения двух массивов без использования оператора распространения, мы используем метод concat(). Этот метод принимает массив в качестве аргумента и возвращает новый массив, являющийся результатом объединения исходного массива с аргументом. В этом примере это выглядит довольно хорошо, но подумайте, если вы хотите объединить несколько массивов, это будет выглядеть беспорядочно.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr3); // output: [1, 2, 3, 4, 5, 6]

Вот несколько распространенных вариантов использования оператора спреда:

  1. Объединение массивов: оператор расширения может объединять два или более массивов в один массив.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

2. Копирование массивов. Оператор распространения можно использовать для создания копии массива.

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // [1, 2, 3]

3. Передача аргументов в функции. Оператор распространения можно использовать для передачи массива аргументов в функцию.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
const result = sum(...numbers); // 6

4. Объединение объектов: оператор распространения может использоваться для объединения двух или более объектов в один объект.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
const result = sum(...numbers); // 6

5. Добавление новых элементов в массивы. Оператор распространения можно использовать для добавления новых элементов в массив.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]

6. Удаление элементов из массивов. Оператор распространения можно использовать для удаления элементов из массива.

const arr1 = [1, 2, 3, 4, 5];
const [, , ...arr2] = arr1; // [3, 4, 5]

Обратите внимание, что оператор распространения работает только с итерируемыми объектами, которые являются объектами, реализующими протокол итерации, и могут быть итерированы с использованием цикла for…of или самого оператора расширения. Примеры итерируемых объектов в JavaScript включают массивы, строки, карты, наборы и генераторы.

параметр rest — это функция, представленная в ECMAScript 6 (ES6), позволяющая функции принимать произвольное количество аргументов в виде массива. Он представлен тремя точками (…), за которыми следует имя параметра.

Вот пример:

typescriptCopy code
function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}
console.log(sum(1, 2, 3, 4)); // output: 10

В приведенном выше примере функция sum принимает произвольное количество аргументов, используя оставшийся параметр ...numbers. Затем функция перебирает каждое число в массиве и складывает их, чтобы получить общее количество.

Оставшийся параметр должен быть последним параметром в списке параметров функции. Это означает, что у вас не может быть никаких параметров после параметра rest. Например, следующее определение функции неверно:

javascriptCopy code
function foo(x, ...rest, y) {
  // rest of the code
}
  1. Разрушение массивов

Вы можете использовать параметр rest для извлечения оставшихся элементов массива при деструктуризации:

scssCopy code
const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

В приведенном выше примере параметр rest используется для извлечения оставшихся элементов массива в переменную rest.

Вывод:

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

Синтаксис расширения выглядит точно так же, как синтаксис остальных. В некотором смысле, синтаксис расширения противоположен синтаксису покоя. Синтаксис Spread «расширяет» массив на его элементы, а синтаксис rest собирает несколько элементов и «конденсирует» их в один элемент.