如何在 JavaScript 中使用对象方法

介绍

Objects在JavaScript中是 key/value对的集合,这些值可以由属性和方法组成,并且可能包含所有其他JavaScript数据类型,如字符串、数字和布尔文。

JavaScript 中的所有对象都来自母体 Object 构建器。 Object 有许多有用的内置方法,我们可以使用和访问以使与单个对象的工作简单。与使用在数组实例中使用的 Array 原型方法不同,Object 方法直接应用于 'Object' 构建器,并使用对象实例作为参数。

本教程将讨论重要的内置对象方法,下面的每个部分都涉及特定的方法,并提供一个使用示例。

前提条件

为了充分利用本教程,您应该熟悉创建、修改和使用对象,您可以在理解JavaScript中的对象(LINK0)`文章中查看。

对于一般的JavaScript的进一步指导,您可以查看我们的 _How To Code in JavaScript_系列。

创建( )

使用 Object.create()方法创建新对象,并将其链接到现有对象的原型。

我们可以创建一个工作对象实例,并将其扩展到一个更具体的对象。

 1// Initialize an object with properties and methods
 2const job = {
 3    position: 'cashier',
 4    type: 'hourly',
 5    isAvailable: true,
 6    showDetails() {
 7        const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";
 8
 9        console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);
10    }
11};
12
13// Use Object.create to pass properties
14const barista = Object.create(job);
15
16barista.position = "barista";
17barista.showDetails();

1[secondary_label Output]
2The barista position is hourly and is accepting applications.

barista对象现在有一个属性 - 位置 - 但所有其他属性和方法从工作是通过原型可用的。

关键字( )

Object.keys()创建包含对象的密钥的数组。

我们可以创建一个对象并打印数组的密钥。

 1// Initialize an object
 2const employees = {
 3    boss: 'Michael',
 4    secretary: 'Pam',
 5    sales: 'Jim',
 6    accountant: 'Oscar'
 7};
 8
 9// Get the keys of the object
10const keys = Object.keys(employees);
11
12console.log(keys);

1[secondary_label Output]
2["boss", "secretary", "sales", "accountant"]

由于Object.keys将对象的密钥转换为一组密钥,所以forEach()数组方法可以用来迭代密钥和值。

1// Iterate through the keys
2Object.keys(employees).forEach(key => {
3    let value = employees[key];
4
5     console.log(`${key}: ${value}`);
6});

1[secondary_label Output]
2boss: Michael
3secretary: Pam
4sales: Jim
5accountant: Oscar

Object.keys 也可以用来检查使用长度属性的转换数组的长度。

1// Get the length of the keys
2const length = Object.keys(employees).length;
3
4console.log(length);

1[secondary_label Output]
24

使用长度属性,我们可以计算员工的4属性。

标签: 价值( )

Object.values()创建包含对象值的数组。

 1// Initialize an object
 2const session = {
 3    id: 1,
 4    time: `26-July-2018`,
 5    device: 'mobile',
 6    browser: 'Chrome'
 7};
 8
 9// Get all values of the object
10const values = Object.values(session);
11
12console.log(values);

1[secondary_label Output]
2[1, "26-July-2018", "mobile", "Chrome"]

Object.keys() 和 Object.values() 允许您从对象返回数据。

主題主題( )

Object.entries()创建一个对象的密钥/值对的嵌套数组。

 1// Initialize an object
 2const operatingSystem = {
 3    name: 'Ubuntu',
 4    version: 18.04,
 5    license: 'Open Source'
 6};
 7
 8// Get the object key/value pairs
 9const entries = Object.entries(operatingSystem);
10
11console.log(entries);

1[secondary_label Output]
2[
3    ["name", "Ubuntu"]
4    ["version", 18.04]
5    ["license", "Open Source"]
6]

一旦我们有关键/值对数组,我们可以使用forEach()方法来循环并处理结果。

1// Loop through the results
2entries.forEach(entry => {
3    let key = entry[0];
4    let value = entry[1];
5
6    console.log(`${key}: ${value}`);
7});

1[secondary_label Output]
2name: Ubuntu
3version: 18.04
4license: Open Source

Object.entries() 方法只会返回对象实例的自身属性,而不是通过其原型继承的任何属性。

标签( )

Object.assign()用于将值从一个对象复制到另一个对象。

我们可以创建两个对象,并将它们与Object.assign()合并。

 1// Initialize an object
 2const name = {
 3    firstName: 'Philip',
 4    lastName: 'Fry'
 5};
 6
 7// Initialize another object
 8const details = {
 9    job: 'Delivery Boy',
10    employer: 'Planet Express'
11};
12
13// Merge the objects
14const character = Object.assign(name, details);
15
16console.log(character);

1[secondary_label Output]
2{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

在下面的代码中,我们将通过合并名称和细节对象来修改我们声明字符的方式。

 1// Initialize an object
 2const name = {
 3    firstName: 'Philip',
 4    lastName: 'Fry'
 5};
 6
 7// Initialize another object
 8const details = {
 9    job: 'Delivery Boy',
10    employer: 'Planet Express'
11};
12
13// Merge the object with the spread operator
14const character = {...name, ...details}
15
16console.log(character);

1[secondary_label Output]
2{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

這種在客體字母中所謂的散布語法(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals)也被稱為平面克隆。

解冻( )

Object.freeze()阻止对象的属性和值的修改,并防止对象中添加或删除属性。

 1// Initialize an object
 2const user = {
 3    username: 'AzureDiamond',
 4    password: 'hunter2'
 5};
 6
 7// Freeze the object
 8const newUser = Object.freeze(user);
 9
10newUser.password = '*******';
11newUser.active = true;
12
13console.log(newUser);

1[secondary_label Output]
2{username: "AzureDiamond", password: "hunter2"}

在上面的示例中,我们试图将密码hunter2代替为*******,但密码属性保持不变,我们还试图添加一个新的属性活跃,但没有添加。

Object.isFrozen()可用于确定一个对象是否已被冻结,并返回一个布尔文。

标签标签( )

Object.seal()防止新属性添加到对象中,但允许更改现有属性。

 1// Initialize an object
 2const user = {
 3    username: 'AzureDiamond',
 4    password: 'hunter2'
 5};
 6
 7// Seal the object
 8const newUser = Object.seal(user);
 9
10newUser.password = '*******';
11newUser.active = true;
12
13console.log(newUser);

1[secondary_label Output]
2{username: "AzureDiamond", password: "*******"}

未向密封对象添加新的活跃属性,但成功更改了密码属性。

对象对象对象( )

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

在本示例中,我们可以创建一个数组,它可以访问数组原型。

1const employees = ['Ron', 'April', 'Andy', 'Leslie'];
2
3Object.getPrototypeOf(employees);

1[secondary_label Output]
2[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]

在输出中,我们可以看到员工数组的原型可以访问pop、find和其他 Array 原型方法,我们可以通过对员工原型进行测试来证实这一点。

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

1[secondary_label Output]
2true

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

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

结论

对象有许多有用的方法,可以帮助我们修改、保护和重复它们. 在本教程中,我们审查了如何创建和分配新对象,重复对象的键和/或值,并冻结或密封对象。

如果您需要审查 JavaScript 对象,您可以阅读[理解 JavaScript 中的对象](https://andsky.com/tech/tutorials/understanding-objects-in-javascript)。 如果您想熟悉原型链,您可以看看理解 JavaScript 中的原型和继承`。