Как использовать методы объектов в JavaScript
Введение
Объекты в JavaScript представляют собой наборы пар ключ/значение. Значения могут состоять из свойств и методов и могут содержать все другие типы данных JavaScript, такие как строки, числа и логические значения.
Все объекты в JavaScript происходят от методов прототипа родительского массива, таких как sort() и reverse(), которые используются в экземпляре массива. Методы объекта используются непосредственно в Object и используйте экземпляр объекта в качестве параметра. Это известно как статический метод.
В этом руководстве будут рассмотрены важные встроенные методы объекта, причем каждый раздел ниже посвящен конкретному методу и предоставляет пример использования.
Предпосылки
Чтобы получить максимальную отдачу от этого руководства, вы должны быть знакомы с созданием, изменением и работой с объектами, с которыми вы можете ознакомиться в статье «Понимание объектов в JavaScript».
Дополнительные рекомендации по JavaScript в целом можно найти в нашей серии статей Как писать код на JavaScript.
Объект.создать()
Метод 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();
OutputThe barista position is hourly and is accepting applications.
Объект barista теперь имеет одно свойство — position — но все остальные свойства и методы из job доступны через прототип. Object.create() полезен для сохранения кода СУХИМ за счет минимизации дублирования.
Объект.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 преобразует ключи вашего объекта в массив ключей, метод массива forEach() можно использовать для перебора ключей и значений.
// Iterate through the keys
Object.keys(employees).forEach(key => {
let value = employees[key];
console.log(`${key}: ${value}`);
});
Outputboss: Michael
secretary: Pam
sales: Jim
accountant: Oscar
Object.keys также полезен для проверки длины преобразованного массива с помощью свойства length.
// Get the length of the keys
const length = Object.keys(employees).length;
console.log(length);
Output4
Используя свойство length, мы смогли подсчитать свойства 4 для employees.
Объект.значения()
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() создает вложенный массив пар ключ/значение объекта.
// 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}`);
});
Outputname: Ubuntu
version: 18.04
license: Open Source
Метод Object.entries() будет возвращать только собственные свойства экземпляра объекта, а не какие-либо свойства, которые могут быть унаследованы через его прототип.
Объект.назначить()
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"}
Также можно использовать оператор расширения (...) для выполнения той же задачи. В приведенном ниже коде мы изменим способ объявления 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"}
Этот синтаксис распространения в литералах объектов также известен как поверхностное клонирование.
Объект.заморозить()
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.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 было успешно изменено.
Объект.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;
Outputtrue
Этот метод может быть полезен для получения дополнительной информации об объекте или обеспечения доступа к прототипу другого объекта.
Существует также родственный метод Object.setPrototypeOf(), который добавит один прототип к другому объекту.
Заключение
У объектов есть много полезных методов, которые помогают нам модифицировать, защищать и перебирать их. В этом руководстве мы рассмотрели, как создавать и назначать новые объекты, перебирать ключи и/или значения объекта, а также замораживать или запечатывать объект.
Если вам нужно просмотреть объекты JavaScript, вы можете прочитать «Понимание прототипов и наследования в JavaScript».