Вступ до оператора поширення та параметра відпочинку у JavaScript (ES6)

І оператор поширення, і параметр rest записуються у вигляді трьох послідовних крапок (...). Чи є у них ще щось спільне?

Оператор розповсюдження (…)

Оператор розповсюдженнябула введена в ES6. Він надає вам можливість розширювати об'єкти, що підлягають ітерації, на кілька елементів. Що це насправді означає? Давайте перевіримо кілька прикладів.

const movies = ["Leon", "Love Actually", "Lord of the Rings"];console.log(...movies);

Друк:

Леон Лав Насправді Володар кілець
const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Друк:

1 4 5 7

Ви можете помітити, що як масив з першого прикладу, так і набір з другого були розширені до окремих елементів (відповідно рядків і цифр). Ви можете запитати, як це може бути корисно.

Найпоширенішим використанням є, мабуть, поєднання масивів. Якщо вам коли-небудь доводилося робити це за часів до оператора розповсюдження, ви, ймовірно, використовували concat()метод.

const shapes = ["triangle", "square", "circle"];const objects = ["pencil", "notebook", "eraser"];const chaos = shapes.concat(objects);console.log(chaos);

Друк:

[„Трикутник“, „квадрат“, „коло“, „олівець“, „зошит“, „гумка“]

Це не так вже й погано, але те, що пропонує оператор поширення, - це ярлик, який робить ваш код теж набагато читабельнішим:

const chaos = [...shapes, ...objects];console.log(chaos);

Друк:

[„Трикутник“, „квадрат“, „коло“, „олівець“, „зошит“, „гумка“]

Ось що ми отримали б, якби спробували зробити те саме без оператора поширення:

const chaos = [shapes, objects];console.log(chaos);

Друк:

[Масив (3), Масив (3)]

Що тут сталося? Замість комбінування масивів ми отримали chaosмасив із shapesмасивом з індексом 0 та objectsмасивом з індексом 1.

Параметр відпочинку (…)

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

Присвоєння значень масиву змінним

Давайте подивимось на наступний приклад:

const movie = ["Life of Brian", 8.1, 1979, "Graham Chapman", "John Cleese", "Michael Palin"];const [title, rating, year, ...actors] = movie;console.log(title, rating, year, actors);

Друк:

«Життя Брайана», 8.1, 1979, [«Грем Чемпмен», «Джон Кліз», «Майкл Пейлін»]

Параметр rest дозволить взяти значення movieмасиву та призначити їх кільком окремим змінним за допомогою деструктуризації. Таким чином title, ratingі yearприсвоюються перші три значення в масиві, але там, де відбувається справжня магія, є actors. Завдяки параметру rest actorsотримує призначені решту значень movieмасиву у вигляді масиву.

Варіадичні функції

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

sum(1, 2);sum(494, 373, 29, 2, 50067);sum(-17, 8, 325900);

У попередніх версіях JavaScript такий тип функції оброблявся б за допомогою об'єкта аргументів, який є масивноподібним об'єктом, доступним як локальна змінна всередині кожної функції. Він містить усі значення аргументів, переданих функції. Давайте подивимося, як цю sum()функцію можна реалізувати:

function sum() { let total = 0; for(const argument of arguments) { total += argument; } return total;}

Це працює, але це далеко не ідеально:

  • Якщо ви подивитесь на визначення sum()функції, вона не має жодних параметрів. Це може ввести в оману.
  • Це може бути важко зрозуміти, якщо ви не знайомі з об’єктом аргументів (як у: звідки беруться arguments?!)

Ось як ми могли б написати ту саму функцію з параметром rest:

function sum(...nums) { let total = 0; for(const num of nums) { total += num; } return total;}

Зверніть увагу, що for...inцикл також був замінений на for...ofцикл. Ми зробили наш код відразу більш читабельним та стислим.

Алілуя ES6!

Ви тільки починаєте свою подорож із програмування? Ось кілька статей, які можуть вас також зацікавити:

  • Чи є для вас кодування bootcamp?
  • Чи дійсно можлива зміна кар’єри?
  • Чому Ruby - чудова мова, з якої можна починати програмувати