1.3.1.5 — Практика: циклы forEach

Цель : Практика использования Array.prototype.forEach() для решения задач, описанных ниже.

Помните, понимание является целью здесь. Вы абсолютно не обязаны выполнять все перечисленное на этой странице. На самом деле, часто преднамеренно создается на больше контента, чем может быть завершено за один день. (Это дает учащимся возможность позже просмотреть концепции без необходимости повторять упражнения, которые они выполняли ранее). Сосредоточьтесь на понимании концепций, а не на скорости.

Код


Бакалея

  • Создайте форму, позволяющую пользователю вводить товары, которые ему нужны в магазине.
  • Когда пользователь отправляет форму, скройте форму и отобразите список элементов в алфавитном порядке, все в верхнем регистре.

Подсказка: Для этого постройте массив из введенных элементов. (Убедитесь, что вы не включаете пустых полей. ) Отсортируйте массив в алфавитном порядке. Создайте новый массив с каждой записью в верхнем регистре (не делайте их просто заглавными при отображении). Затем отобразите отсортированный список вещей в виде элементов списка внутри

    .

    Изучите запись массивов в документации JavaScript Mozilla Developer Network, чтобы выяснить, какой метод можно использовать для сортировки массивов.

    Игра в слова

    • Создайте форму, в которую пользователи могут вводить предложения.
    • Превратите это предложение в массив, используя метод разделения.
    • Затем выполните цикл по этому массиву, чтобы построить
      новый массив
      из каждого слова в предложении длиной 3 или более символов.
    • Наконец, измените порядок нового массива, соедините его обратно в строку и отобразите для пользователя.

    Создание колоды

    • Используйте цикл Array.prototype.forEach() внутри другого цикла Array. prototype.forEach() для построения массива, представляющего колоду карт. Колода состоит из 52 карт по 13 рангов в каждой из 4 мастей.
    • Затем отобразите список всех карт в колоде. (Подсказка: каждый элемент массива должен читаться как «туз пик» или «четверка червей».)

    Начало вывода должно выглядеть примерно так:

    Дальнейшее исследование

    Порядок слов

    Создайте веб-сайт, который позволяет пользователям вводить блок текста. Затем приложение вернет список всех уникальных слов и количество их появлений.

    Например, если пользователь вводит «привет, мир, мир», на странице должно отображаться:

    • привет 1
    • мир 2

    Если вы закончили и чувствуете себя комфортно с циклами Array.prototype.forEach() , попробуйте выполнить приведенное выше упражнение, но вместо этого расположите список по количеству появлений — от большего к меньшему. Это сложно, но это отличный способ потренировать свои навыки решения проблем.