Объект в JavaScript: обзор

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

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

Мы можем представить объект как шкаф с подписанными файлами. Каждая часть данных хранится в своем файле по ключу. Легко найти файл по его имени или добавить/удалить файл.

Пустой объект («пустой шкаф») можно создать с помощью одного из двух синтаксисов:

let user = new Object(); // "object constructor" syntax
let user = {};  // "object literal" syntax

Обычно используются фигурные скобки {...}. Это объявление называется литералом объекта.

Литералы и свойства:

Мы можем сразу поместить некоторые свойства в {...} в виде пар «ключ: значение»:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

У свойства есть ключ (также известный как «имя» или «идентификатор») перед двоеточием ":" и значение справа от него.

В объекте user есть два свойства:

Первое свойство имеет имя "name" и значение "John".
Второй имеет имя "age" и значение 30.

Получившийся объект user можно представить в виде шкафа с двумя подписанными файлами с пометками «имя» и «возраст».

Мы можем добавлять, удалять и читать файлы из него в любое время.

Значения свойств доступны с использованием записи через точку:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

Значение может быть любого типа. Добавим логическое значение:

user.isAdmin = true;

Чтобы удалить свойство, мы можем использовать оператор delete:

delete user.age;

Мы также можем использовать имена свойств, состоящие из нескольких слов, но тогда они должны быть заключены в кавычки:

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

Последнее свойство в списке может заканчиваться запятой:

let user = {
  name: "John",
  age: 30,
}

Это называется «конечная» или «висячая» запятая. Упрощает добавление/удаление/перемещение свойств, потому что все линии становятся одинаковыми.

"Квадратные скобки":

Для многословных свойств доступ через точку не работает:

// this would give a syntax error
user.likes birds = true

JavaScript этого не понимает. Он думает, что мы обращаемся к user.likes, а затем выдает синтаксическую ошибку, когда натыкается на неожиданное birds.

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

Существует альтернативная «нотация квадратных скобок», которая работает с любой строкой:

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

Сейчас все в порядке. Обратите внимание, что строка в квадратных скобках правильно заключена в кавычки (подойдет любой тип кавычек).

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

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

Здесь переменная key может вычисляться во время выполнения или зависеть от пользовательского ввода. И затем мы используем его для доступа к свойству. Это дает нам большую гибкость.

Например:

let user = {
  name: "John",
  age: 30
};

let key = prompt("What do you want to know about the user?", "name");

// access by variable
alert( user[key] ); // John (if enter "name")

Точечная нотация не может использоваться аналогичным образом:

let user = {
  name: "John",
  age: 30
};

let key = "name";
alert( user.key ) // undefined

Расчетные свойства:

Мы можем использовать квадратные скобки в литерале объекта при создании объекта. Это называется вычисляемые свойства.

Например:

let fruit = prompt("Which fruit to buy?", "apple");

let bag = {
  [fruit]: 5, // the name of the property is taken from the variable fruit
};

alert( bag.apple ); // 5 if fruit="apple"

Смысл вычисляемого свойства прост: [fruit] означает, что имя свойства должно быть взято из fruit.

Итак, если посетитель введет "apple", bag станет {apple: 5}.

По сути, это работает так же, как:

let fruit = prompt("Which fruit to buy?", "apple");
let bag = {};

// take property name from the fruit variable
bag[fruit] = 5;

…Но выглядит лучше.

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

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

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

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

Сокращение значения свойства:

В реальном коде мы часто используем существующие переменные в качестве значений имен свойств.

Например:

function makeUser(name, age) {
  return {
    name: name,
    age: age,
    // ...other properties
  };
}

let user = makeUser("John", 30);
alert(user.name); // John

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

Вместо name:name можно просто написать name, вот так:

function makeUser(name, age) {
  return {
    name, // same as name: name
    age,  // same as age: age
    // ...
  };
}

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

let user = {
  name,  // same as name:name
  age: 30
};

Ограничения имен свойств

Как мы уже знаем, переменная не может иметь имя, равное одному из зарезервированных для языка слов, таких как «for», «let», «return» и т. д.

Но для свойства объекта такого ограничения нет:

// these properties are all right
let obj = {
  for: 1,
  let: 2,
  return: 3
};

alert( obj.for + obj.let + obj.return );  // 6

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

Другие типы автоматически преобразуются в строки.

Например, число 0 становится строкой "0" при использовании в качестве ключа свойства:

let obj = {
  0: "test" // same as "0": "test"
};

// both alerts access the same property (the number 0 is converted to string "0")
alert( obj["0"] ); // test
alert( obj[0] ); // test (same property)

Вывод:

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

Свяжитесь со мной в социальной сети

✅ Github: https://github.com/surksharathi
✅ LinkedIn: https://www.linkedin.com/in/suraksha-singh-88350472/
✅ Twitter: https ://twitter.com/SurakshaSogaria

Объект в JavaScript: обзор

Литералы и свойства:

"Квадратные скобки":

Расчетные свойства:

Сокращение значения свойства:

Ограничения имен свойств

Свяжитесь со мной в социальной сети

Вопросы по теме