for...of是JavaScript中遍历可迭代对象（如数组、字符串、Map、Set等）的语法，直接获取元素值；需索引时可用entries()配合解构；支持类数组对象，但不适用于普通对象；与for...in不同，后者遍历属性名而非值。
for...of 是 JavaScript 中专门用于遍历可迭代对象（如数组、字符串、Map、Set 等）的简洁语法，它直接获取元素值，不用像 for 或 for...in 那样操作索引或键名。
基本用法：遍历数组元素
最常见场景就是遍历数组中的每个值：
示例：
const fruits = ['苹果', '香蕉', '橙子'];
for (const fruit of fruits) {
console.log(fruit);
}
// 输出：
// 苹果
// 香蕉
// 橙子
注意：fruit 是每次循环的当前元素，类型和原数组中一致（字符串、数字、对象等），无需通过索引访问。
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
获取索引？用 entries() 配合解构
for...of 本身不提供索引，但数组的 entries() 方法返回一个可迭代的 [索引, 值] 对，配合解构即可同时拿到两者：
- 写法：
for (const [index, value] of arr.entries()) - 适合需要下标做判断、拼接、修改等操作的场景
示例：
const numbers = [10, 20, 30];
for (const [i, n] of numbers.entries()) {
console.log(`第 ${i} 项是 ${n}`);
}
// 输出：
// 第 0 项是 10
// 第 1 项是 20
// 第 2 项是 30
遍历其他类型数组（类数组/TypedArray）也适用
for...of 能正确处理 Uint8Array、arguments（函数内）、NodeList（DOM 查询结果）等类数组对象，只要它们实现了 [Symbol.iterator] 接口：
-
document.querySelectorAll('div')可直接用for...of遍历 DOM 元素 -
new Uint8Array([1, 2, 3])同样支持 - 普通对象（Object）不行——它不可迭代，需用
for...in或Object.keys()
和 for...in 的关键区别
别把 for...of 和 for...in 混用：
-
for...in遍历对象的**可枚举属性名（包括继承的）**，对数组会输出字符串索引（如 "0", "1"），还可能包含自定义属性 -
for...of遍历的是**值本身**，只走数组实际元素，顺序严格，更安全、语义更清晰
所以遍历数组内容，优先选 for...of，而不是 for...in。
