Три точки (…) в Javascript

Синтаксис spread—  это новое дополнение в JavaScript ES6. Он принимает итерируемый объект (например, массив) и расширяет его на отдельные элементы.

Синтаксис spread часто используется для поверхностного копирования объектов JS, делая код компактным, лаконичным и более удобным для восприятия человека.

Синтаксис

Синтаксис spread обозначается тремя точками ….

let array = [...value]

Примеры

Массив  —  самая распространенная структура данных, поэтому в примерах будем рассматривать именно ее.

1. Копирование массива

В массиве array2 содержатся элементы, скопированные из массива array1. Любые изменения в массиве array1 не будут отражены в массиве array2 и наоборот.

Если бы использовался простой оператор присваивания, то массиву array2 была бы присвоена ссылка на массив array1 и изменения в одном массиве отражались бы на другом, что в большинстве случаев нежелательно.

let array1 = ['h', 'e', 'l', 'l', 'o'];
let array2 = [...array1];
console.log(array2);

['h', 'e', 'l', 'l', 'o'] // вывод

2. Вставка элементов одного массива в другой

Синтаксис spread задействуется для добавления одного массива после любого элемента второго массива. То есть для синтаксиса spread нет никаких ограничений на то, что десерты массива desserts добавляются только в начало или только в конец массива desserts1.

let desserts = ['cake', 'cookie', 'donut'];
let desserts1 = ['icecream', 'flan', 'frozen yoghurt', ...desserts];
console.log(desserts);

//Добавление сладких десертов baked_desserts после flan
let desserts2 = ['icecream', 'flan', ...desserts, 'frozen yoghurt'];
console.log(desserts2);

// вывод
[ 'cake', 'cookie', 'donut' ]
[ 'icecream', 'flan', 'cake', 'cookie', 'donut', 'frozen yoghurt' ]

3. Передача массива в качестве аргументов

function multiply(number1, number2, number3) {
  console.log(number1 * number2 * number3);
}
let numbers = [1,2,3];
multiply(...numbers);

Вместо того чтобы передавать каждый элемент, например numbers[0], numbers[1] и т. д., синтаксис spread позволяет передавать элементы массива в качестве отдельных аргументов.

//Передача в объект Math элементов массива в качестве аргументов
let numbers = [1,2,300,-1,0,-100];
console.log(Math.min(...numbers));

Объект Math в Javascript не принимает в качестве аргумента ни одного массива. А вот с помощью синтаксиса spread такая передача массива становится возможной: массив расширяется на несколько аргументов всего одной строкой кода.

Читайте также:

• Паттерн проектирования «Наблюдатель»: объект под прицелом
• 5 основных рекурсивных задач на собеседованиях по программированию
• Лучшие JavaScript-фреймворки и тенденции веб-разработки в 2021 году

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи Muhammad Hasan: What are three dots (…) in Javascript