Как использовать оператор Spread в JavaScript?

В этом руководстве вы узнаете о различных способах использования оператора 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

Заключение

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