Шпаргалка по Javascript: операторы распространения

Возможно, вы слышали об Операторах спреда. Мы используем их в повседневной разработке.

Определение: Согласно веб-документам MDN**

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

Сценарий использования:

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

1. Строка в массив с расширением:

Просто распространите переменную с помощью … и получите массив.

```javascript

const myName = "Джон Доу";

const convertMyNameToArray = [...myName];

console.log(преобразоватьMyNameToArray);

//Вывод: Массив (8)[ J,h,o,n, ,D,o,e ]

1. Распространение для объединения массивов:

Здесь распределите оба массива как [..arr1, …arr2] и получите один массив

```javascript

константный массив1 = [50 150 250];

константный массив2 = [100 200 300];

const mergedArray = [...массив1,...массив2]

console.log(объединенный массив);

//Вывод: Массив(6)[ 50 150 250 100 200 300 ]

1. Клонирование массива с помощью Spread:

Клонирование массива может быть выполнено различными способами. Вот демо. Демонстрация показывает оба пути; с операторами спреда и без них:

```javascript

//Без оператора спреда:

const animals = ['лев','тигр','зебра'];

const wildAnimals = животные;

wildAnimals.push('слон')

console.log(животные);

//Вывод: Массив (4)[лев,тигр,зебра,слон]

//Здесь затрагивается исходный массив, хотя мы вставили клонированный массив.

//С оператором спреда:

const animals = ['лев','тигр','зебра'];

const wildAnimals = [...животные];

wildAnimals.push('слон');

console.log(животные)

//Вывод: массив (3)[лев,тигр,зебра]

//Здесь исходный массив НЕ затрагивается

Знаете, почему он так себя ведет?

Оставайтесь с нами, я привожу еще один блог для объяснения этого. Зачем отдельные блоги?

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

Вкратце: оператор распространения создает глубокие копии данных, если данные не вложены. Когда у вас есть вложенные данные в массив или объект, оператор распространения создаст глубокую копию самых верхних данных и неглубокую копию вложенных данных.

Поверхностная копия. Поверхностная копия объекта — это копия, свойства которой имеют те же ссылки (указывают на те же базовые значения), что и свойства исходного объекта, из которого была сделана копия. В результате, когда вы меняете источник копии, вы также можете изменить другой объект.

Глубокая копия. Глубокая копия объекта — это копия, свойства которой не имеют тех же ссылок (указывающих на те же базовые значения), что и исходный объект, из которого была сделана копия. В результате, когда вы меняете источник копии, вы можете быть уверены, что вы не вызываете изменения и другого объекта; то есть вы не будете непреднамеренно вносить изменения в источник или копию, которых не ожидаете.

1. Установите объект в массив:

```javascript

//Создание нового объекта Set

const flowersSet = new Set(['роза','лотос','лилия']);

console.log(набор цветов);

//Вывод: Set (3) { rose=> rose,lotus=> lotus,lilly=> lilly }

//Преобразование объекта Set в массив

const newFlowerArray = [...flowerSet];

console.log(новыйЦветочныйМассив);

//Вывод: массив (3)[роза,лотос,лилия]

1. Nodelist для массива:

```javascript

//создаем объект списка узлов

const h1s = document.querySelectorAll('h1');

//конвертируем список узлов в массив

константа h1sArray = [...h1s]

1. Минимальное или максимальное значение из массива:

```javascript

// ИСПОЛЬЗОВАНИЕ ПРИМЕНЕНИЯ

const возраст = [21,52,55]

const ElderPerson = Math.min.apply(Math,возраст); //21

const youngerPerson = Math.max.apply(Math,возраст); //55

// ИСПОЛЬЗУЯ спред

const ElderPerson = Math.min(... age); //21

const более молодой человек = Math.max (... возраст); //55

1. Оператор спреда для объектов:

```javascript

const user1 = {имя: 'Джон', возраст: 21 год, };

постоянный пользователь2 = {

имя: "Доу",

доб: "5 января 1990"

const mergedUsers = {...пользователь1, ...пользователь2};

console.log(объединенные пользователи)

//Вывод: {имя: 'Доу', возраст: 21 год, дата рождения: '5 января 1990'}

Ваше здоровье!

Эта статья была впервые опубликована [здесь] (https://dev.to/msabir/javascript-spread-operators-cheetsheet-2c8o).