资讯专栏INFORMATION COLUMN

【译】如何在 JavaScript 中使用对象的方法

longmon / 2262人阅读

摘要:中的所有对象都来自父的构造函数。不同于数组的原型方法例如和只能被数组实例使用,对象方法直接来自构造函数,并使用对象实例作为参数。这称为静态方法。创建对象的键值对的嵌套数组。可用于确定对象是否已冻结,并返回布尔值。

原文:How To Use Object Methods in JavaScript
作者:Tania Rascia
译者:博轩
介绍

JavaScript 中,对象是 键/值 对的集合。可以包含属性方法,并且可以包含所有其他 JavaScript 数据类型,例如字符串,数字和布尔值。

JavaScript中的所有对象都来自父 Object 的构造函数。Object 为我们提供了很多实用的内置方法,并且可以在单个对象中直接使用。不同于 数组的原型方法 例如 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()来实现最小化重复,对于保持代码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}`);
});
Output

boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar
for-in 循环和Object.keys()返回的可枚举属性有一个区别:
for-in 循环同时也会遍历原型属性
Object.keys() 只会返回自有(实例)属性

Object.keys() 对于检查对象的长度也很有用。

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

console.log(length);
Output

4

使用该 length 属性,我们能够计算employees包含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 => {
    const [key, value] = entry;

    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 syntax)来完成相同的任务。在下面的代码中,我们将通过展开语法合并namedetails对象,来声明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"}

展开语法(Spread syntax) 在对象语法中也成为浅层克隆(shallow-cloning)

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.isSealed() 可用于确定对象是否已封闭,并返回布尔值。

Object.getPrototypeOf()

Object.getPrototypeOf()用于获取[[Prototype]]对象的内部隐藏,也可通过 __proto__ 属性访问。

在这个例子中,我们可以创建一个可以访问Array原型的数组。

const employees = ["Ron", "April", "Andy", "Leslie"];

Object.getPrototypeOf(employees);
Output

[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]

我们可以在该原型输出中看到employees数组访问popfind以及其他数组原型方法。我们可以通过测试employees原型来证实这一点Array.prototype

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

true

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

还有一种相关Object.setPrototypeOf()方法将一个原型添加到另一个对象。建议您使用Object.create(), 因为它更快,性能更高。

结论

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

如果您需要查看JavaScript对象,可以阅读“了解 JavaScript中的对象” 。如果您想熟悉原型链,可以查看“ 了解JavaScript中的原型和继承”。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103735.html

相关文章

  • javascriptthis关键词理解

    摘要:在中,当使用关键字调用函数构造函数时,函数构造函数中也有这个概念,但是它不是惟一的规则,而且常常可以引用来自不同执行上下文的不同对象。因此,我们使用调用函数,可以看到这是对象,并且的属性是正常的。 一直以来,javascript里边的this都是一个很难理解的东西,之前看的最多的就是阮一峰老师关于this的理解: http://www.ruanyifeng.com/blo... htt...

    tainzhi 评论0 收藏0
  • 】【Javascript - 真正原型继承】

    摘要:操作符构造步骤有三步构造一个类的实例这个实例是一个空对象,并且他的属性指向构造函数的原型。不优化原生的或自定义的作为构造函数是及其不高效的。 原文地址:Javascript – How Prototypal Inheritance really works 在网上可以看到各种关于Javascript原型继承的文章,但Javascript规范中只提供了new操作符这一种实现原型继承的方法...

    zoomdong 评论0 收藏0
  • 失业《课多周刊》(第3期)

    摘要:正在失业中的课多周刊第期我们的微信公众号,更多精彩内容皆在微信公众号,欢迎关注。若有帮助,请把课多周刊推荐给你的朋友,你的支持是我们最大的动力。是一种祸害译本文浅谈了在中关于的不好之处。浅谈超时一运维的排查方式。 正在失业中的《课多周刊》(第3期) 我们的微信公众号:fed-talk,更多精彩内容皆在微信公众号,欢迎关注。 若有帮助,请把 课多周刊 推荐给你的朋友,你的支持是我们最大的...

    robin 评论0 收藏0
  • 失业《课多周刊》(第3期)

    摘要:正在失业中的课多周刊第期我们的微信公众号,更多精彩内容皆在微信公众号,欢迎关注。若有帮助,请把课多周刊推荐给你的朋友,你的支持是我们最大的动力。是一种祸害译本文浅谈了在中关于的不好之处。浅谈超时一运维的排查方式。 正在失业中的《课多周刊》(第3期) 我们的微信公众号:fed-talk,更多精彩内容皆在微信公众号,欢迎关注。 若有帮助,请把 课多周刊 推荐给你的朋友,你的支持是我们最大的...

    Joyven 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<