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

Объект JavaScript — это просто набор именованных значений. Эти именованные значения обычно называют свойствами объекта. Как вы помните из раздела Массивы JavaScript, массив — это набор значений, где каждое значение имеет индекс (числовой ключ), который начинается с нуля и увеличивается на единицу для каждого значения. Объект похож на массив, но разница в том, что вы сами определяете ключи; например, это может быть имя, возраст, пол и т. д.

Создание объектов

Объект может быть создан с помощью фигурных скобок {} с необязательным списком свойств. Свойство — это пара «ключ: значение», где ключ (или имя свойства) всегда является строкой, а значение (или значение свойства) может быть любого типа данных, например, строкой, числом, логическим значением или сложным типом данных — массивом, функцией и другим объектом. Кроме того, свойства с функциями в качестве их значений часто называют методами, отличающими их от других свойств. Типичный объект JavaScript может выглядеть так:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

В приведенном выше примере создается объект с именем person, который имеет три свойства name, age, и gender и один метод displayName(). Метод displayName() отображает значение this.name, которое преобразуется в person.name. Это самый простой и предпочтительный способ создания нового объекта в JavaScript, который называется object literals.

Имена свойств обычно не нужно заключать в кавычки, если они не являются зарезервированными словами, или если они содержат пробелы или специальные символы (любые, кроме букв, цифр и символов _ и $), или если они начинаются с цифры, как показано в следующем примере:

var person = {
    "first name": "Peter",
    "current age": 28,
    gender: "Male"
};

Начиная с ECMAScript 5, зарезервированные слова могут использоваться в качестве имен свойств объекта без кавычек. Тем не менее, вы должны избегать этого для лучшей совместимости.

Доступ к свойствам объекта

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

var book = {
    "name": "Harry Potter and the Goblet of Fire",
    "author": "J. K. Rowling",
    "year": 2000
};

// Dot notation
document.write(book.author);  // Выводит: J. K. Rowling

// Bracket notation
document.write(book["year"]); // Выводит: 2000

Запись с точкой проще для чтения и записи, но ее не всегда можно использовать. Если имя свойства недопустимо (т. е. содержит пробелы или специальные символы), вы не можете использовать запись с точкой; вам придется использовать обозначение со скобками, как показано в следующем примере:

var book = {
    name: "Harry Potter and the Goblet of Fire",
    author: "J. K. Rowling",
    "publication date": "8 July 2000"
};

// Bracket notation
document.write(book["publication date"]); // Выводит: 8 July 2000

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

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var key = prompt("Enter any property name to get its value");
alert(person[key]); // Выводит: Peter (if enter "name")

Цикл по свойствам объекта

Вы можете перебирать пары ключ-значение объекта, используя цикл for...in. Этот цикл специально оптимизирован для перебора свойств объекта. Вот пример:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// Iterating over object properties
for(var i in person) {  
    document.write(person[i] + "<br>"); // Выводит: name, age and gender
}

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

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

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// Setting a new property
person.country = "United States";
document.write(person.country); // Выводит: United States

person["email"] = "peterparker@mail.com";
document.write(person.email); // Выводит: peterparker@mail.com

// Updating existing property
person.age = 30;
document.write(person.age); // Выводит: 30

person["name"] = "Peter Parker";
document.write(person.name); // Выводит: Peter Parker

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

Оператор delete может использоваться для полного удаления свойств из объекта. Удаление — это единственный способ фактически удалить свойство из объекта. Установка для свойства undefined или null только изменяет значение свойства. Они не удаляют свойство из объекта.

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

// Удаление свойства
delete person.age;
alert(person.age); // Выводит: undefined

Оператор delete удаляет только свойство объекта или элемент массива. он не влияет на переменные или объявленные функции. Однако вам следует избегать оператора delete для удаления элемента массива, так как он не меняет длину массива, а просто оставляет «дыру» в массиве.

Вызов методов объекта

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

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

person.displayName(); // Выводит: Peter
person["displayName"](); // Выводит: Peter

Копирование массивов

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

var message = "Hello World!";

var greet = message; // Присвойте переменную message новой переменной
greet = "Hi, there!";

document.write(message);  // Печатает: Hello World!
document.write(greet);  // Печатает: Hi, there!

В приведенном выше примере мы сделали копию переменной message и изменили значение этой копии (т. е. переменная greet). Две переменные остаются разными и раздельными. Но если мы сделаем то же самое с объектом, мы получим другой результат, как в следующем примере:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var user = person; // Присваиваем переменную person новой переменной
user.name = "Harry";

document.write(person.name);  // Печатает: Harry
document.write(user.name);  // Печатает: Harry

Как вы можете увидеть из примера, любые изменения, внесенные в переменную user, также изменяют переменную person; это происходит потому, что обе переменные ссылаются на один и тот же объект. Таким образом, простое копирование объекта на самом деле не клонирует его, а копирует ссылку на этот объект.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

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

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.