Вступ до поширення синтаксису в JavaScript

Що це таке і навіщо це нам потрібно?

Синтаксис поширення був введений у специфікацію ES6 JavaScript. З тих пір він виявився цінним фрагментом коду, що робить код чистим і легким для розуміння.

MDN визначає ... як:

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

Давайте всі погодимось, що наведене вище визначення - це жменька, і ніхто з нас не вловив жодного слова, яке він намагається сказати. Отже, почнемо з найосновніших речей про синтаксис поширення.

  • Оператор розкидання складає всього 3 крапки ...
  • Він може бути використаний для ітерацій, таких як масив або рядок.
  • Він розширює ітерабельність до своїх окремих елементів
  • Він може забезпечити виклик функції з масивом (або будь-яким іншим ітерабельним), де очікувалося 0 або більше аргументів.

Приклад

Наведений нижче фрагмент містить функцію, яка називається sum, яка очікує 3 аргументи x, y та z. У нас є масив з 3 елементами, і ми хочемо передати елементи в масиві як аргументи функції.

До введення оператора розповсюдження це було зроблено за допомогою функції apply.

Після введення оператора розповсюдження це можна було зробити дуже просто:

Як видно з наведеного фрагмента з оператором поширення, нам не потрібно використовувати функцію apply. Це позбавляє нас від написання більше коду.

Наведений приклад дає дуже приблизне та коротке уявлення про оператор розповсюдження. Спочатку давайте детальніше розглянемо те саме, а потім побачимо більше прикладів.

Синтаксис

Оператор розповсюдження може бути використаний різними способами та такими сценаріями, як

  • Усередині викликів функцій

Коли використовується у вищевказаному сценарії, це називається параметром відпочинку. Ми побачимо приклади, пов’язані з цим, у розділі прикладів.

  • Створення / розширення масиву / iterable:

Приклади

  • Як відпочинок

... використовується як аргумент для варіатичної функції. Варіадична функція - це функція, яка може мати змінну кількість параметрів.

Тут, коли ми повертаємо аргументи, ми бачимо, що повертаємо наш масив, який ми передали як окремі значення у виклику. Це показує, що оператор rest насправді працює прямо протилежно синтаксису поширення. Один розширює, а другий конденсує цінність.

Ще одне, на що слід звернути увагу, - це те, що у визначенні функції немає певної кількості параметрів. Це означає використання… функція може мати n кількість аргументів. Нам не потрібно заздалегідь вказувати параметри.

Це особливо гнучкий спосіб отримання аргументів для функції, для якої конкретна кількість аргументів не визначається, як функції Math.max та Math.min. Вони є варіатичними функціями, оскільки кількість входів для них може бути нескінченною.

Повернімось до прикладу, щоб отримати суму всіх аргументів

Для отримання результату нам потрібно повторити масив і додати всі окремі елементи.

  • Натискання елементів у масиві

Функція push () використовується для виштовхування елементів у масив. Обмеження при натисканні полягає в тому, що ми повинні штовхати елементи по одному (push (1,2,3)). Якщо є масив, елементи якого потрібно вставити в масив за допомогою push, ми отримаємо багатовимірний масив, про який ми не просили.

Знову звернутися до порятунку

Як ми бачимо, що використання apply виглядає не дуже елегантно, і для цього нам потрібен простий і невеликий синтаксис. Використовуймо спред ...

Елегантно!

  • Копіювання масиву

Просто!

Той самий результат може бути отриманий за допомогою об'єкта

  • Об'єднання 2 масивів

Конкатенація здійснюється за допомогою функції concat

Те саме можна досягти за допомогою оператора…

  • Перетворення рядка в масив

Це можна зробити як за допомогою функції розбиття, так і за допомогою оператора…

  • Використовувати у функціях max та min

Наведений нижче фрагмент прагне знайти максимальний елемент у масиві, тому ми передаємо цілий масив у функцію, але отримуємо результат як NaN

Ми можемо використовувати apply, але, як видно з попередніх прикладів, я ненавиджу його використання

Те саме для хв

Висновок

Ми бачили багато ситуацій, коли оператор поширення стає в нагоді і зменшує наш код, а також робить його надзвичайно простим для розуміння.

Якщо тобі це подобається Хлоп? і стежити? для більш.