Доступ к свойствам JavaScript

Это сообщение написано студентом-разработчиком Power Code Academy. Чтобы узнать больше об этой программе, следите за серией блогов Обучение собственных разработчиков начального уровня на Tech at Power.

Доступ к свойствам JavaScript

Свойства JavaScript - это значения, связанные с объектом JavaScript, который представляет собой набор неупорядоченных свойств. Мы даем объектам свойства, которые уникальны для них, чтобы мы могли хранить их, а затем извлекать их. По большому счету, это помогает нам сохранять наши объекты чистыми и согласованными, когда мы хотим получить определенные значения в будущем.

Теперь для целей этого блога предположим, что у нас есть ежемесячная коробочная подписка, которая предлагает видеоигру месяца с несколькими безделушками, соответствующими определенной теме. Мы были очень успешными, и теперь у нас есть огромная база данных, полная различных клиентов (каждый отдельный клиент будет в этом случае объектом), и каждый клиент имеет связанные с ними ценности, такие как его имя, фамилия, адрес, телефон. номер, адрес электронной почты, предыдущие заказы и т. д .:

const customer1 = {
    firstName: "Rick",
    lastName: "Sanchez",
    address: "C 137, Citadel of Ricks",
    phone: "555-123-rick",
    email: "[email protected]"
  }

Теперь Рик - один из наших постоянных клиентов, которым он пользуется уже довольно давно, поэтому мы хотим отправить ему небольшой благодарственный подарок. Наряду с этим подарком мы также хотим добавить рукописное письмо для этого дополнительного штриха. Поскольку он наш первый клиент, его идентификатор равен 1, и его легко найти, но теперь мы хотим получить доступ к его информации. Мы можем думать об объекте как об ассоциативном массиве. Ключи в этом массиве - это имена свойств объекта. У нас есть два способа доступа к атрибутам в объекте JavaScript:

Точечная запись
Обозначение скобок

Точечная запись

Атрибуты и функции объекта называются членами этого объекта, и доступ к ним осуществляется с помощью точечной нотации. Точечная запись используется чаще, чем скобка. Мы получаем доступ к свойствам, помещая точку после объекта, за которой сразу следует имя свойства, которое мы ищем (object.property). Например, если мы хотим найти имя нашего клиента, мы можем сделать что-то вроде этого:

customer1.firstName 
// => "Rick"
  
customer1.lastName 
// => "Sanchez"

Мы можем использовать JavaScript для добавления обоих имен и возврата полного имени нашего постоянного клиента:

const fullName = customer1.firstName + " " + customer1.lastName
  
Console.log(fullName)
// => Rick Sanchez

Точечная запись намного легче читается, чем скобка, и поэтому используется чаще.

Обозначение скобок

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

customer1['firstName']
  // => "Rick"
  
customer1['lastName']
// => "Sanchez"

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

1. Всякий раз, когда у нас есть нестандартные ключи: это означает, что строка, которую мы использовали в качестве ключа, имеет странную форму, которая варьируется от точек в ключе, дефисов, символов и пробелов (обычно мы хотим в camelCaseEverything). Например:

  customer1.'plumbuses returned: customer_wasnt_a_fan';
  // ERROR: Uncaught SyntaxError: Unexpected string
  
  customer1['plumbuses returned: customer_wasnt_a_fan'];
  // => "No way, everyone has a plumbus in their home"

2. Всякий раз, когда мы хотим получить динамический доступ к свойствам: с помощью скобок мы можем поместить любое выражение в скобки, и механизм JavaScript вычислит его значение, чтобы выяснить, к какому свойству получить доступ:

  customer1['first' + 'Name']
  // => "Rick"

Основное преимущество динамического доступа к свойствам - это возможность вычислять значения переменных или констант, которые мы можем присвоить. Возвращаясь к нашему исходному объекту, допустим, мы хотим назначить address как мультивселенную:

const customer1 = {
  address: "C 137, Citadel of Ricks",
 }
 customer1.address
 // =>"C 137, Citadel of Ricks"
 let multiverse = 'address';
 customer1[multiverse]
 // => "C 137, Citadel of Ricks"
 customer1['address']
 // => "C 137, Citadel of Ricks"
 customer1.multiverse
 // => undefined

Таким образом, скобочная нотация не такая явная, как точечная, но она позволяет нам передавать ключи, которые либо не находятся в обычном camelCase, либо включают числа или значения, хранящиеся в переменной.

Смотри, Морти ...

Вкратце:

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

Доступ к свойствам JavaScript