// Tutorial //

Использование объектных методов в JavaScript

Published on January 7, 2020
Default avatar
By Tania Rascia
Developer and author at DigitalOcean.
Использование объектных методов в JavaScript

Введение

Объекты в 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».


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment