【示例】3种方法迭代遍历JavaScript对象属性和值
作者:admin 时间:2022-6-10 16:11:5 浏览:JavaScript迭代遍历对象属性和值非常常见常用，在本文中，我将介绍3种常用的方法，来达到我们的目的。每种方法都有细微的差别，因此我将为每种方法提供详细的解释和示例。
1、使用Object.entries（对象条目）
我将介绍的第一个方法是Object.entries。此方法返回对象的字符串键值对数组。有几种Object.entries的使用方法。
使用forEach方法迭代
使用forEach方法，我们可以单独访问每个entry。请注意，entry会进行解构，entry[0]是键，而entry[1]是对应的值。
const obj = {
'key1': 'value1',
'key2': 'value2'
}
Object.entries(obj).forEach(entry => {
let [key, value] = entry;
console.log(key, value);
})
// output
key1 value1
key2 value2使用for...of迭代
除了上面的forEach，我们还可以使用 for...of 解构entry，循环定义中的每一个。
const obj = {
'key1': 'value1',
'key2': 'value2'
}
for (let [key, value] of Object.entries(obj)) {
console.log(key, value);
}
// output
key1 value1
key2 value2forEach和for都起到迭代数组的作用，但它们的作用不尽相同，参考forEach和for不同的功能表现 。
我应该什么时候使用Object.entries？
从上面的例子可以看出，Object.entries最有价值的特性是你可以同时访问 key 和 value。因此，当你知道要对对象的属性（键）和相应的值进行操作时，这是一种理想的方法。
2、使用Object.keys（对象键）
Object.keys返回对象的可枚举属性名称的数组。
可枚举属性是“通过简单赋值或通过属性初始化器”设置的属性。JavaScript如何检查一个属性是否可枚举。由于 JavaScript 对象有很多额外的属性（例如constructor, __proto__），我们不想在对我们的对象进行操作时包含这些类型的属性。当然，它们可以直接访问，但在迭代属性时不会包含在内。
用法很简单，看下面的例子：
const obj = {
name: 'Levi Coffin',
birthdate: '10/28/1798',
city: 'Newport',
state: 'Indiana'
};
Object.keys(obj) // => [ 'name', 'birthdate', 'city', 'state' ]要遍历对象的属性，我们可以使用forEach：
Object.keys(obj).forEach(key => {
console.log(key);
});或者for...of：
for (let key of Object.keys(obj)) {
console.log(key);
}而要得到对应的值，我们可以使用key进行参考：
for (let key of Object.keys(obj)) {
let value = obj[key];
console.log(key, value);
}我应该什么时候使用Object.keys？
当你只对对象的键（属性名）感兴趣时，你应该使用它。如果你也对这些值感兴趣，那么Object.entries可能是正确的工具。
3、使用Object.values（对象值）
Object.values是Object.keys的对应物，并返回对象的可枚举属性值的数组。
同样，我们可以迭代使用forEach：
Object.values(obj).forEach(value => {
console.log(value);
});或者for...of：
for (let value of Object.values(obj)) {
console.log(value);
}我应该什么时候使用Object.values？
同样，就像它的对应物一样，你应该在只对对象的值感兴趣时使用Object.values。
使用与上面相同的示例：
const nameAgeMap = {
'Tom': 30,
'Susan': 28,
'Rob': 35,
'Claire': 22
};我们可以很容易地得到对应的值列表：
Object.values(nameAgeMap) // => [ 30, 28, 35, 22 ]
总结
本文通过多个示例，详细介绍了迭代遍历JavaScript对象属性和值的几种方法。通过本文的学习，我们应该了解这几种方法各自的优点，在使用时选择合适的方法。
相关文章
- 站长推荐
