Введение
Объекты в JavaScript представляют собой наборы пар ключ/значение. Значения могут состоять из свойств и методов и содержать все другие типы данных JavaScript, в том числе строки, числа и логические операторы.
Все объекты JavaScript происходят из родительского конструктора Object
. Объект
имеет множество полезных встроенных методов, позволяющих получать доступ к отдельным объектам и работать с ними напрямую. В отличие от используемых для экземпляров массивов методов прототипа Array, таких как sort()
и reverse()
, методы объекта используются напрямую в конструкторе Object
, и используют в качестве параметра экземпляр объекта. Такие методы называются статическими.
В этом обучающем модуле мы изучим все важные методы встроенных объектов, при этом каждый из разделов ниже относится к конкретному методу и включает пример использования.
Предварительные требования
Для эффективного усвоения этого обучающего модуля вы должны быть знакомы с принципами создания и изменения объектов и работы с объектами. Подробнее об этих принципах можно узнать из статьи «Понимание объектов в JavaScript».
Дополнительные указания по работе с JavaScript можно найти в серии статей «Программирование на JavaScript».
Object.create()
Метод Object.create()
используется для создания новых объектов и их привязки к прототипу существующего объекта.
Мы можем создать экземпляр объекта job
и расширить его до конкретного объекта.
// Initialize an object with properties and methods
const job = {
position: 'cashier',
type: 'hourly',
isAvailable: true,
showDetails() {
const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";
console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);
}
};
// Use Object.create to pass properties
const barista = Object.create(job);
barista.position = "barista";
barista.showDetails();
Output
The barista position is hourly and is accepting applications.
Сейчас объект barista
имеет только одно свойство position
, но все остальные свойства и метода объекта job
доступны через прототип. Метод Object.create()
полезен для сокращения кода за счет минимального дублирования.
Object.keys()
Метод Object.keys()
создает массив, содержащий ключи объекта.
Мы можем создать объект и распечатать массив ключей.
// Initialize an object
const employees = {
boss: 'Michael',
secretary: 'Pam',
sales: 'Jim',
accountant: 'Oscar'
};
// Get the keys of the object
const keys = Object.keys(employees);
console.log(keys);
Output
["boss", "secretary", "sales", "accountant"]
Метод Object.keys
можно использовать для итерации ключей и значений объекта.
// Iterate through the keys
Object.keys(employees).forEach(key => {
let value = employees[key];
console.log(`${key}: ${value}`);
});
Output
boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar
Также метод Object.keys
полезен для проверки длины объекта.
// Get the length of the keys
const length = Object.keys(employees).length;
console.log(length);
Output
4
С помощью свойства length
мы можем подсчитать 4
свойства сотрудников
.
Object.values()
Метод Object.values()
создает массив, содержащий значения объекта.
// Initialize an object
const session = {
id: 1,
time: `26-July-2018`,
device: 'mobile',
browser: 'Chrome'
};
// Get all values of the object
const values = Object.values(session);
console.log(values);
Output
[1, "26-July-2018", "mobile", "Chrome"]
Object.keys()
и Object.values()
позволяют получить данные объекта.
Object.entries()
Метод Object.entries()
создает вложенный массив пар ключ-значение для объекта.
// Initialize an object
const operatingSystem = {
name: 'Ubuntu',
version: 18.04,
license: 'Open Source'
};
// Get the object key/value pairs
const entries = Object.entries(operatingSystem);
console.log(entries);
Output
[
["name", "Ubuntu"]
["version", 18.04]
["license", "Open Source"]
]
После создания массивов с парами ключ-значение мы можем использовать метод forEach()
для обработки результатов и работы с ними.
// Loop through the results
entries.forEach(entry => {
let key = entry[0];
let value = entry[1];
console.log(`${key}: ${value}`);
});
Output
name: Ubuntu
version: 18.04
license: Open Source
Метод Object.entries()
возвращает только собственные свойства экземпляра объекта, а не свойства, унаследованные от прототипа.
Object.assign()
Метод Object.assign()
используется для копирования значений одного объекта в другой объект.
С помощью метода Object.assign()
мы можем создать два объекта и объединить их.
// Initialize an object
const name = {
firstName: 'Philip',
lastName: 'Fry'
};
// Initialize another object
const details = {
job: 'Delivery Boy',
employer: 'Planet Express'
};
// Merge the objects
const character = Object.assign(name, details);
console.log(character);
Output
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}
Также для этой задачи можно использовать оператор spread (...
). В приведенном ниже примере кода мы изменим способ декларации объекта character
, объединив объекты name
и details
.
// Initialize an object
const name = {
firstName: 'Philip',
lastName: 'Fry'
};
// Initialize another object
const details = {
job: 'Delivery Boy',
employer: 'Planet Express'
};
// Merge the object with the spread operator
const character = {...name, ...details}
console.log(character);
Output
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}
Такой синтаксис оператора spread в буквальных константах объекта также называется неглубоким клонированием.
Object.freeze()
Метод Object.freeze()
предотвращает изменение свойств и значений объекта, а также добавление или удаление свойств объекта.
// Initialize an object
const user = {
username: 'AzureDiamond',
password: 'hunter2'
};
// Freeze the object
const newUser = Object.freeze(user);
newUser.password = '*******';
newUser.active = true;
console.log(newUser);
Output
{username: "AzureDiamond", password: "hunter2"}
В приведенном выше примере мы попытались заменить пароль hunter2
на *******
, однако свойство password
не изменилось. Также мы попытались добавить новое свойство active
, но оно не было добавлено.
Свойство Object.isFrozen()
позволяет определить, заморожен ли объект, и возвращает логическое значение.
Object.seal()
Метод Object.seal()
предотвращает добавление новых свойств к объекту, но допускает изменение существующих свойств. Этот метод похож на метод Object.freeze()
. Чтобы избежать ошибок, обновите консоль перед добавлением приведенного ниже кода.
// Initialize an object
const user = {
username: 'AzureDiamond',
password: 'hunter2'
};
// Seal the object
const newUser = Object.seal(user);
newUser.password = '*******';
newUser.active = true;
console.log(newUser);
Output
{username: "AzureDiamond", password: "*******"}
Новое свойство active
не было добавлено к запечатанному объекту, но свойство password
было успешно изменено.
Object.getPrototypeOf()
Метод Object.getPrototypeOf()
используется для получения внутреннего скрытого свойства [[Prototype]]
объекта, которое также доступно через свойство __proto__
.
В этом примере мы создадим массив, имеющий доступ к прототипу Array
.
const employees = ['Ron', 'April', 'Andy', 'Leslie'];
Object.getPrototypeOf(employees);
Output
[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]
В результатах мы видим, что прототип массива employees
имеет доступ к методам pop
, find
и другим методам прототипа Array. Для проверки мы протестируем прототип employees
с прототипом Array.prototype
.
Object.getPrototypeOf(employees) === Array.prototype;
Output
true
Этот метод может быть полезен для получения дополнительной информации об объекте или обеспечения доступа к прототипу другого объекта.
Связанный метод Object.setPrototypeOf()
добавляет прототип к другому объекту. Вместо него рекомендуется использовать более быстрый и производительный метод Object.create()
.
Заключение
Объекты имеют много полезных методов, которые можно использовать для их изменения, защиты и итерации. В этом обучающем модуле мы научились создавать и назначать новые объекты, итеративно просматривать ключи и/или значения объекта, а также замораживать и запечатывать объекты.
Если вам нужно узнать больше об объектах JavaScript, прочитайте статью «Понимание концепции объектов в JavaScript». Если вы хотите узнать больше о цепочке прототипов, прочитайте статью «Понимание концепций прототипов и наследования в JavaScript».