JavaScript遍历对象的五种常用方式总结

前言

大家好呀！今天我们来聊一聊如何在 JavaScript 中遍历一个对象。对象在 JavaScript 中是一个非常常见的数据类型，经常用来存储各种各样的信息。如何从中提取数据，或者对每一个属性进行操作呢？下面我们一起来看看5种常用的遍历对象的方式吧！

1. for...in 循环 

for...in 是 JavaScript 最常用的一种遍历对象属性的方式。它会遍历对象所有可枚举的属性，包括继承的属性。

例子：

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};

for (let key in person) {
  console.log(key, ": ", person[key]);
}

输出：

name : Alice
age : 25
job : Engineer

这里需要注意的是，for...in 会遍历对象的所有属性（包括继承来的属性）。如果不希望遍历继承的属性，我们可以加个判断：

if (person.hasOwnProperty(key)) {
  // 只遍历 person 自己的属性
}

2. Object.keys() + forEach() 组合 

如果我们只对对象的“自有属性”感兴趣，可以使用 Object.keys() 来获取所有的键（属性名），然后配合 forEach() 来遍历。

例子：

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};

Object.keys(person).forEach(key => {
  console.log(key, ": ", person[key]);
});

输出：

name : Alice
age : 25
job : Engineer

Object.keys() 会返回对象的键名数组，而 forEach() 是数组的方法，所以可以用它来方便地遍历每个键。

3. Object.values() + forEach() 组合 

如果你只关心对象的值，可以用 Object.values()。这个方法会返回一个数组，数组里包含对象的所有值。

例子：

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};

Object.values(person).forEach(value => {
  console.log(value);
});

输出：

Alice
25
Engineer

4. Object.entries() + forEach() 组合 

Object.entries() 会返回一个包含对象键值对的二维数组。你可以通过这种方式既得到属性名，又能得到属性值，特别适合需要同时操作键和值的场景。

例子：

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};

Object.entries(person).forEach(([key, value]) => {
  console.log(key, ": ", value);
});

输出：

name : Alice
age : 25
job : Engineer

这里 Object.entries(person) 会返回 [["name", "Alice"], ["age", 25], ["job", "Engineer"]]，然后我们可以用解构语法（[key, value]）来方便地访问键和值。

5. for...of + Object.entries() 组合 

for...of 循环是对数组的遍历非常友好的一种方法。如果你使用 Object.entries() 得到的是一个二维数组，我们可以用 for...of 来遍历它。

例子：

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
};

for (const [key, value] of Object.entries(person)) {
  console.log(key, ": ", value);
}

输出：

name : Alice
age : 25
job : Engineer

for...of 循环会让代码更简洁，也能够更直观地处理键值对。

总结 

• for...in：遍历对象的所有属性，包括继承的属性，但可以通过 hasOwnProperty 排除继承的属性。
• Object.keys()：获取对象的键名数组，结合 forEach() 遍历。
• Object.values()：获取对象的值数组，结合 forEach() 遍历。
• Object.entries()：获取对象的键值对数组，结合 forEach() 或 for...of 遍历。

每种方法都有其特定的使用场景哦！你可以根据具体的需求来选择最适合的方式。希望这篇文章能帮助你更好地掌握 JavaScript 中的对象遍历！🎉

到此这篇关于JavaScript遍历对象的五种常用方式的文章就介绍到这了,更多相关JS遍历对象五种方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论