技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

【示例】3种方法迭代遍历JavaScript对象属性和值

作者:admin    时间:2022-6-10 16:11:5    浏览:

JavaScript迭代遍历对象属性和值非常常见常用,在本文中,我将介绍3种常用的方法,来达到我们的目的。每种方法都有细微的差别,因此我将为每种方法提供详细的解释和示例。

3种方法迭代遍历JavaScript对象属性和值

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 value2

forEachfor都起到迭代数组的作用,但它们的作用不尽相同,参考forEach和for不同的功能表现

我应该什么时候使用Object.entries?

从上面的例子可以看出,Object.entries最有价值的特性是你可以同时访问 keyvalue。因此,当你知道要对对象的属性(键)和相应的值进行操作时,这是一种理想的方法。

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.valuesObject.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对象属性和值的几种方法。通过本文的学习,我们应该了解这几种方法各自的优点,在使用时选择合适的方法。

相关文章

标签: 对象  属性  
x
x
  • 站长推荐