Блог CodeAnalogies

Наочні пояснення концепцій HTML, CSS та JavaScript

Метод зменшення JavaScript, який пояснюється дієтою

Якщо ви коли-небудь читали етикетку щодо поживності, тоді ви можете зрозуміти метод reduce () у JavaScript.

Метод зменшення в JavaScript дає простий спосіб взяти масив значень і об'єднати їх в одне значення або підсумувати масив на основі декількох категорій.

Ого, це багато в одному реченні, тож давайте зробимо крок назад.

Звичайно, ви завжди можете використовувати цикл for для ітерації масиву та здійснення певної дії щодо кожного значення. Але, якщо ви не використовуєте такі методи, як filter (), map () і reduce (), тоді ваш код стане важче читати. Іншим розробникам потрібно буде уважно прочитати кожен цикл, щоб зрозуміти мету. І це створить більше шансів для помилок, оскільки вам потрібно буде створити більше змінних для відстеження окремих значень.

Методи фільтрування беруть усі елементи в початковому масиві і дозволяють лише деякі елементи в кінцевому масиві.

Методи map запускають функцію на кожному елементі в початковому масиві, перш ніж зберігати її у кінцевому масиві.

І методи зменшення поєднують елементи з початкового масиву в кінцеве значення або масив значень.

Я зрозумів, що це щось на зразок дієти. Починаючи від дуже простих методів, таких як підрахунок калорій, до більш складних дієт, таких як Аткінс або Вагові спостерігачі, метою є перегнати всю їжу, яку ви могли б їсти протягом дня, в одне значення (або значення), щоб перевірити, чи дотримуєтесь ви шляху до втратити вагу.

Тож давайте стрибнемо в це! Для того, щоб зрозуміти цей підручник, вам просто потрібно мати досвід роботи з циклами for.

Моделювання зменшення за допомогою циклу For

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

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

Простий приклад зменшення

Давайте дізнаємось, як досягти тієї ж мети за допомогою методу зменшення ().

Зменшення - це метод масиву, тому ми почнемо з масиву підрахунку калорій.
Він використовує функцію зворотного виклику, яка працює на кожному елементі масиву.
Він використовує оператор return, щоб показати, як значення має накопичуватися після кожної ітерації масиву.

Отже, зменшення має деяке поняття пам’яті. Під час перегляду кожного елемента масиву значення відстежуються в аргументі sum. У нашому попередньому прикладі нам довелося оголосити нову змінну поза рамками циклу, щоб "запам'ятати" значення.

Використовуйте цю інтерактивну версію, щоб порівняти дієтичну версію з числовою.

Може здатися, що між цим та for () різниця в читабельності не дуже велика. Але коли вам (або іншому розробнику) потрібно відсканувати сотні рядків коду, функція зменшення дасть вам швидку підказку про призначення блоку коду.

Приклад 2- Використання об'єктів

Наразі ми щойно розглядали одновимірні масиви. Але, якщо ви можете перебирати масив, заповнений числами, ви також можете переглядати масив, заповнений об’єктами. Давайте додамо ім’я до кожного елементу, щоб ми могли з’ясувати, що ми насправді їмо протягом дня.

Ви їли стейк на сніданок ... з трохи фруктів ... потім трохи салату та чіпсів на обід ... потім нарешті морозиво на вечерю. Це чорт за день.

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

Сподіваємось, ви можете побачити потік, коли ми проходимо через масив. Під час перегляду кожного елемента сума зростає, представляючи загальну кількість споживаних калорій за день. Вся справа в тому, щоб покласти ці значення в одне велике відро - кількість калорій протягом дня.

Приклад 3- Використання багатоканальних категорій

Тож якщо все стосується калорій, чому, блін, так багато різних дієт? Я не збираюся вдаватися до науки про харчування, але ось загальне резюме - є багато розбіжностей щодо „найкращого” способу схуднення. Деякі заохочують просто підраховувати калорії, а інші - на білки, вуглеводи, жир та будь-яку іншу кількість факторів.

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

Тепер нам потрібно запустити метод reduce (). Але все це не можна відстежити за одним значенням. Ми хочемо зберегти наші категорії. Отже, наш акумулятор повинен бути об’єктом з тими ж категоріями, що й масив.

Ось коротка інтерактивна схема,

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

Ми використовуємо сегменти як об’єкт для класифікації значень на основі імені їх властивості. Ми використовуємо оператор + =, щоб додати до відповідного сегмента для кожного значення в об'єкті, спочатку з масиву продовольчих товарів. Зверніть увагу, як ми не зберігаємо назву? Це тому, що це незначно - ми просто хочемо цифри, щоб ми могли проаналізувати успіх вашої дієти протягом дня.

Як бачите, у нашому виданні була одна проблема. У нас є поле імені, яке встановлено на «стейк». Ми не хочемо зберігати назву! Отже, нам потрібно вказати ще один аргумент - початкове значення.

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

Отримайте останні підручники

Вам сподобався цей підручник? Зареєструйтесь тут, щоб отримати останні візуальні путівники по темах HTML, CSS та JavaScript.