Объекты являются основополагающим понятием любого языка программирования, понятие, которого новички боятся как огня. Давайте поймем, что такое объект, и как с ним работать в JS.
В литературе, синонимом объектов в JS выступают хэши, ассоциативные массивы. Не пугайтесь если встретите такие названия!
Для понимания понятия объект представьте себе комод, ящики которого подписаны.
Для того, чтобы обратиться к ящику, необходимо использовать следующий синтаксис: комод.носки именно такое обращение даст доступ к нужному ящику. Также можно использовать комод.платки и комод.белье. Название ящиков — это ключи объекта, а их содержимое — значение. Говорят, что объект содержит информацию в виде: ключ-значение. Также, часто встречается терминология: свойство-значение.
Объекты удобны для представления предметов реальной жизни. Например автомобиль. Для описания его подойдет объект ключи которого будут: год выпуска, цвет, цена, вес, вместимость и так далее.
Создание объекта
Первый способ создания объекта, это просто объявить пустой объект, а затем добавить в него ключи и значения. Следующие две строки делают одно и то же — создают объект.
|
1 2 |
var m={}; var n=new Object(); |
Обратите внимание, что для создания объекта используются фигурные скобочки.
Второй способ создания объекта — через перечисление необходимых свойств стразу при объявлении объекта:
|
1 2 3 4 5 |
var n={ name: 'Alex', age: 38, sex:male } |
При таком создании объекта, ключи и значения разделяются запятой. После последней пары запятая не ставится. Между ключом и значением стоит двоеточие.
Добавляем в объект ключи и значения
После создания объекта мы можем добавлять в них информацию. Добавлять информацию можно двумя способами. Первый — просто присваиваем ключу объекта значение:
|
1 |
m.name='Alex'; |
При выполнении команды JS проверит наличие данного ключа в объекте и если такого нет — создаст его и присвоит ему строку Alex, если такое свойство есть, то перезапишет его значение.
Второй способ предполагает использование квадратных скобок [ ]. Этот способ более универсален, чем обращение через точку, но и более громоздкий. Он применяется если ключ хранится в переменной. Например:
|
1 2 3 |
var m={}; var b='age'; m[b]=35; |
В предыдущем примере можно было бы записать следующее выражение:
|
1 |
m['age']=35; |
Когда применяют квадратные скобки:
- 1. Когда имя ключа хранится в переменной. Запись вида объект.имя_переменной — не сработает, поскольку JS будет искать ключ совпадающий с именем переменной а не ее значением.
- 2. Когда ключ — состоит из нескольких слов. Например, если взять пример с комодом: ‘Носки и белье’. Прописать такой ключ через точку нельзя, поскольку он содержит пробелы. А двойные скобки — решат эту задачу.
Доступ к свойствам объека, вывод свойств
Обратиться к конкретному свойству объекта можно с помощью точки и квадратных скобок. Следующие записи делают одно и то же:
|
1 2 3 4 5 6 7 |
function f1() { var m={}; m.age=45; m.name="Alex"; alert(m.age); alert(m['name']); } |
Видно, что обращаться к свойствам можно несколькими способами. Обратите внимание, что изменение регистра ключа приведет к ошибке!
Отдельно стоит задача вывода всех ключей объекта. Для этого в JS существует специальный синтаксис, который перебирает все ключ и позволяет получить доступ к свойствам:
|
1 2 3 4 5 6 7 8 |
function f1() { var m={}; m.age=45; m.name="Alex"; for (var key in m) { alert ('Ключ '+key+' содержит '+m[key]); } } |
See the Pen object, js, for in by Alex (@Asmodey) on CodePen.
Синтаксис for .. in это не цикл, в классическом понимании, а специальный метод позволяющий работать с объектом. key — просто имя переменной, которое может быть любым.
Удаление ключа и свойства
Для удаления ключа и свойства в объекте применяется команда delete. Синтаксис команды показан ниже:
|
1 |
delete m.age; |
Данная команда возвращает true если свойство удалено, и false если свойство не может быть удалено.
Интересная статья о том, как создать сервис по генерации CSS кода
