for…of 循环用于遍历可迭代对象，如数组、字符串、map、set 等。1. 它通过简洁的语法 for (const element of iterable) 直接获取每个元素；2. 支持自定义可迭代对象，通过实现 symbol.iterator 方法；3. 与 for…in 不同，for…of 遍历值而非属性名；4. 可用于数据处理、异步操作、dom 操作等场景；5. 应避免在需要索引、非可迭代对象或性能极端敏感的情况下使用；6. 可用 break 中断循环，continue 跳过当前项，return 退出函数及循环。
for...of 循环是 JavaScript 中遍历可迭代对象（Iterable objects）的利器。它能让你轻松访问数组、字符串、Map、Set 等数据结构中的元素，而无需手动管理索引。
解决方案
for...of 循环的语法非常简洁：
for (const element of iterable) { // 使用 element 做一些事情}
element：循环的每个迭代中，element 会被赋值为可迭代对象中的下一个值。iterable：你想要遍历的可迭代对象。
示例：遍历数组
const myArray = [1, 2, 3, 4, 5];for (const number of myArray) { console.log(number); // 输出 1, 2, 3, 4, 5}
示例：遍历字符串
const myString = "Hello";for (const character of myString) { console.log(character); // 输出 H, e, l, l, o}
示例：遍历 Map
Map 对象存储键值对。 for...of 循环会遍历 Map 中的每个键值对，以 [key, value] 的形式返回。
const myMap = new Map();myMap.set("name", "Alice");myMap.set("age", 30);for (const [key, value] of myMap) { console.log(`${key}: ${value}`); // 输出 name: Alice, age: 30}
示例：遍历 Set
Set 对象存储唯一的值。 for...of 循环会遍历 Set 中的每个值。
const mySet = new Set([1, 2, 3, 3, 4, 4, 5]); // Set 会自动去重for (const number of mySet) { console.log(number); // 输出 1, 2, 3, 4, 5}
与 for...in 的区别
for...of 和 for...in 经常被混淆，但它们用途不同。for...in 循环用于遍历对象的 属性名，而 for...of 循环用于遍历可迭代对象的 值。
const myObject = { a: 1, b: 2, c: 3 };// for...in 遍历属性名for (const key in myObject) { console.log(key); // 输出 a, b, c}// 注意：for...of 不能直接遍历普通对象，因为普通对象不是可迭代的// for (const value of myObject) { // 会报错// console.log(value);// }
自定义可迭代对象
你可以通过实现 Symbol.iterator 方法来使自定义对象可迭代。 这个方法需要返回一个迭代器对象，该迭代器对象必须具有 next() 方法。 next() 方法返回一个包含 value 和 done 属性的对象。
const myIterable = { data: [1, 2, 3], [Symbol.iterator]() { let index = 0; return { next: () => { if (index < this.data.length) { return { value: this.data[index++], done: false }; } else { return { value: undefined, done: true }; } }, }; },};for (const number of myIterable) { console.log(number); // 输出 1, 2, 3}
for...of 循环的优势在于它的简洁性和易用性，它能够清晰地表达遍历可迭代对象的意图，避免了手动管理索引的繁琐。
for...of 循环可以用于哪些实际场景？
数据处理： 遍历数组或集合来执行数据转换、过滤或聚合操作。异步操作： 结合 async/await 遍历异步数据流，例如从服务器获取的数据。DOM 操作： 遍历 DOM 元素集合，例如为每个元素添加事件监听器。状态管理： 遍历状态对象来更新 UI 或执行其他副作用。
在什么情况下应该避免使用 for...of 循环？
需要访问索引： 如果你需要访问当前元素的索引，for...of 循环不是最佳选择。可以使用传统的 for 循环或 Array.prototype.forEach() 方法。非可迭代对象： for...of 循环只能用于可迭代对象。如果尝试遍历非可迭代对象，会抛出错误。 需要使用 for...in (遍历键) 或 Object.keys/values/entries (转换为数组再遍历)。性能敏感场景： 在某些性能敏感的场景下，传统的 for 循环可能比 for...of 循环略快。 但通常情况下，for...of 循环的性能足够好，而且代码更易读。 性能优化应该基于实际测量，而不是盲目猜测。
如何提前中断 for...of 循环？
可以使用 break 语句提前中断 for...of 循环。 break 语句会立即退出循环，并将控制权转移到循环之后的代码。
const myArray = [1, 2, 3, 4, 5];for (const number of myArray) { if (number > 3) { break; // 当 number 大于 3 时，退出循环 } console.log(number); // 输出 1, 2, 3}
也可以使用 continue 语句跳过当前迭代，继续下一次迭代。 continue 语句会跳过循环体中剩余的代码，并立即开始下一次迭代。
const myArray = [1, 2, 3, 4, 5];for (const number of myArray) { if (number % 2 === 0) { continue; // 当 number 是偶数时，跳过本次迭代 } console.log(number); // 输出 1, 3, 5}
return 语句也可以用于提前退出循环，但 return 语句会退出整个函数，而不仅仅是循环。 因此，只有在循环位于函数内部，并且你想要同时退出循环和函数时，才应该使用 return 语句。
以上就是如何用for…of遍历可迭代对象？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1507395.html
微信扫一扫 
支付宝扫一扫 
