深入了解 JavaScript 中的 for 循环

Question

如题所述

Answer 1

在 JavaScript 的世界里，for 循环种类繁多，既有经典的传统款式，也有ES6的创新之作。让我们一起探索这四款循环：简单for、for-in、forEach，以及功能强大的for-of。每一种都独具特色，适用于不同的场景。

简单for循环，它的身影常常出现在数组的行间，如这段示例代码：<code>const arr = [1, 2, 3]; for(let i = 0, len = arr.length; i < len; i++) { console.log(arr[i]);}</code>，它逐个揭示数组的秘密。
for-in，则是对象属性的探索者，尤其是对非数组对象，如：const person = {fname: "san", lname: "zhang", age: 99}; for(info in person) { console.log("person[" + info + "] = " + person[info]);}，它揭示的是对象的深层结构。
forEach，是数组的得力助手，它遍历每个元素并执行操作，如：arr.forEach(element => console.log(element))，让数组的每个成员都有机会发声。
for-of，则是一个跨界的天才，它能遍历可迭代对象，如：for(const item of arr) { console.log(item);}，无论是数组还是其他特殊类型，都能游刃有余。

然而，for-in并非总是完美无缺，它在遍历数组时，包括了非索引属性，如在示例中添加的非数组属性：arr.name = "Hello world"; for(index in arr) { console.log("arr[" + index + "] = " + arr[index]);}，需要注意的是，索引此时是字符串类型，而非数值。

for-in的局限性在于，它会遍历原型链，对于索引遍历，特别是稀疏数组，for-in只关注已存在的元素。为了优化，我们可以借助如arrayHasOwnIndex这样的辅助方法。

性能上，for-in并不如其他选项高效，特别是对于已知属性数量的情况。推荐使用for-of或props遍历，它们更为精准。

ES5的forEach，专注于数组元素，每个有效值都会被处理，但不会触及删除或未赋值的项。它的参数设计简洁：当前值、索引和数组本身。不过，forEach的遍历范围固定，对数组动态操作的影响有限。

当我们尝试遍历数组，如arr（已排除删除项）：a 0, b 3, c 10，你会注意到index为Number类型，无需额外声明。ES5提供了诸如every、some、filter、map和reduce等其他工具，各有其独特之处。

for-of的出现，无疑提升了for循环的灵活性，它支持break、continue和return，适用于数组、类数组对象、字符串、Map和Set。它的简洁和响应性是其亮点，但不适用于普通对象属性的遍历，此时，for-in依旧是我们的首选。

最后，iter.next() 的输出揭示了for-of的内在机制：{ value: 'a', done: false }, { value: 'b', done: false }, { value: 'c', done: false }, { value: undefined, done: true }。这部分内容我们将深入解析，敬请期待后续的专题讨论。