for...of 为什么不能遍历普通对象？彻底理解 JavaScript 中的 for...of 循环

引言

for...of 循环在 JavaScript 中是一个强大的工具，它允许我们遍历各种数据结构，包括数组、字符串、映射和集合。然而，它有一个明显的限制：它不能遍历普通对象。本文将深入探讨这个限制背后的原因，并帮助我们更深入地理解 for...of 循环在 JavaScript 中的工作原理。

for...of 循环的原理

for...of 循环使用迭代协议来遍历数据结构。当我们使用 for...of 遍历一个数据结构时，JavaScript 引擎会调用该结构的 Symbol.iterator 方法来获取一个迭代器对象。这个迭代器对象实现了 next() 方法，它在每次调用时都会返回一个 { value, done } 对象。value 属性包含当前迭代项，而 done 属性表示迭代是否完成。

普通对象不是可迭代的

普通对象在 JavaScript 中不是可迭代的，这意味着它们没有实现 Symbol.iterator 方法。这是因为普通对象的设计目的是存储键值对，而不是提供有序的项序列。

为什么 for...of 无法遍历普通对象

当我们尝试使用 for...of 遍历一个普通对象时，JavaScript 引擎会尝试调用其 Symbol.iterator 方法。由于普通对象没有实现此方法，因此会抛出一个 TypeError 错误。这就是 for...of 循环无法遍历普通对象的根本原因。

遍历普通对象的替代方案

虽然 for...of 无法直接遍历普通对象，但有其他方法可以实现这一目标：

• 使用 Object.keys() 或 Object.values()： 这些方法返回一个数组，其中包含对象的键或值。然后，我们可以使用 forEach() 或 for...of 遍历这个数组。
• 使用 for...in 循环： for...in 循环遍历对象的键，但要注意它也遍历对象原型链中的键。因此，在使用 for...in 时需要小心。
• 使用第三方库： 有许多第三方库可以帮助我们遍历普通对象，例如 lodash 和 underscore。

结论

for...of 循环是一个强大的工具，用于遍历各种数据结构。然而，它有一个限制：它不能遍历普通对象。这是因为普通对象不是可迭代的，这意味着它们没有实现 Symbol.iterator 方法。尽管如此，我们有其他方法可以遍历普通对象，例如使用 Object.keys()、Object.values() 或第三方库。