Написание функций, которые перебирают вложенные объекты массива (и как отобразить их на веб-странице!) — JavaScript
Привет! Меня зовут Брук (она/ее), и это мой первый пост в блоге! После быстрых 3 недель я так горжусь тем, что завершил Фазу 1 (из 5!) Учебного лагеря Flatirons.
Изучив СТОЛЬКО контента всего за несколько коротких недель, я составил сообщение в блоге, которое поможет понять вложенные объекты и то, как получить к ним доступ в функции, которую мы затем хотим отобразить на нашей веб-странице.
Я даже не знал, что означают приведенные выше слова 5 недель назад, так что давайте разберемся, не так ли?
На что мы ссылаемся?
Пример, на который я буду ссылаться, взят из лаборатории, которую я провел с Flatirons! Репозиторий связан в моих ссылках, но реальная функциональность не нужна, чтобы понять, как писать эти функции.
Разбивка: как создать функцию, которая перебирает вложенные объекты массива?
3 шага:
1. Найдите данные, к которым мы хотим получить доступ, и запишите ключи/их значения. Вложенные данные будут объектами внутри объектов!
2. Иди наизнанку! Чтобы получить доступ к самому внутреннему объекту, нам нужно создать функцию, которая принимает параметр и передает его через самый внешний объект, чтобы получить доступ к данным для внутреннего объекта! (тьфу, что это вообще значит?)
3. Чтобы получить его на странице, нам просто нужно создать несколько элементов и убедиться, что мы перебираем каждый вложенный объект массива.
Словарный запас
Прежде чем полностью погрузиться в итерацию по вложенным объектам массива, вот несколько определений терминов:
Параметр: имена, указанные в скобках после функции. Это как заполнитель для того, что вы передаете через функцию позже.
Аргумент: реальные значения, которые получает и затем передает функция.
Массив: переменная, которая может хранить более одного значения. Обычно в списке, заключенном в [ ], но может выглядеть по-разному в зависимости от их использования.
Объекты: аналогично массивам, это переменная, которая также может содержать более одного значения. Объекты не могут быть пройдены напрямую (например, вы должны использовать циклы for..in), но массивы могут!
Шаги с примерами
- Ознакомьтесь с объектами, с которыми вы работаете! Пример того, как это будет выглядеть, приведен ниже:
2. Теперь, когда вы нашли данные, которые хотите перебрать, давайте напишем функцию, которая позволит нам получить к ним доступ и поместить ВСЕ на нашу страницу!
3. Похоже, наша веб-страница и код уже содержат всю необходимую информацию, но увы! Нам не хватает наших вложенных данных: пользователей, которым понравилась эта книга! Почему это не появится? Давайте посмотрим, как мы получили доступ к другой информации:
4. Фиолетовое выделение показывает нам элементы, которые ранее были созданы в глобальной области видимости. Желтый показывает нам параметр, через который мы проходим («книга»). Оранжевый показывает нам имя ключа, для которого мы хотим получить возвращаемое значение. Поскольку каждый из этих элементов не имеет вложенных дополнительных объектов, они отображаются на нашей странице!
Мы создали функцию, которая будет возвращать запрашиваемый нами object.key. Передавая параметр Prior: book.key, мы можем перебирать каждое значение и возвращать его для каждого объекта (книги). Это потому, что мы создали цикл forEach (не показан). Несмотря на это, использование object.key используется каждый раз, когда мы хотим получить доступ к значению в нашем массиве объектов.
5. Что произойдет, если мы попросим нашу страницу вернуть имена пользователей, как указано выше? Ничего! Вышеупомянутый элемент «имя пользователя», который мы создали в глобальной области видимости, не может вернуть book.username. Почему это? Потому что имя пользователя не является ключом, к которому мы можем получить доступ при первом проходе. Помните, объекты не могут быть пройдены напрямую!
6. Возвращаясь к нашему массиву объектов, нам нужно создать отдельную функцию, которая получает доступ к информации о пользователях, перебирая каждого пользователя и отображает каждого пользователя, имя пользователя. Мы не можем получить доступ к имени пользователя, прежде чем сообщить коду, что мы имеем в виду значение ключа внутри пользователя!
7. Что мы сейчас делаем? Нам нужен наш код, чтобы перебирать данные каждого пользователя и возвращать информацию об отдельных пользователях. Приведенный выше код делает довольно много. Потратьте секунду, чтобы прочитать этот пример, прежде чем двигаться дальше!
8. Хорошо, мы создали функцию для получения пользователей! Все готово… подождите, есть еще? Не забывайте! Наши объекты не могут быть пройдены напрямую. Нам нужно сообщить нашему коду, что мы обращаемся к тому же параметру, что и раньше. Объект «книга» должен найти ключевых пользователей. Затем созданную нами функцию необходимо вызывать для каждого найденного ключа пользователя, а затем выполнять цикл, чтобы мы могли просматривать информацию о каждом пользователе!
Заключение
Эти концепции были довольно сложными для меня, чтобы понять! Понимание моей области и того, как использовать цикл forEach, было важно, но еще важнее то, как получить доступ к вложенным данным, заняло много времени. Надеюсь, что это было полезно, но я здесь, чтобы редактировать этот блог, поскольку я продолжаю учиться и улучшать свое понимание!
