Свойства и объекты JavaScript могут сбить с толку новичков. Чтобы упростить понимание, вот несколько примеров того, как получить доступ к ключам и значениям объекта в JavaScript. Мы рассмотрим следующие темы:
- доступ к свойствам объекта простого объекта с использованием записи через точку и цикла for
- доступ к свойствам сложного объекта внутри массива
- доступ к свойствам сложного объекта
- работа с вложенными объектами
- работа с массивами объектов
1. Доступ к свойствам объекта: основы
Вот простой объект. У него есть три ключа и значения, к которым мы можем получить доступ, используя запись через точку. Мы также можем запустить цикл for для вывода всех объектов и свойств. Вот пример обоих подходов.
Мы можем получить доступ к свойствам объекта, используя запись через точку:
Или мы можем получить доступ к свойствам и значениям объекта, используя цикл for:
Есть много других способов перебора ключа и значений объекта. Подробнее здесь.
2. Доступ к свойствам объекта внутри массива
Давайте посмотрим на один «сложный» объект, находящийся внутри массива. Объект myMusic содержит массив (значения «форматов»), что не редкость в JavaScript. В конце этого блога мы увидим пример этого и расскажем, как вы можете получить доступ к отдельным значениям массива. А пока давайте посмотрим, как мы можем получить доступ к различным свойствам этого объекта. Вот объект внутри массива myMusic:
Во-первых, давайте попробуем использовать запись через точку:
Нам нужно использовать скобки и порядковый номер для доступа к объекту внутри массива. Без них вы получите сообщение console.log() undefined.
Теперь давайте попробуем использовать простой цикл for для доступа к свойствам и значениям внутри объекта массива. Этот базовый цикл for выводит содержимое всего объекта, поэтому все свойства и значения:
Есть много способов получить доступ к ключам и значениям одного или нескольких объектов внутри массива. Вот ссылка на ресурс с дополнительной информацией. Ниже приведен пример, в котором используется цикл for each, отображающий только значения объекта внутри массива:
3. Доступ к свойствам сложного объекта
Давайте посмотрим, что произойдет, если мы будем работать непосредственно с объектом, а не с объектом внутри массива. Теперь у нас есть этот начальный код, в котором используется тот же пример кода, что и раньше, но без скобок:
Теперь мы можем напрямую обращаться к свойствам объекта, используя запись через точку. Нам больше не нужно использовать порядковый номер в скобках для доступа к объекту. Вот как выглядит точечная нотация:
Использование цикла for выглядит следующим образом:
Опять же, нам не нужно использовать запись в квадратных скобках, поскольку мы обращаемся к объекту напрямую. Вы можете распечатать только ключи или значения, изменив оператор console.log и удалив «ключ» или «значение».
4. Работа с вложенными объектами
Ниже приведен пример вложенного объекта. «внутри» и «снаружи» — это два вложенных объекта внутри объекта «автомобиль».
Простой цикл for… in возвращает содержимое всех трех объектов:
Используя запись через точку, вы можете получить доступ к содержимому «внутреннего» объекта:
Однако для доступа к ключам и значениям вы используете запись в квадратных скобках:
Вот объект, который содержит два объекта с массивами внутри них:
Myplants — это массив, содержащий два объекта. Вот как вы используете нотацию скобок для доступа к массиву, который является значением, содержащимся в ключе списка второго объекта:
Доступ к отдельным элементам того же массива осуществляется следующим образом:
5. Работа с массивом объектов
Вот массив объектов. Давайте посмотрим, как мы можем получить доступ к различным свойствам объекта и их значениям.
К настоящему моменту должно быть ясно, что мы можем использовать скобки для выбора отдельных объектов и использовать запись через точку для доступа к отдельным свойствам выбранного объекта, например:
Объект «Шерлок Холмс» содержит ключ «лайки». Вот как мы можем получить доступ ко второму элементу этого массива (со значением «Скрипка»):
С помощью простого цикла for мы можем вывести значение числового свойства, если оно удовлетворяет условию. Предположим, мы хотим напечатать значение, относящееся к «числовому» ключу Шерлока Холмса. Мы настраиваем цикл for и оператор if следующим образом и используем оператор console.log() для вывода соответствующего числа на консоль:
Подведение итогов
Я надеюсь, что эти примеры помогут вам лучше понять объекты и массивы, а также способы доступа к свойствам и значениям в различных комбинациях объектов и массивов, таких как вложенные объекты и массивы и массивы объектов. Возможность доступа к свойствам и значениям объекта является необходимым условием для печати, удаления или обновления данных внутри объектов. Он закладывает основу для других методов и концепций, таких как деструктуризация объектов.
