理解 JavaScript 中的对象迭代：“for...of”与“for...in”

迭代对象是 JavaScript 中的一项常见任务，但了解每种情况的正确技术可以使您的代码更干净、更高效。本文解释了为什么不能直接将 for...of 与对象一起使用，提供了替代方法，并提供了迭代对象的最佳实践。

目录

1. JavaScript 中的迭代简介
2. 为什么 for...of 不适用于对象
3. 迭代对象的技术
   • 用于...
   • 使用Object.keys()
   • 使用 Object.values()
   • 使用 Object.entries()
4. 对象迭代技术的比较
5. for...in 和 for...of 之间的比较
6. 高级示例：迭代嵌套对象
7. JavaScript 中对象迭代的最佳实践

---

1. JavaScript 迭代简介

在 JavaScript 中，迭代数据结构是处理复杂数据集的重要组成部分。虽然数组和字符串是可迭代对象，但普通对象（键值对）需要不同的迭代方法。当开发人员尝试在对象上使用 for...of 时，他们经常会遇到问题。

---

2. 为什么 for...of 不适用于对象

for...of 循环用于迭代可迭代对象，例如数组、字符串、Map 和 Set。然而，默认情况下，普通 JavaScript 对象不可迭代。

示例：尝试使用对象进行 for...of

const user = { name: 'John', age: 30 };

for (const value of user) {
  console.log(value);
}
// TypeError: user is not iterable

尝试在普通对象上使用 for...of 会引发 TypeError。发生这种情况是因为 JavaScript 中的对象没有 [Symbol.iterator] 方法，而 for...of 循环需要该方法。

---

3. 对象迭代技术

要在 JavaScript 中迭代对象，可以使用多种技术：

3.1 用于...中

for...in 循环迭代对象的可枚举属性。它循环遍历对象的键。

const user = { name: 'John', age: 30 };

for (const key in user) {
  console.log(key, user[key]);
}
// Output: 
// name John
// age 30

• 优点：简单直接。
• 缺点：如果继承的属性是可枚举的，则会对其进行迭代，这可能会导致意外的行为。

---

3.2 使用Object.keys()

Object.keys() 返回对象自己的属性键的数组，允许您使用 for...of 来迭代它们。

const user = { name: 'John', age: 30 };

for (const key of Object.keys(user)) {
  console.log(key, user[key]);
}
// Output: 
// name John
// age 30

• 优点：仅迭代对象自己的属性。
• 缺点：仅检索键，而不检索值。

---

3.3 使用Object.values()

Object.values() 返回对象属性值的数组，然后可以使用 for...of 对其进行迭代。

const user = { name: 'John', age: 30 };

for (const value of Object.values(user)) {
  console.log(value);
}
// Output: 
// John
// 30

• 优点：无需处理键即可直接访问值。
• 缺点：无法直接访问密钥。

---

3.4 使用Object.entries()

Object.entries() 返回对象的键值对数组，这使得它非常适合迭代键和值。

const user = { name: 'John', age: 30 };

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}
// Output: 
// name John
// age 30

• 优点：在一次迭代中轻松访问键和值。
• 缺点：语法稍微复杂一些。

---

4. 对象迭代技术的比较

Technique	Access to Keys	Access to Values	Inherited Properties	Simplicity
for...in	Yes	Yes	Yes (if enumerable)	Simple
Object.keys() for...of	Yes	No	No	Moderate
Object.values() for...of	No	Yes	No	Moderate
Object.entries() for...of	Yes	Yes	No	Slightly complex

技术 访问密钥 获取值 继承属性 简单 标题> 对于...在 是 是 是（如果可枚举） 简单 Object.keys() for...of 是 否 否 中等 Object.values() for...of 否 是 否 中等 Object.entries() for...of 的 是 是 否 稍微复杂 表>

---

5. Comparison Between for...in and for...of

5.1 for...in Loop

The for...in loop is used to iterate over the enumerable properties (keys) of an object, including properties that may be inherited through the prototype chain.

Example: for...in with an Object

const user = { name: 'John', age: 30 };

for (const key in user) {
  console.log(key, user[key]);
}
// Output:
// name John
// age 30

• Explanation: The for...in loop iterates over the keys (name and age) and allows you to access the corresponding values (John and 30).

Example: for...in with an Array (Not Recommended)

const colors = ['red', 'green', 'blue'];

for (const index in colors) {
  console.log(index, colors[index]);
}
// Output:
// 0 red
// 1 green
// 2 blue

• Explanation: The for...in loop iterates over the indices (0, 1, 2) of the array, not the values themselves. This behavior is usually less desirable when working with arrays.

---

5.2 for...of Loop

The for...of loop is used to iterate over iterable objects like arrays, strings, maps, sets, and other iterables. It loops over the values of the iterable.

Example: for...of with an Array

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
  console.log(color);
}
// Output:
// red
// green
// blue

• Explanation: The for...of loop directly iterates over the values of the array (red, green, blue), which is ideal for array iteration.

Example: for...of with a String

const name = 'John';

for (const char of name) {
  console.log(char);
}
// Output:
// J
// o
// h
// n

• Explanation: The for...of loop iterates over each character of the string (J, o, h, n), making it useful for string manipulation.

---

Summary: Key Differences Between for...in and for...of

Feature	for...in	for...of
Purpose	Iterates over object keys (including inherited properties)	Iterates over iterable values (arrays, strings, etc.)
Works with Objects	Yes	No (objects are not iterable)
Works with Arrays	Yes, but not ideal (returns indices)	Yes, ideal (returns values)
Use Case	Best for iterating over object properties	Best for arrays, strings, maps, sets, etc.

---

6. Advanced Example: Iterating Over Nested Objects

Sometimes, objects are nested, and you need to iterate through all levels of the object. Here's an example that uses recursion to handle nested objects.

const user = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: 10001
  }
};

// Recursively iterate through the object
function iterate(obj) {
  for (const [key, value] of Object.entries(obj)) {
    if (typeof value === 'object' && !Array.isArray(value)) {
      console.log(`Entering nested object: ${key}`);
      iterate(value); // Recursively call for nested objects
    } else {
      console.log(key, value); // Output key-value pair
    }
  }
}

iterate(user);
// Output: 
// name John
// age 30
// Entering nested object: address
// city New York
// zip 10001

• Explanation: The function checks if the value is an object, then recursively iterates through it.

---

7. Best Practices for Object Iteration in JavaScript

Use the Right Technique for the Right Task

1. Use for...in cautiously: It may iterate over properties inherited from the prototype chain,

以上是理解 JavaScript 中的对象迭代：“for...of”与“for...in”的详细内容。更多信息请关注PHP中文网其他相关文章！