Использование объектных методов в 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».