JS 中 for-of 循环怎么遍历数组和可迭代对象-js教程-PHP中文网

for-of 是 javascript 中用于遍历可迭代对象的循环语法，直接获取元素值，底层调用 [symbol.iterator]() 方法，适用于数组、字符串、map、set 等，不支持普通对象（需手动实现迭代协议）。

js 中 for-of 循环怎么遍历数组和可迭代对象

for-of 是 JavaScript 中专门用于遍历可迭代对象（iterable）的循环语法，它直接获取元素值，不关心索引，写法简洁、语义清晰。它底层调用对象的 [Symbol.iterator]() 方法，因此只适用于实现了该协议的对象，比如数组、字符串、Map、Set、类数组对象（需手动实现）、以及自定义可迭代对象。

遍历数组：最常用场景

数组原生支持迭代器协议，for-of 可直接拿到每个元素，无需下标或回调函数：

const arr = ['a', 'b', 'c'];
for (const item of arr) {
  console.log(item); // 'a' → 'b' → 'c'
}

如果需要同时访问索引和值，不能像 for-in 那样直接用，但可以配合 entries()：

for (const [index, value] of arr.entries()) —— 返回 [0,'a'], [1,'b'], [2,'c']
for (const [key, value] of arr.keys()) —— 只遍历索引（0, 1, 2）
for (const value of arr.values()) —— 等价于直接 for-of（默认行为）

遍历其他内置可迭代对象

Map 和 Set 是典型可迭代对象，for-of 行为符合其数据结构特性：

Map：默认遍历 [key, value] 键值对
Set：默认遍历每个唯一值（无重复）
字符串：按 Unicode 字符（非字节）遍历，正确处理 emoji 和代理对

示例：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

const map = new Map([['x', 1], ['y', 2]]);
for (const [k, v] of map) {
  console.log(k, v); // 'x' 1 → 'y' 2
}
<p>const set = new Set(['a', 'b']);
for (const val of set) {
console.log(val); // 'a' → 'b'（顺序固定）
}</p><p>for (const char of '?‍?') {
console.log(char); // 输出完整 emoji，不是乱码</p>

遍历类数组对象或自定义可迭代对象

普通对象（plain object）默认不可被 for-of 遍历，会报错 TypeError: is not iterable。若想让它可遍历，需手动部署 [Symbol.iterator]：

const obj = { a: 1, b: 2, c: 3 };
obj[Symbol.iterator] = function* () {
  for (const key of Object.keys(this)) {
    yield this[key];
  }
};
<p>for (const val of obj) {
console.log(val); // 1 → 2 → 3
}</p>

常见类数组（如 arguments、NodeList）在现代 JS 中大多已原生支持 for-of（尤其在较新浏览器或启用了相关 polyfill 时），否则可用 Array.from() 或展开运算符转为数组再遍历。