В этом руководстве вы узнаете о различных способах использования оператора Spread
в JavaScript и об основных различиях между операторами Spread и остатка.
Обозначаемый тремя точками (…), оператор расширения JavaScript был введен в ES6. Его можно использовать для расширения элементов коллекций и массивов до отдельных элементов.
Оператор распространения можно использовать для создания и клонирования массивов и объектов, передачи массивов в качестве параметров функции, удаления дубликатов из массивов и многого другого.
Синтаксис
Оператор распространения можно использовать только для итерируемых объектов. Он должен использоваться прямо перед итерируемым объектом без какого-либо разделения. Например:
console.log(...arr);
Параметры функции
Возьмем в качестве примера метод Math.min(). Этот метод принимает как минимум одно число в качестве параметра и возвращает наименьшее число среди переданных параметров.
Если у вас есть массив чисел и вы хотите найти минимальное из этих чисел, без оператора распространения вам нужно либо передавать элементы один за другим, используя их индексы, либо использовать метод apply() для передачи элементов массива. массив в качестве параметров. Например:
const numbers = [15, 13, 100, 20]; const minNumber = Math.min.apply(null, numbers); console.log(minNumber); // 13
Обратите внимание, что первым параметром является null, так как первый параметр используется для изменения значения thisвызывающей функции.
Оператор распространения — это более удобное и читаемое решение для передачи элементов массива в качестве параметров функции. Например:
const numbers = [15, 13, 100, 20]; const minNumber = Math.min(...numbers); console.log(numbers); // 13
Вы можете увидеть это в этом живом примере:
const firstNumberElm = document.querySelector('#number1'); const secondNumberElm = document.querySelector('#number2'); const thirdNumberElm = document.querySelector('#number3'); const button = document.querySelector('#submit'); const resultElm = document.querySelector('#result'); button.addEventListener('click', function (e) { const numbers = [firstNumberElm.value, secondNumberElm.value, thirdNumberElm.value]; resultElm.textContent = Math.min(numbers); })
Создать массивы
Оператор распространения можно использовать для создания новых массивов из существующих массивов или других итерируемых объектов, включающих метод Symbol.iterator(). Это объекты, которые можно повторять с помощью for…ofцикла.
Например, его можно использовать для клонирования массивов. Если вы просто присвоите новому массиву значение существующего массива, внесение изменений в новый приведет к обновлению существующего:
const numbers = [15, 13, 100, 20]; const clonedNumbers = numbers; clonedNumbers.push(24); console.log(clonedNumbers); // [15, 13, 100, 20, 24] console.log(numbers); // [15, 13, 100, 20, 24]
Используя оператор распространения, существующий массив можно клонировать в новый массив, и любые изменения, внесенные в новый массив, не повлияют на существующий массив:
const numbers = [15, 13, 100, 20]; const clonedNumbers = [...numbers]; clonedNumbers.push(24); console.log(clonedNumbers); // [15, 13, 100, 20, 24] console.log(numbers); // [15, 13, 100, 20]
Следует отметить, что это будет клонировать только одномерные массивы. Это не будет работать для многомерных массивов.
Оператор распространения также можно использовать для объединения нескольких массивов в один. Например:
const evenNumbers = [2, 4, 6, 8]; const oddNumbers = [1, 3, 5, 7]; const allNumbers = [...evenNumbers, ...oddNumbers]; console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]
Вы также можете использовать оператор расширения для строки, чтобы создать массив, где каждый элемент является символом в строке:
const str = 'Hello, World!'; const strArr = [...str]; console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']
Создание объектов
Оператор распространения можно использовать по-разному для создания объектов.
Его можно использовать для поверхностного клонирования другого объекта. Например:
const obj = { name: 'Mark', age: 20}; const clonedObj = { ...obj }; console.log(clonedObj); // {name: 'Mark', age: 20}
Его также можно использовать для объединения нескольких объектов в один. Например:
const obj1 = { name: 'Mark', age: 20}; const obj2 = { occupation: 'Student' }; const clonedObj = { ...obj1, ...obj2 }; console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}
Следует отметить, что если объекты имеют одинаковые имена свойств, будет использоваться значение последнего распространения объекта. Например:
const obj1 = { name: 'Mark', age: 20}; const obj2 = { age: 30 }; const clonedObj = { ...obj1, ...obj2 }; console.log(clonedObj); // {name: 'Mark', age: 30}
Оператор распространения можно использовать для создания объекта из массива, где индексы в массиве становятся свойствами, а значение этого индекса становится значением свойства. Например:
const numbers = [15, 13, 100, 20]; const obj = { ...numbers }; console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}
Его также можно использовать для создания объекта из строки, где аналогичным образом индексы в строке становятся свойствами, а символ в этом индексе становится значением свойства. Например:
const str = 'Hello, World!'; const obj = { ...str }; console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}
Преобразование списка узлов в массив
NodeList — это набор узлов, которые являются элементами документа. Доступ к элементам осуществляется через методы в коллекциях, такие как itemили entries, в отличие от массивов.
Вы можете использовать оператор распространения для преобразования NodeList в массив. Например:
const nodeList = document.querySelectorAll('div'); console.log(nodeList.item(0)); // <div>...</div> const nodeArray = [...nodeList]; console.log(nodeList[0]); // <div>...</div>
Удалить дубликаты из массивов
Объект Set — это коллекция, в которой хранятся только уникальные значения. Подобно NodeList, набор можно преобразовать в массив с помощью оператора расширения.
Поскольку набор хранит только уникальные значения, его можно использовать в паре с оператором расширения для удаления дубликатов из массива. Например:
const duplicatesArr = [1, 2, 3, 2, 1, 3]; const uniqueArr = [...new Set(duplicatesArr)]; console.log(duplicatesArr); // [1, 2, 3, 2, 1, 3] console.log(uniqueArr); // [1, 2, 3]
Оператор Spread против оператора Rest
Rest оператор также является оператором с тремя точками (…), но он используется для другой цели. Оператор rest можно использовать в списке параметров функции. Чтобы сказать, что эта функция принимает неопределенное количество параметров. Эти параметры можно обрабатывать как массив.
Например:
function calculateSum(...funcArgs) { let sum = 0; for (const arg of funcArgs) { sum += arg; } return sum; }
В этом примере оператор rest используется как параметр calculateSumфункции. Затем вы перебираете элементы в массиве и складываете их, чтобы вычислить их сумму.
Затем вы можете либо передавать переменные одну за другой calculateSumфункции в качестве аргументов, либо использовать оператор распространения для передачи элементов массива в качестве аргументов:
console.log(calculateSum(1, 2, 3)); // 6 const numbers = [1, 2, 3]; console.log(calculateSum(...numbers)); // 6
Заключение
Оператор расширения позволяет делать больше с меньшим количеством строк кода, сохраняя при этом читабельность кода. Его можно использовать в итерируемых объектах для передачи параметров в функцию или для создания массивов и объектов из других итерируемых объектов.