Ці методи JavaScript покращать ваші вміння всього за кілька хвилин

Більшість програм, які ми створюємо сьогодні, потребують певної модифікації збору даних. Обробка елементів у колекції - звичайна операція, з якою ви, швидше за все, зіткнетесь. Забудьте про звичайний спосіб робити for-loopяк (let i=0; i < value.length; i++).

Швидкий хед-ап, використовуючи constin for-loop, дасть вам помилку. Причина тому, що вона повторно оголошує значення під час кожного виконання, отже i, змінюється i++. Тож, коли ви думаєте або використовувати, constабо letзапитайте себе - чи буде це значення повторно оголошено? Якщо відповідь позитивна , ідіть за let, а якщо ні - за const. Більше інформації.

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

Можливо, вам не подобаються функції стрілок , ви не хочете витрачати занадто багато часу на вивчення чогось нового, або вони просто не актуальні для вас. Не хвилюйся, ти не одна. Я покажу вам, як це робиться в ES5 (функціональне уповільнення) та ES6 (функції стрілок).

Майте на увазі: функції зі стрілками та декларації / вирази функцій не є еквівалентними і не можуть бути замінені наосліп. Майте на увазі, що thisключове слово працює по-різному.

Методи, які ми розглянемо:

  1. Спред-оператор
  2. для ... ітератора
  3. включає ()
  4. дещо()
  5. кожен ()
  6. filter ()
  7. map ()
  8. зменшити ()
Якщо ви хочете стати кращим веб-розробником, відкрити власний бізнес, навчати інших або вдосконалити свої навички розробки, я щотижня публікую поради та підказки на останніх мовах веб-розробки.

1. Спред-оператор

Оператор розповсюдження розширює масив за своїми елементами. Він також може використовуватися для об’єктних літералів.

Чому я повинен це використовувати?

  • Це простий і швидкий спосіб показати елементи масиву
  • Це працює для масивів та літералів об’єктів
  • Це швидкий та інтуїтивно зрозумілий спосіб передавати аргументи
  • Для цього потрібно лише три крапки ...

Приклад:

Скажімо, ви хочете показати список улюблених страв, не створюючи функції циклу. Використовуйте оператор поширення таким чином:

2. для… ітератора

Оператор for...ofциклічно / повторює колекцію та надає вам можливість змінювати певні елементи. Він замінює традиційний спосіб a for-loop.

Чому я повинен це використовувати?

  • Це простий спосіб додати або оновити елемент
  • Для проведення обчислень (сума, множення тощо)
  • При використанні умовних операторів (якщо, в той час, перемикач тощо)
  • Призводить до чистого та читабельного коду

Приклад:

Скажімо, у вас є набір інструментів, і ви хочете показати всі інструменти всередині нього. for...ofІтератора робить його легким.

3. Включає метод ()

includes()Метод використовується для перевірки , якщо конкретна рядок існує в колекції, і повертає trueабо false. Майте на увазі, що він чутливий до регістру: якщо елемент всередині колекції є SCHOOL, і ви шукаєте school, він повернеться false.

Чому я повинен це використовувати?

  • Побудувати просту функціональність пошуку
  • Це інтуїтивний підхід для визначення, чи існує рядок
  • Він використовує умовні оператори для модифікації, фільтрації тощо
  • Призводить до читабельного коду

Приклад:

Скажімо, з будь-якої причини ви не знаєте, які машини у вас є в гаражі, і вам потрібна система, яка перевіряє, чи існує машина, яку ви хочете. includes()на допомогу!

4. Деякий () метод

У some()методі перевіряє , якщо деякі елементи існують в масиві і повертає trueабо false. Це дещо схоже на концепцію includes()методу, за винятком того, що аргумент - це функція, а не рядок.

Чому я повинен це використовувати?

  • Це гарантує, що якийсь предмет пройшов тест
  • Він виконує умовні оператори, використовуючи функції
  • Зробіть свій код декларативним
  • Деякі досить хороші

Приклад:

Скажімо, ви власник клубу, і вам байдуже, хто входить у клуб. Але когось не пускають, бо вони занадто багато пили (у кращому випадку моя творчість). Перевірте відмінності між ES5 та ES6 нижче:

ES5:

ES6:

5. Кожен () метод

У every()методі петля через масив, перевіряє коженелемент, а повертає trueабо false. Те саме поняття, що і some(). Окрім того, що кожен елемент повинен відповідати умовному висловленню, інакше він повернеться false.

Чому я повинен це використовувати?

  • Це гарантує, що кожен предмет проходить тест
  • Ви можете виконувати умовні оператори за допомогою функцій
  • Зробіть свій код декларативним

Приклад:

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

ES5

ES6

6. Метод Filter ()

filter()Метод створює новий масив з усіма елементами , які проходять випробування.

Чому я повинен це використовувати?

  • Тож ви можете уникнути зміни основного масиву
  • Це дозволяє вам відфільтрувати непотрібні вам предмети
  • Дає вам читабельніший код

Приклад:

Скажімо, ви хочете повернути лише ціни, які перевищують або дорівнюють 30. Відфільтруйте всі ці інші ціни ...

ES5

ES6

7. Метод Map ()

map()Метод аналогічний filter()методу з точки зору повернення новий масив. Однак єдина відмінність полягає в тому, що він використовується для модифікації елементів.

Чому я повинен це використовувати?

  • Це дозволяє уникнути внесення змін до основного масиву
  • Ви можете змінити потрібні елементи
  • Дає вам читабельніший код

Приклад:

Скажімо, у вас є перелік товарів із цінами. Вашому менеджеру потрібен список, щоб показати нові ціни після того, як вони будуть оподатковані 25%. map()Метод може допомогти вам.

ES5

ES6

8. Метод зменшення ()

reduce()Метод може бути використаний для перетворення масиву в щось інше, що може бути ціле число, об'єкт, ланцюг обіцянок (послідовне виконання обіцянок) і т.д. З практичних причин, простий випадок використання буде підвести список цілих чисел . Коротше кажучи, це "зменшує" весь масив до одного значення.

Чому я повинен це використовувати?

  • Виконайте обчислення
  • Обчисліть значення
  • Порахувати дублікати
  • Групувати об’єкти за властивостями
  • Виконувати обіцянки послідовно
  • Це швидкий спосіб проведення розрахунків

Приклад:

Скажімо, ви хочете з’ясувати загальні витрати за тиждень. Використовуйте, reduce()щоб отримати це значення.

ES5

ES6

Ви можете знайти мене в Новинах розробників, де я публікую щотижня. Або ви можете стежити за мною у Twitter, де я публікую відповідні поради та підказки щодо веб-розробки.