• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载

如何在 JavaScript 中迭代对象属性

javascript 中的对象是什么?

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

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

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

javaScript 中表示对象最流行的方式是使用双花括号(也称为对象字面量)。在对象上,我们可以定义属性、方法或两者兼而有之。


如何在 JavaScript 中迭代对象属性  第1张

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

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

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

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

使用 Object.keys() 遍历属性键

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

1
2
3
4
5
6
7
8
9
const user = {
    name: "Kingsley",
    age: 28,
    job: "Web Developer"
}
 
console.log(Object.keys(user));
 
// ["name", "age", "job"]

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
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() 返回值。

考虑下面的代码,它只返回所有属性的值:

1
2
3
4
5
6
7
8
9
const user = {
    name: "Kingsley",
    age: 28,
    job: "Web Developer"
}
 
console.log(Object.values(user))
 
// ["Kingsley", 28, "Web Developer"]

使用for循环,使用 遍历对象的属性Object.values()

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
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 循环中任何给定对象的键和值。

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

1
2
3
4
5
6
7
8
9
const user = {
    name: "Kingsley",
    age: 28,
    job: "Web Developer"
}
 
console.log(Object.entries(user))
 
// [["name", "Kingsley"], ["age", 28], ["job", "Web Developer"]]

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
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 处找到键。 

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

1
2
3
4
5
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()可以在只需要值而不需要键的情况下使用。


文章目录
  • javascript 中的对象是什么?
  • 使用 Object.keys() 遍历属性键
  • 直接迭代属性值Object.values()
  • 使用 Object.entries() 迭代对象属性
  • 结论