JavaScript 对象循环遍历的4种方式，以及它们的优缺点
如何在JavaScript 中循环对象属性和值？它与数组不同，它们没有内置的循环方法。在这篇博文中，我将向您展示： 循环 JavaScript 对象的四种不同方法 ，每种方法的优点和缺点。
循环对象键
JavaScript 对象键或属性是存储在对象中的值的名称或标识符。 JavaScript 对象是JavaScript 中的非原始数据类型之一。它们可以是字符串、符号或数字，用于访问或修改对象的值。例如，person.name 是一个返回 person 对象的名称值的属性。
const={
name:"John",
age:30,
favoriteColors:["Red","Green"]
};我们将在整篇文章中使用同一个对象。
方法 1：JavaScript 使用 Object.keys() 循环对象键
JavaScript Object.keys()方法返回对象的所有键（或属性名称）的数组。然后，您可以使用 for 循环或 forEach() 方法来迭代数组并访问键。要循环访问 person 对象的键，您可以使用 Object.keys() 静态方法，如下所示：
const keys = Object.keys(person);
// Output: ["name", "age", "favoriteColors"]
// 1. Using a for() loop
for (let i = 0; i < keys.length; i++) {
console.log(keys[i]);
}
// Output: "name", "age", "favoriteColors"
// 2. Using a forEach() method
keys.forEach(key => {
console.log(key);
});
// Output: "name", "age", "favoriteColors"这种方法的优点是：
- 它简单易用。
- 它适用于任何对象，无论其结构或复杂性如何。
- 它与旧版浏览器兼容，因为它是 ECMAScript 5 标准的一部分。
这种方法的缺点是：
- 此方法为您提供对象自己的键。它忽略从原型链获得的密钥。有时，这正是您所需要的。其他时候，您可能也想包含这些键。
- 对象的键没有固定的顺序。这意味着您不能总是期望它们以相同的顺序出现。如果您的逻辑取决于按键顺序，请小心，因为它可能不会按您的预期工作。
- 这段代码创建了另一个数组。这会减慢您的代码速度并使用更多内存。如果物体很大或有很多部分，情况会更糟。
方法 2：使用 Object.values() 循环对象值
Object.values() 为我们提供了一个包含对象所有值的数组。您可以循环数组并轻松获取值。例如，看看这个 person 对象。您可以像这样使用 Object.values() ：
// Output: ["John", 40, ["Red", "Green"]]
// 1. Using a for() loop
for (let index = 0; index < values.length; index++) {
console.log(values[index]);
}
// Output: ["John", 40, ["Red", "Green"]
// 2. Using a forEach() method
values.forEach(key => {
});
// Output: ["John", 40, ["Red", "Green"]这种方法的优点是：
- 它简单易用。
- 它适用于任何对象，无论其结构或复杂性如何。
- 它是 ECMAScript 2017 标准的一部分，这意味着它是一项现代且受到广泛支持的功能。
这种方法的缺点是：
- 它只返回对象本身的值。这意味着它不包括从对象原型链继承的值。这可能是也可能不是您想要的，具体取决于您的用例。
- Object.values() 不关心值的顺序，因为对象没有排序。如果您的代码依赖于顺序，这可能会成为问题。
- 这是一个新功能，因此一些旧浏览器不支持它。在这些情况下，您可能需要使用一些技巧才能使其发挥作用。
- Object.values() 使用值创建一个新数组，这会影响代码使用的速度和内存量。如果您的对象很大或很复杂，这可能是一个问题。
方法 3：使用 Object.entries() 循环对象条目
你想获取一个对象的键值对吗？你可以使用Object.entries()！它为您提供了一个数组数组，其中每个子数组都有一个键和一个值。然后，您可以使用 for 或 forEach 循环数组，并根据需要使用条目。
例如，使用与之前相同的 person 对象，您可以使用 Object.entries() 方法，如下所示：
// 1. Using a for() loop
for (let index = 0; index < entries.length; index++) {
}
// Output: ["name", "John"], ["age", 30], ["favoriteColors", ["Red", "Green"]]
// 2. Using a forEach() method
entries.forEach(entry => {
});
// Output: ["name", "John"], ["age", 30], ["favoriteColors", ["Red", "Green"]]这种方法的优点是：
- 它简单易用。
- 它适用于任何对象，无论其结构或复杂性如何。
- 它是 ECMAScript 2017 标准的一部分，这意味着它是一项现代且受到广泛支持的功能。
- 它返回对象的键和值，如果您需要在逻辑中访问这两个键和值，这会很有用。
这种方法的缺点是：
- 它只返回对象自己的条目，这意味着它不包括从对象原型链继承的条目。这可能是也可能不是您想要的，具体取决于您的用例。
- 它不保证条目的顺序，因为对象本质上是无序的。如果您的逻辑依赖于条目的顺序，这可能会导致一些问题。
- 它会创建一个额外的数组，这可能会影响代码的性能和内存使用情况，特别是在对象很大或嵌套的情况下。
- 它与旧版浏览器不兼容，因为它是一个相对较新的功能。您可能需要使用 polyfill 或转译器才能使其在较旧的环境中工作。
方法 4：JavaScript 使用 for...in 循环对象属性
使用 for...in 循环，您可以遍历对象的所有属性。它为您提供一个保存属性名称的变量。然后您可以使用带有点或括号的变量来获取属性值。
例如，使用与之前相同的 person 对象，我们可以使用 for...in 语句，如下所示：
const person = {
name: "John",
age: 30,
favoriteColors: ["Red", "Green"]
};
// Using a for...in statement
for (let key in person) {
console.log(key); // Output: "name", "age", "favoriteColors"
console.log(person[key]); // Output: "John", 30, ["Red", "Green"]
}这种方法的优点是：
- 它简单易用。
- 它不会创建额外的数组，这可能会提高代码的性能和内存使用率，特别是在对象很大或嵌套的情况下。
- 它返回对象的键和值，如果您需要在逻辑中访问这两个键和值，这会很有用。
这种方法的缺点是：
- 它返回对象的所有可枚举属性，这意味着它包括从对象原型链继承的属性。这可能是也可能不是您想要的，具体取决于您的用例。如果只想循环对象自身的属性，则需要使用 hasOwnProperty() 方法过滤掉继承的属性。
- 它不保证属性的顺序，因为对象本质上是无序的。如果您的逻辑依赖于属性的顺序，这可能会导致一些问题。
- 它与 JavaScript 的一些新功能不兼容，例如 Symbol 属性或 Object.defineProperty()。这些功能可以创建 for…in 语句不可见的不可枚举属性。
不同循环对象属性的比较
这是四种方法的快速比较表：
| 方法 | 退货 | 拥有/全部 | 命令 | 表现 | 兼容性 |
|---|---|---|---|---|---|
| Object.keys() | 按键 | 自己的 | 不 | 低的 | 高的 |
| Object.values() | 价值观 | 自己的 | 不 | 低的 | 中等的 |
| 对象.entries（） | 键值 | 自己的 | 不 | 低的 | 中等的 |
| for...in | 特性 | 全部 | 不 | 高的 | 低的 |
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
