TOC

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

Вступление

Objects в JavaScript - это коллекции парkey /value. Значения могут состоять изproperties иmethods и могут содержать все другие типы данных JavaScript, такие как строки, числа и логические значения.

Все объекты в JavaScript происходят от родительского конструктораObject. Object имеет множество полезных встроенных методов, которые мы можем использовать и к которым мы можем получить доступ, чтобы упростить работу с отдельными объектами. В отличие отArray prototype methods, такого какsort() иreverse(), которые используются в экземпляре массива, методы Object используются непосредственно в конструктореObject и используют экземпляр объекта в качестве параметра. Это известно как статический метод.

В этом руководстве будут рассмотрены важные встроенные объектные методы. В каждом разделе ниже рассматривается конкретный метод и приводится пример использования.

Предпосылки

Чтобы получить максимальную отдачу от этого учебного пособия, вы должны быть знакомы с созданием, изменением и работой с объектами, с которыми вы можете ознакомиться в «https://www.digitalocean.com/community/tutorials/understanding-objects-». in-javascript [Понимание объектов в JavaScript] ».

Чтобы получить дополнительные рекомендации по JavaScript в целом, вы можете просмотреть нашу серию статей оHow To Code in 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() полезен для хранения кодаDRY за счет минимизации дублирования.

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 дляemployees.

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"}

Также можно использовать оператор распространения (...) для выполнения той же задачи. В приведенном ниже коде мы изменим способ объявления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 syntax в объектных литералах также известен как поверхностное клонирование.

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 и другим методам прототипа массива. Мы можем подтвердить это, протестировав прототипemployees противArray.prototype. 

Object.getPrototypeOf(employees) === Array.prototype;
Outputtrue

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

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

Заключение

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

Если вам нужно просмотреть объекты JavaScript, вы можете прочитать «https://www.digitalocean.com/community/tutorials/understanding-objects-in-javascript[Understanding Objects in JavaScript]». Если вы хотите ознакомиться с прототипом цепочку, вы можете взглянуть на «https://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript[Understanding прототипов и наследования в JavaScript]».

Related