Использование объектных методов в 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(); 
OutputThe 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}`); }); 
Outputboss: Michael secretary: Pam sales: Jim accountant: Oscar 

Также метод Object.keys полезен для проверки длины объекта.

// Get the length of the keys const length = Object.keys(employees).length;  console.log(length); 
Output4 

С помощью свойства 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}`); }); 
Outputname: 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; 
Outputtrue 

Этот метод может быть полезен для получения дополнительной информации об объекте или обеспечения доступа к прототипу другого объекта.

Связанный метод Object.setPrototypeOf() добавляет прототип к другому объекту. Вместо него рекомендуется использовать более быстрый и производительный метод Object.create().

Заключение

Объекты имеют много полезных методов, которые можно использовать для их изменения, защиты и итерации. В этом обучающем модуле мы научились создавать и назначать новые объекты, итеративно просматривать ключи и/или значения объекта, а также замораживать и запечатывать объекты.

Если вам нужно узнать больше об объектах JavaScript, прочитайте статью «Понимание концепции объектов в JavaScript». Если вы хотите узнать больше о цепочке прототипов, прочитайте статью «Понимание концепций прототипов и наследования в JavaScript».