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（比如你的数组）中的下一个元素的值。
说实话，我个人很喜欢用它来处理数组，因为它真的把重心放在了“值”本身。比如，你有一个水果列表：
立即学习“Java免费学习笔记（深入）”；
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的数: 6console.log('n--- 跳过偶数，只处理奇数 ---');for (const num of numbers) { if (num % 2 === 0) { continue; // 跳过当前迭代，进入下一次循环 } console.log(`处理奇数: ${num}`);}// 输出：// 处理奇数: 1// 处理奇数: 3// 处理奇数: 5// 处理奇数: 7// 处理奇数: 9
这种能力让 for...of 在处理复杂逻辑时显得更加直观和高效。我觉得，如果你的遍历逻辑中涉及到任何形式的提前退出或跳过，for...of 几乎是你的首选，它让代码的意图表达得非常清晰。
以上就是JavaScript如何用for…of遍历数组的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1509379.html
微信扫一扫 
支付宝扫一扫 
