JavaScriptfor...of遍历数组全解析

想要更高效地遍历JavaScript数组吗？本文将深入解析ES6引入的`for...of`循环，这是一种简洁直观的数组迭代方法，可以直接访问数组元素值，告别繁琐的索引管理。不同于`for...in`遍历键名，`for...of`专注于元素本身，避免访问到意外属性。通过`entries()`方法与解构赋值，还能轻松获取元素索引。此外，`for...of`支持`break`和`continue`语句，实现灵活的循环控制，相较于`forEach`更具优势。掌握`for...of`，让你的JavaScript代码更清晰、更高效！

1.for...of循环用于遍历数组元素值，语法简洁直观；2.获取索引需结合entries()方法与解构赋值；3.for...of遍历值而for...in遍历键；4.支持break和continue实现中断或跳过。在JavaScript中，for...of循环专为迭代可迭代对象设计，直接访问数组元素值，如const fruits = ['苹果', '香蕉', '橙子']可通过for (const fruit of fruits)依次输出元素。若需获取索引，可用students.entries()返回[index, value]并解构赋值。不同于for...in遍历对象属性名（包括原型链），for...of严格遍历数组元素值，避免意外访问额外属性。此外，for...of支持break提前终止循环或continue跳过当前项，适用于复杂逻辑控制，相较forEach更灵活高效。

在JavaScript里，如果你想遍历一个数组，for...of 循环绝对是个非常现代且直观的选择。它允许你直接获取数组中的每个元素的值，而不需要关心索引或者额外的回调函数，让代码读起来更清晰，也更符合我们日常理解的“遍历”概念。

解决方案

for...of 循环的设计理念就是为了迭代可迭代对象（iterable objects），而数组恰好就是其中一种。它的语法非常简洁：for (variable of iterable)。这里的 variable 会在每次迭代中被赋值为 iterable（比如你的数组）中的下一个元素的值。

说实话，我个人很喜欢用它来处理数组，因为它真的把重心放在了“值”本身。比如，你有一个水果列表：

const fruits = ['苹果', '香蕉', '橙子'];

for (const fruit of fruits) {
  console.log(fruit); // 依次输出：苹果, 香蕉, 橙子
}

你看，是不是非常直接？你不需要像传统的 for 循环那样去管理 i 的增减，也不用像 forEach 那样被限制在回调函数里，不能使用 break 或 continue。它就是简单地、优雅地把每个元素摆在你面前。

在 for...of 循环中如何获取索引？

这确实是一个常见的问题，尤其是当你习惯了传统 for 循环或者 forEach 循环，它们会直接提供索引。for...of 本身是直接遍历值的，它不直接提供索引。但别担心，JavaScript 提供了 entries() 方法，它可以返回一个迭代器，每次迭代会返回一个 [index, value] 的数组。结合解构赋值，就能很优雅地解决这个问题。

const students = ['小明', '小红', '小刚'];

// 使用 entries() 和解构赋值
for (const [index, student] of students.entries()) {
  console.log(`学生 ${index + 1}: ${student}`);
}
// 输出：
// 学生 1: 小明
// 学生 2: 小红
// 学生 3: 小刚

我觉得这种方式挺巧妙的，它并没有破坏 for...of 的核心设计理念，即遍历值，同时又提供了一种灵活的方式来获取额外的上下文信息（比如索引）。这比你手动维护一个计数器要好得多，代码也更具可读性。

for...of 与 for...in 的根本区别？

这是一个非常重要的点，也是很多初学者容易混淆的地方。尽管它们看起来有点像，但它们的用途和遍历对象完全不同。简单来说，for...of 遍历的是值，而 for...in 遍历的是键（key）或者说属性名。

for...in 主要用于遍历对象的可枚举属性，包括原型链上的属性。当你把它用在数组上时，它会返回数组的索引（字符串类型），而不是数组元素的值。而且，它还会遍历到数组对象上可能存在的其他属性，这在某些情况下可能会导致意想不到的结果。

const colors = ['red', 'green', 'blue'];
colors.customProperty = 'colorful'; // 给数组添加一个自定义属性

console.log('--- for...of 遍历数组 ---');
for (const color of colors) {
  console.log(color); // 输出：red, green, blue
}

console.log('\n--- for...in 遍历数组 ---');
for (const key in colors) {
  console.log(key); // 输出：0, 1, 2, customProperty
  console.log(typeof key); // 输出：string
  console.log(colors[key]); // 输出：red, green, blue, colorful
}

从上面的例子可以看出，for...of 严格地只关心数组的元素值，而 for...in 却把索引和我们额外添加的属性都遍历出来了。所以，如果你想遍历数组的元素，请务必使用 for...of。for...in 更适合用来遍历普通对象的属性。我个人在处理数组时，几乎不会考虑 for...in，它真的很容易让人掉坑里。

如何在 for...of 循环中中断或跳过？

这是 for...of 相对于 forEach 的一个显著优势。forEach 方法本身是无法中断的，你不能在它的回调函数中使用 break 或 continue 来跳出循环或跳过当前迭代。如果你需要这样的控制流，通常得用 try...catch 包裹一个抛出的错误，或者用 some() / every() 来模拟，但这都显得不够自然。

而 for...of 循环则完全支持 break 和 continue 语句，这让它在处理需要条件判断和提前终止的场景时，显得非常灵活和强大。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log('--- 找到第一个大于5的数后停止 ---');
for (const num of numbers) {
  if (num > 5) {
    console.log(`找到了第一个大于5的数: ${num}`);
    break; // 找到后立即停止整个循环
  }
  console.log(`当前数字: ${num}`);
}
// 输出：
// 当前数字: 1
// 当前数字: 2
// 当前数字: 3
// 当前数字: 4
// 当前数字: 5
// 找到了第一个大于5的数: 6

console.log('\n--- 跳过偶数，只处理奇数 ---');
for (const num of numbers) {
  if (num % 2 === 0) {
    continue; // 跳过当前迭代，进入下一次循环
  }
  console.log(`处理奇数: ${num}`);
}
// 输出：
// 处理奇数: 1
// 处理奇数: 3
// 处理奇数: 5
// 处理奇数: 7
// 处理奇数: 9

这种能力让 for...of 在处理复杂逻辑时显得更加直观和高效。我觉得，如果你的遍历逻辑中涉及到任何形式的提前退出或跳过，for...of 几乎是你的首选，它让代码的意图表达得非常清晰。

理论要掌握，实操不能落！以上关于《JavaScriptfor...of遍历数组全解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！