Оператор распространения, представленный тремя последовательными точками (...
), представляет собой функцию, представленную в 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]
Вот несколько распространенных вариантов использования оператора спреда:
- Объединение массивов: оператор расширения может объединять два или более массивов в один массив.
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 }
- Разрушение массивов
Вы можете использовать параметр 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 собирает несколько элементов и «конденсирует» их в один элемент.