Table of Contents
URL: https://www.progressiverobot.com/how-to-use-object-methods-in-javascript-ru/
Введение
Объекты в 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();
[secondary_label 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);
[secondary_label Output]
["boss", "secretary", "sales", "accountant"]
Метод Object.keys можно использовать для итерации ключей и значений объекта.
// Iterate through the keys
Object.keys(employees).forEach(key => {
let value = employees[key];
console.log(`${key}: ${value}`);
});
[secondary_label 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);
[secondary_label 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);
[secondary_label 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);
[secondary_label 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}`);
});
[secondary_label 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);
[secondary_label 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);
[secondary_label 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);
[secondary_label 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);
[secondary_label Output]
{username: "AzureDiamond", password: "*******"}
Новое свойство active не было добавлено к запечатанному объекту, но свойство password было успешно изменено.
Object.getPrototypeOf()
Метод Object.getPrototypeOf() используется для получения внутреннего скрытого свойства [[Prototype]] объекта, которое также доступно через свойство __proto__.
В этом примере мы создадим массив, имеющий доступ к прототипу Array.
const employees = ['Ron', 'April', 'Andy', 'Leslie'];
Object.getPrototypeOf(employees);
[secondary_label Output]
[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]
В результатах мы видим, что прототип массива employees имеет доступ к методам pop, find и другим методам прототипа Array. Для проверки мы протестируем прототип employees с прототипом Array.prototype.
Object.getPrototypeOf(employees) === Array.prototype;
[secondary_label Output]
true
Этот метод может быть полезен для получения дополнительной информации об объекте или обеспечения доступа к прототипу другого объекта.
Связанный метод Object.setPrototypeOf() добавляет прототип к другому объекту. Вместо него рекомендуется использовать более быстрый и производительный метод Object.create().
Заключение
Объекты имеют много полезных методов, которые можно использовать для их изменения, защиты и итерации. В этом обучающем модуле мы научились создавать и назначать новые объекты, итеративно просматривать ключи и/или значения объекта, а также замораживать и запечатывать объекты.
Если вам нужно узнать больше об объектах JavaScript, прочитайте статью «Понимание концепции объектов в JavaScript». Если вы хотите узнать больше о цепочке прототипов, прочитайте статью «Понимание концепций прототипов и наследования в JavaScript».
