如何在JavaScript中使用对象方法

介绍

JavaScript 中的 Objects 是 key/value 对的集合。这些值可以由 properties 和 methods 组成，并且可以包含所有其他 JavaScript 数据类型，例如字符串、数字和布尔值。

JavaScript 中的所有对象都来自父 Object 构造函数。 Object 有许多有用的内置方法，我们可以使用和访问以使处理单个对象变得简单。与在数组实例上使用的 sort() 和 reverse() 等 Array 原型方法不同，Object 方法直接在 Object 构造函数上使用，并使用对象实例作为参数。这称为静态方法。

本教程将介绍重要的内置对象方法，下面的每一节都处理一个特定的方法并提供一个使用示例。

先决条件

为了充分利用本教程，您应该熟悉创建、修改和使用对象，您可以在“Understanding Objects in JavaScript”一文中查看这些内容。

有关一般 JavaScript 的其他指导，您可以查看我们的 如何在 JavaScript 中编码系列。

对象.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 很有用。

对象.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 属性，我们能够计算 employees 的 4 属性。

对象.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() 创建对象的键/值对的嵌套数组。

// 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() 方法将只返回对象实例自己的属性，而不是任何可能通过其原型继承的属性。

对象.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"}

也可以使用扩展运算符 (...) 来完成相同的任务。在下面的代码中，我们将通过合并 name 和 details 对象来修改声明 character 的方式。

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

对象字面量中的这种扩展语法也称为浅克隆。

对象.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() 可用于确定对象是否已被冻结，并返回布尔值。

对象.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 原型方法。我们可以通过针对 Array.prototype 测试 employees 原型来确认这一点。

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

Outputtrue

此方法可用于获取有关对象的更多信息或确保它可以访问另一个对象的原型。

还有一个相关的 Object.setPrototypeOf() 方法将一个原型添加到另一个对象。

结论

对象有许多有用的方法可以帮助我们修改、保护和迭代它们。在本教程中，我们回顾了如何创建和分配新对象、遍历对象的键和/或值以及冻结或密封对象。

如果您需要查看 JavaScript 对象，可以阅读“Understanding Objects in JavaScript”。如果您想熟悉原型链，可以查看“Understanding Prototypes and Inheritance in JavaScript”。