JavaScript中如何遍历对象属性

在本文中，我们将介绍在 JavaScript 中迭代对象属性的各种方法。

JavaScript 中的对象是什么？

对象是 JavaScript 等编程语言中的特殊数据集合，用于表示现实世界的对象或存储程序状态或组织程序数据。一个对象可以有一个或多个属性来描述它，也可以有执​​行常见任务的方法。

例如，银行帐户可以被视为一个对象，具有银行余额、帐户类型和帐户货币等属性，所有这些属性都描述了银行帐户。

诸如从帐户中减去资金或向帐户添加资金、关闭帐户以及从帐户中汇款等任务都可以表示为方法。

在 JavaScript 中表示对象的最流行方式是使用双大括号（也称为对象文字）。在对象上，我们可以定义属性、方法或两者。

const bankAccount = {
    balance: 100,
    currency: "USD",
    type: "savings",
    subtract: function(expenses) {
        const newBal = this.balance - expenses
        this.balance = newBal
    }
}

每个对象属性由属性访问器（例如 currency）和属性值（例如 "USD"）组成。方法是在对象内执行特定任务的函数。

在从银行余额中减去新费用的 subtract 方法中，我们使用 this 访问余额属性。我们可以使用 this 引用从对象内访问任何属性或方法。

我们还可以迭代对象的属性来一一处理。简单来说，迭代是重复某些算法步骤直到满足特定条件的过程。这通常称为循环。在这种情况下，对数据集的迭代意味着为集合中的每个项目运行一些代码。

让我们看一下在 JavaScript 中迭代对象属性的一些现代方法。

使用 Object.keys() 迭代属性键

Object.keys() 返回一个数组，其中包含任何给定对象上所有属性的键。

const user = {
    name: "Kingsley",
    age: 28,
    job: "Web Developer"
}

console.log(Object.keys(user));

// ["name", "age", "job"]

因此，我们可以将 Object.keys() 与 for 循环结合起来，通过迭代其键来迭代对象的所有属性，如下所示：

const user = {
    name: "Kingsley",
    age: 28,
    job: "Web Developer"
}

for (const key of Object.keys(user)) {
	console.log(`${key} = ${user[key]}`)
}

/*
"name = Kingsley"
"age = 28"
"job = Web Developer"
*/

因为我们的迭代器为我们提供了对象属性的键，所以我们可以使用属性访问器语法直接从对象 user 访问值：user[key]。

使用 Object.values() 直接迭代属性值

Object.values() 的工作方式与 Object.key() 非常相似。两者之间的主要区别在于，Object.keys() 仅返回属性键，而 Object.values() 返回值。

考虑以下代码，它仅返回所有属性的值：

const user = {
    name: "Kingsley",
    age: 28,
    job: "Web Developer"
}

console.log(Object.values(user))

// ["Kingsley", 28, "Web Developer"]

使用 for 循环，使用 Object.values() 迭代对象的属性。

const user = {
    name: "Kingsley",
    age: 28,
    job: "Web Developer"
}

for (const value of Object.values(user)) {
	console.log(`value = ${value}`)
}

/*
"value = Kingsley"
"value = 28"
"value = Web Developer"
*/

因为在许多情况下都需要属性键，所以这可能不是您在迭代对象时想要使用的方法。

使用 Object.entries() 迭代对象属性

Object.entries() 提供了一种更简洁的方法来访问 JavaScript 循环中任何给定对象的键和值。

该方法返回任何给定对象的多维数组（也称为数组的数组）。每个子数组都包含特定属性的键和值。

const user = {
    name: "Kingsley",
    age: 28,
    job: "Web Developer"
}

console.log(Object.entries(user))

// [["name", "Kingsley"], ["age", 28], ["job", "Web Developer"]]

现在我们可以使用 Object.entries() 和 for 循环来轻松检索每个属性的键和值，如下所示：

const user = {
    name: "Kingsley",
    age: 28,
    job: "Web Developer"
}


for (const entry of Object.entries(user)) {
	console.log(`${entry[0]} = ${entry[1]}`)
}

/*
"name = Kingsley"
"age = 28"
"job = Web Developer"
*/

在这里，对于每个条目，我们在索引 1 处找到条目值，在索引 0 处找到键。

为了进一步简化代码，我们可以使用数组解构将每个属性的键和值检索到单独的变量中：

for (const [key, value] of Object.entries(user)) {
    console.log(`${key} = ${value}`)
}

// gives the same output as the last code block

与其他方法相比，这种方法更加简洁且更具可读性。

结论

Object.entries() 是在 JavaScript 中迭代对象属性的推荐方法。

由于该方法返回一个多维数组，因此我们可以通过使用数组解构语法将每个属性检索到单独的变量中来极大地简化代码。这有助于保持一切灵活性。

Object.values() 可用于仅需要值而不需要键的情况。