Шпаргалка по Javascript: операторы распространения
javascript javascript-development react angular javascript-frameworks javascript-fundamentals tutorial-for-beginners javascript-cheatsheet

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

14 марта 2022 г.

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


Определение: Согласно веб-документам 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).


Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE