Spread оператор в JS

1. Массивы с оператором распространения

Когда вы используете оператор spread с массивами, JavaScript, по сути, копирует элементы из массива в новый массив или расширяет элементы с помощью вызова функции.

let arr = [1, 2, 3];
let newArr = [...arr];
console.log(newArr); 

Вывод:

[ 1, 2, 3 ]

За кулисами:

• Оператор spread берет массив arr и разбивает его на отдельные значения, фактически создавая неполную копию массива.
• Оператор вызывает внутренний протокол iterable для выполнения итерации по массиву и добавления каждого элемента в новый массив. По сути, он имитирует поведение метода Array.prototype.push(), но для всех элементов.

С технической точки зрения, оператор spread эквивалентен использованию метода Array.prototype.concat() или Array.prototype.push():

let newArr = [].concat(arr);  // Equivalent to [...arr]

2. Объекты с оператором распространения

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

let person = { name: 'GFG', age: 25 };
let newPerson = { ...person };
console.log(newPerson); 

Вывод:

{ name: 'GFG', age: 25 }

За кулисами:

• Оператор spread перебирает все свойства объекта person и добавляет их к новому объекту. Он работает путем доступа к ключам и значениям объекта и их копирования.
• Эта операция является поверхностным копированием, поэтому, если значения свойств объекта сами по себе являются объектами (вложенными объектами), копируются только ссылки на них, а не сами объекты.

Внутренне это эквивалентно:

let newPerson = Object.assign({}, person);

3. При вызове функций

Оператор spread также может использоваться для передачи массива или iterable в качестве отдельных аргументов функции. Это полезно, когда у вас есть массив значений, но вам нужно вызвать функцию с этими значениями в качестве отдельных аргументов.

function sum(a, b, c) {
 return a + b + c;
}

let nums = [1, 2, 3];
console.log(sum(...nums));

let nums = [1, 2, 3];
console.log(sum(...nums));

Вывод:

6

За кулисами:

• Оператор spread распаковывает массив nums и вызывает функцию sum, используя в качестве аргументов каждый отдельный элемент массива. Это выглядит так, как если бы функция вызывалась следующим образом:

sum(1, 2, 3);

Внутренне JavaScript использует метод apply() или аналогичный внутренний механизм для распространения аргументов:

sum.apply(null, nums);  // Equivalent to sum(...nums)

4. Объединение массивов и объектов

Оператор spread можно легко использовать для объединения массивов и объектов.

Массивы:

let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = [...arr1, ...arr2];
console.log(combined);

Вывод:

[ 1, 2, 3, 4 ]

За кулисами:

• Внутренне JavaScript выполняет несколько операций concat() или использует push() для добавления элементов arr2 в arr1.

Объект:

let obj1 = { name: 'GFG' };
let obj2 = { age: 25 };
let combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj);

Вывод:

{ name: 'GFG', age: 25 }

За кулисами:

• Оператор spread копирует все свойства из obj1 и obj2 в новый объект.Если ключи перекрываются, более поздний объект перезапишет предыдущий.