Как обратиться к свойству объекта

Как обратиться к свойству объекта

Объект можно создать при помощи литерала:

Этим кодом создан объект ob с тремя свойствами. Первое свойство с именем x имеет числовое значение, второе с именем y — строковое, третье с именем z — логическое.

Обращение к свойству объекта

Обраться к свойству объекта можно при помощи оператора точка:

Объект в роли ассоциативного массива

Для доступа к свойствам объекта можно использовать синтаксис ассоциативных массивов, ибо объект выступает и в роли ассоциативного массива, то есть его можно рассматривать как множество значений, ассоциированных с произвольными строками.

В обычном массиве значения нумеруются целыми положительными числами — индексами. В ассоциативном массиве используются не индексы, а строки, поставленные в соответствие со значениями. Таким образом, ассоциативный массив — это множество пар «строка:значение».

В силу того, что объект — это ассоциативный массив, его свойства можно задавать и в этом синтаксисе. Следующие две записи эквиваленты:

; var ob = ; 

Но вот для такой записи

не существует эквивалентной замены с именами свойств. Ведь имя не может начинаться с цифры. Однако, запись в синтаксисе ассоциативных массивов допустима и, например,

Запись же ob.1x приведет к синтаксической ошибке.

Обращение к объекту, как к ассоциативному массиву, позволяет в качестве ассоциативного индекса использовать выражение, и это часто помогает программированию. Пусть, например, создан объект:

Можно увеличить значения всех свойств на 7 при помощи такого кода:

Добавление свойств к объекту

Для того чтобы добавить к объекту новое свойство нужно просто присвоить ему какое-то значение (одновременно свойство создаётся).

; // Объект с одним свойством x ob.y = 2; // К объекту добавлено свойство y и ему присвоено значение 2. 

При обращении к несуществующему свойству объекта возвращается значение undefined .

; // Объект с одним свойством x ob.z // Равно undefined 

Следующий код устанавливает свойство x в 0 , если оно не существует (одновременно и создаётся) или увеличивает значение свойства на 1 в противном случае:

Удаление свойств объекта

Для удаления свойств объекта предназначен оператор delete .

Перечисление свойств объекта

Перечислить свойства объекта можно при помощи цикла for/in . Например, следующий код увеличивает на 7 значения всех свойств объекта:

А следующая функция формирует список имен всех свойств объекта, перечисляя их через запятую:

 var ob = ; var n = getNames(ob); // Равно строке "x0,x1,x2,x3,x4,x5" 

Замечание 1 . Тело цикла

выполняется один раз для каждого свойства объекта. При этом переменной присваивается имя этого свойства в виде строки, то есть для доступа к значению свойства нужно использовать ассоциативный синтаксис: объект[переменная] (а не объект.переменная ). Список значений свойств, например, можно получить при помощи такого кода:

 var ob = ; var n = getValues(ob); // Равно строке "10,7,0,8,9,1" 

Замечание 2 . Цикл for/in не гарантирует, что свойства объекта будут перечисляться в каком либо определённом порядке.

Выражения в качестве значений свойств объектного литерала

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

; // Пустой объект (объект без свойств) var ob = , t:function(x)>; 

Значение первого свойства объекта ob — число. Второго — массив. Третьего — объект. Четвёртого — функция.

; // Объект-точка var r = 10; var circle = ; // Объект-окружность circle.center.x // Равно 100 circle.center.y // Равно 200 circle.radius // Равно 10 

Методы объекта

Если значением свойства объекта является функция, то эту функцию называют методом объекта .

Пусть в программе введен объект-прямоугольник:

Вычислить площадь прямоугольника можно при помощи такой «внешней» (по отношению к объекту) функции:

 square(rect); // Равно 200 

Можно определить функцию, как свойство самого объекта:

 >; rect.square() // Равно 200 

Объекты в JavaScript

Объект в JavaScript — это тип данных, который может содержать коллекции различных свойств и других более сложных структур. Данные чаще всего объединены общим смыслом, что позволяет оперировать объектом, как единым целым. Свойства в свою очередь имеют имя и значение, что позволяет изменять их, извлекать, удалять или создавать новые.

Для создания объекта используют два варианта синтаксиса

 let student = new Object(); // конструктор объекта let student = <>; // литерал объекта или литеральная нотация 

Чаще применяется второй вариант с фигурными скобками

Литеральный синтаксис

Литерал объекта — это список свойств заключенный в фигурные скобки и разделенный запятыми

 let student = < name: "Семён", age: 21, "student level": "junior", course: "JavaScript разработчик", >; 

let student — переменная куда записывается ссылка на объект.

name: «Семён» — необязательный параметр свойство в формате ключ: значение , где первое это имя или другими словами id свойства, а второе его значение.

course: «JavaScript разработчик», — последняя запятая называется «висячей», она не обязательна, но такая запись упрощает замену свойств, добавление новых или удаление существующих.

«student level»: — если имя свойства состоит из двух слов, оно заключается в кавычки. Значение свойства также заключается в кавычки, но только если это строка.

Объекты в JavaScript — это ссылочный тип данных, поэтому присваивая объект переменной, мы записываем туда не сам объект, а только ссылку, которая указывает на то место в памяти, где он хранится.

Как обратиться к объекту или его свойству

Для того, чтобы получить весь объект необходимо просто обратиться к переменной.

 console.log(student); 

Обратиться к отдельному свойству можно двумя способами: через точку — объект.свойство

 alert (student.name); 

и с помощью квадратных скобок объект[«свойство»]

 alert (student["student level"]); 

Если в ключе есть пробелы, он начинается с цифры или содержит специальные символы, кроме кроме $ и _ обратиться к нему можно только последним способом.

Если обратиться к свойству, которого нет в объекте, программа вернет undefined и продолжит выполнять код. Такое поведение в JavaScript с одной стороны не мешает работе программы,с другой может привести к ошибкам, которые не просто отловить.

Также обратиться к свойству можно только через скобки, если его имя хранится в переменной.

 let studentLevel = "student level" let student = < name: "Семён", age: 21, "student level": "junior", course: "JavaScript разработчик", >; alert(student[studentLevel]); 

В этом случае при обращении имя переменной в квадратных скобках записывается без кавычек.

Возможна и такая запись

 let studentLevel = "student level" let student = < name: "Семён", age: 21, [studentLevel]: "junior", course: "JavaScript разработчик", >; alert(student["student level"]); 

В этом случае [studentLevel] называется вычисляемым свойством, а обратиться к нему можно через значение, которое мы записали в переменную studentLevel .

Имя свойства — это символ или строка и все другие типы данных будут приведены именно к строке. Таким образом даже если имя ключа 0, то это именно строка, а не число и обратиться к нему можно как object[0] , так и object[«0»] .

После того, как мы научились обращаться к свойствам, давайте разберем, что с ними можно делать еще.

Добавление свойства

 let student = < name: "Семён", >; student.age = 21; student["student level"] = "junior"; student.course = "JavaScript разработчик"; console.log(student); 

Чтобы добавить новое свойство: сначала пишем имя переменной, где лежит нужный нам объект, далее имя нового ключа, знак равно и нужное значение.

Удаление свойства

 let student = < name: "Семён", age: 21, "student level": "junior", course: "JavaScript разработчик", >; delete student["student level"]; delete student.age; console.log(student); 

Для удаления пары ключ: значение мы используем оператор delete и сразу же смотрим результат в console, где объект student выводиться уже без age и «student level» .

Изменение значения свойства

 const student = < name: "Семён", age: 21, "student level": "junior", course: "JavaScript разработчик", >; student.age = 29; student["student level"] = "middle"; console.log(student); 

Изменение свойств происходит привычным нам способом, обращаемся к нужному ключу и записываем через = новое значение.

При объявлении объекта через const, остается возможность править его: добавлять, удалять изменять свойства. JavaScript выдаст ошибку только в том случае, если попытаться присвоить самой переменной другое значение.

Допустимые имена свойств

В отличие от переменных имена свойств можно называть, как угодно, даже используя зарезервированные слова, такие как let , var , const и так далее. Единственное название, с которым возникнут проблемы это __proto__ , но скорее всего вряд ли вам захочется называть свойство именно так.

 let skills = < var: "1", // можно let: "JavaScript", // можно "__proto__": "3", // свойство доступно не будет > 

Вложенные объекты

Объекты в свою очередь могут содержать в качестве значения свойств другие объекты.

 let student = < name: "Семён", age: 21, skills: < html: true, css: true, react: false, >, >; console.log(student.skills.html); 

В таких случаях обращения к вложенным объектам происходит по цепочке.

Проверка существования свойства

Проверить свойство на существование в объекте можно двумя способами.

 let student = < name: "Семён", age: 21, "student level": "junior", course: "JavaScript разработчик", >; if (student["work experience"] === undefined || "work experience" in student === false) < alert ('Студент не имеет опыта работы!'); >; 

student[«work experience»] — в первом случае мы пользуемся тем, что если обратиться к свойству, которого нет в объекте, программа вернет undefined .

«work experience» in student — во втором случае мы пользуется специальной конструкцией «key» in object . Если свойство есть, получим true , в противном случае false .

Эти два способа взаимозаменяемы, кроме того случая, когда значение ключа равно undefined .

Цикл for…in для перебора свойств объекта

 for (let key in object)

let key — объявляем переменную, которая будет содержать имена свойств. Название переменной не обязательно должно быть именно key .

object — имя объекта с которым работаем.

console.log(key) — выводим в console имя свойства.

console.log(object[key]) — выводим в console значение свойства.

<. >— код заключенный в фигурные скобки называется телом цикла и выполняется для каждого свойства объекта.

С помощью for…in можно перебрать свойства и объекта в объекте.

 let student = < name: "Семён", age: 21, skills: < html: true, css: true, react: false, >, >; for (property in student.skills)

В круглых скобках мы явно общаемся к нужному объекту student.skills , также делаем и при получении значении ключа student.skills[property] .

Порядок получения свойств

Если свойства «целочисленные», тогда ключи сортируются по возрастанию.

 let skills = < "30": "React", "1": "HTML", "3": "CSS", "10": "JavaScript", >; for (key in skills)

В этом случае в console можно будет увидеть следующую записать

 1: HTML 3: CSS 10: JavaScript 30: React 

«Целочисленное свойство» – это свойство (строка), которое может быть преобразовано в число и обратно.

«1», «4», «10», «38», «85» — целочисленные.

«+1», «-4», «10.3» — не является целочисленным.

Во всех остальных случаях, когда свойства не целочисленные, ключи будут выводиться в порядке записи в объекте.

Копирование объекта

 let skills = < "4": "React", "1": "HTML", "2": "CSS", "3": "JavaScript", >; let skillList = skills; skillList["5"] = "NodeJS"; console.log(skills); console.log(skillList); 

Помещая объект в другую переменную, мы не создаем новый объект с такими же параметрами, а записываем в переменную ссылку на уже существующий.

В примере мы записали ссылку на объект в переменную skillList , добавили туда свойство с именем «5» и значением «NodeJS» . Далее вывели в console skills и skillList и видим 5: «NodeJS» , как в первом, так и втором варианте.

Дублирование объекта — Object.assign

Продублировать объект в другую переменную, можно двумя способами, с помощью метода Object.assign и цикла for…in .

 let skills = < "4": "React", "1": "HTML", "2": "CSS", "3": "JavaScript", "5": "NodeJS", >; let mySkills = Object.assign(<>, skills); delete mySkills["2"]; console.log(skills); console.log(mySkills); 

В примере мы продублировали объект skills в переменную mySkills .

 Object.assign(<>, skills); 

<> — фигурные скобки в данном случае говорят, о том, что мы создаем новый объект.

skills — объект который копируем.

Используя для дублирования цикл for…in мы напрямую переписываем все свойства из объекта в объект.

 let skills = < "1": "HTML", "2": "CSS", "3": "JavaScript", >; let mySkills = <>; for (let key in skills) < mySkills[key] = skills[key]; >delete mySkills["3"]; console.log(mySkills); console.log(skills); 

Итого

1. Объекты в JavaScript – это важная часть языка программирования, они часто используются и нужны для хранения коллекций и более сложных сущностей.

2. Информацию из объекта можно получать, её можно менять, удалять или добавлять.

3. Сама переменная куда мы как бы записываем объект, на самом деле содержит ссылку на место в памяти, где размещен этот объект.

4. Для перебора свойств объекта есть специальный цикл for…in .

5. В качестве свойств объекта, могут быть другие объекты и функции.

6. В JavaScript есть разные типы объектов:

• простые: рассмотрели в этой статье;
• массивы: хранение упорядоченных коллекций элементов;
• data: хранение информации о дате;
• error; хранение информации об ошибки;
• и другие.

Skypro — научим с нуля

Как обратиться к свойству объекта, вложенного в объект?

У вас не работает, потому что там ошибка. Вы не обернули слово denis в кавычки, поэтому это не строка. Происходит попытка присваивания свойству name значения несуществующей переменной denis , в итоге получаем Reference Error .

Если объявить переменную denis (или просто присвоить свойству строку, а не значение переменной), то всё заработает.

let denis = "denis"; let user = >; console.log(user.photo.small);

Отслеживать
ответ дан 6 июн 2020 в 10:57
360 1 1 золотой знак 2 2 серебряных знака 9 9 бронзовых знаков
Господи, как я этого не заметил то. Я час провозился, весь гугл перелистал. Спасибо.
6 июн 2020 в 11:18

@ДенисБеспалов Советую вам в первую очередь смотреть в консоль (Google Chrome / Opera: Ctrl + Shift + J ), если что-то идёт не так. И ещё, проект даёт возможность отметить понравившийся ответ решением.

Как обратиться к свойству объекта в typescript, если оно есть только в одном из нескольких возможных типов этого объекта?

Как в данном случае грамотно обойти эту ошибку без пересмотра типизации объекта? На ум приходит только console.log((test as any).b) , но это кажется плохим решением.

UPD: типизацию объекта изменить не могу. Объект на скрине создал только для примера. В реальной ситуации объект приходит из сторонней библиотеки и его типизация определяется в результате выполнения длинной последовательности разных функций. Таким образом приходится работать с тем что имеем.

• Вопрос задан более года назад
• 133 просмотра

3 комментария

Простой 3 комментария