循环访问 JavaScript 对象属性

探索 JavaScript 对象迭代

循环访问 JavaScript 对象的属性是开发人员遇到的常见任务。无论您需要访问键、值还是两者，了解如何有效枚举对象属性都至关重要。

在本文中，我们将探索迭代对象元素的不同方法。最后，您将掌握轻松处理对象枚举的知识，确保您的 JavaScript 代码高效且可读。

了解 JavaScript 对象迭代技术

这 for...in 循环是一种基本的 JavaScript 构造，用于迭代对象的可枚举属性。在示例脚本中， for...in 用于循环遍历对象的每个属性 p。在循环内， hasOwnProperty() 用于确保该属性是对象的直接属性，而不是从其原型链继承。这对于避免对象继承属性时出现意外结果至关重要。然后循环使用记录每个属性的键和值 console.log，有效地枚举对象的属性。

演示的另一种方法是使用 Object.entries()，它返回对象自己的可枚举属性 [key, value] 对的数组。然后使用迭代该数组 forEach()，一种方便的数组方法，为每个数组元素执行一次提供的函数。此方法通过在每次迭代中直接访问键和值来简化代码，使枚举过程简单易读。这 Object.keys() 方法的工作原理类似，但仅返回键，然后使用这些键来访问 forEach() 环形。

此外， Object.values() 是另一个有用的方法，它返回对象值的数组。通过迭代这个数组 forEach()，我们可以直接访问并记录每个值。这些方法——for...in, Object.entries(), Object.keys()， 和 Object.values()——是处理 JavaScript 中对象的强大工具。它们为您访问和操作对象属性的方式提供了灵活性，满足不同的需求和偏好。每种方法都有其优点，了解它们可以让开发人员根据自己的具体用例选择最合适的方法，确保高效且有效的代码执行。

使用 for...in 循环迭代对象属性

JavaScript - for...in 循环

var p = {"p1":"value1","p2":"value2","p3":"value3"};
for (var key in p) {
  if (p.hasOwnProperty(key)) {
    console.log(key + " -> " + p[key]);
  }
}
// Output:
// p1 -> value1
// p2 -> value2
// p3 -> value3

使用 Object.entries() 循环对象键和值

JavaScript - Object.entries()

var p = {"p1":"value1","p2":"value2","p3":"value3"};
Object.entries(p).forEach(([key, value]) => {
  console.log(key + " -> " + value);
});
// Output:
// p1 -> value1
// p2 -> value2
// p3 -> value3

使用 Object.keys() 枚举对象属性

JavaScript - Object.keys()

var p = {"p1":"value1","p2":"value2","p3":"value3"};
Object.keys(p).forEach(key => {
  console.log(key + " -> " + p[key]);
});
// Output:
// p1 -> value1
// p2 -> value2
// p3 -> value3

使用 Object.values() 迭代对象值

JavaScript - Object.values()

var p = {"p1":"value1","p2":"value2","p3":"value3"};
Object.values(p).forEach(value => {
  console.log(value);
});
// Output:
// value1
// value2
// value3

深入研究 JavaScript 对象迭代

在 JavaScript 中处理对象迭代的另一种有效方法是使用 Map 目的。与普通物体不同， Map 对象允许您存储键值对，其中键可以是任何数据类型。这种灵活性在您需要将复杂键（例如对象或函数）与值关联的情况下特别有用。您可以轻松地迭代 Map 使用其内置方法，例如 Map.prototype.forEach(), Map.prototype.keys()， 和 Map.prototype.values()，提供一致且可预测的迭代顺序，即插入顺序。

此外 Map, JavaScript 还提供 WeakMap，这与此类似，但具有弱引用的键，这意味着如果没有对该对象的其他引用，它们不会阻止垃圾回收。这有助于在某些应用程序中更有效地管理内存。两个都 Map 和 WeakMap 提供一组强大的方法来管理键值对的集合。虽然它们不是普通对象的直接替代品，但它们在灵活性和内存管理方面提供了独特的优势，可以在更复杂的数据结构和算法中利用。

关于 JavaScript 对象迭代的常见问题

1. 如何在 JavaScript 中迭代对象的属性？
2. 您可以使用 for...in, Object.keys(), Object.values()， 或者 Object.entries() 迭代对象的属性。
3. 有什么区别 for...in 和 Object.keys()？
4. for...in 迭代所有可枚举属性，包括通过原型链继承的属性，而 Object.keys() 仅返回对象自己的可枚举属性。
5. 如何 Object.entries() 工作？
6. Object.entries() 返回对象自己的可枚举属性 [key, value] 对的数组，可以使用 a 进行迭代 forEach 环形。
7. 我可以用吗 forEach 直接作用在物体上？
8. 不， forEach 是数组的方法，但您可以在返回的数组上使用它 Object.keys(), Object.values()， 或者 Object.entries()。
9. 什么是 Map 和 WeakMap？
10. Map 允许任何类型的键并保持插入顺序。 WeakMap 具有弱引用且可以被垃圾回收的键。
11. 怎么办 Map.prototype.forEach() 和 Array.prototype.forEach() 不同？
12. 它们的工作原理相似，但是 Map.prototype.forEach() 迭代 Map 条目（键值对），而 Array.prototype.forEach() 迭代数组元素。
13. 为什么使用 Object.values()？
14. 使用 Object.values() 当您需要直接迭代对象属性的值时。

关于 JavaScript 对象迭代的最终想法

掌握 JavaScript 中的对象迭代对于有效编程至关重要。通过利用类似的方法 for...in, Object.keys(), Object.values()， 和 Object.entries()，开发人员可以高效地访问和操作对象属性。这些技术提供了灵活性，确保您的代码保持干净、高效且易于理解。无论您正在处理简单还是复杂的对象，了解这些方法都将增强您的编码技能并优化您的 JavaScript 应用程序。