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

for-of循环专用于遍历可迭代对象（如数组、字符串、map、set等），直接获取值而非索引，支持解构赋值，不遍历原型链；普通对象需通过object.keys/values/entries转换后方可使用。

javascript 中 for-of 循环怎么遍历可迭代对象

for-of 循环专门用于遍历实现了 Symbol.iterator 方法的可迭代对象，比如数组、字符串、Map、Set、类数组对象（如 arguments 或 NodeList），甚至自定义的可迭代对象。

基础用法：直接取值

语法简洁，每次迭代拿到的是当前项的值，不是索引：

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // 10 → 20 → 30
}

对比 for-in（遍历属性名）和传统 for（需手动管理索引），for-of 更直观安全，不遍历原型链，也不依赖索引。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

配合解构，处理复杂结构

对 Map、Set 或含对象的数组，可直接解构赋值：

Map：遍历时默认返回 [key, value] 数组
Set：直接得到每个唯一值
数组嵌套对象：可解构提取字段

const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {
  console.log(key, value); // 'a' 1 → 'b' 2
}

const users = [{name: 'Alice'}, {name: 'Bob'}];
for (const {name} of users) {
  console.log(name); // 'Alice' → 'Bob'
}

遍历其他常见可迭代对象

无需转换，原生支持：

字符串：按 Unicode 字符（非字节）遍历，正确处理 emoji 和代理对
NodeList / arguments：DOM 查询结果或函数参数列表，可直接 for-of
生成器函数返回值：天然可迭代

for (const char of '?‍?ABC') {
  console.log(char); // '?‍?' 'A' 'B' 'C'
}

const buttons = document.querySelectorAll('button');
for (const btn of buttons) {
  btn.addEventListener('click', () => {...});
}

注意不可直接遍历普通对象

纯对象（如 {a: 1, b: 2}）默认不可迭代，会报错 TypeError: is not iterable。如需遍历，先转成可迭代形式：

Object.keys(obj) → 遍历键
Object.values(obj) → 遍历值
Object.entries(obj) → 遍历 [key, value]

const obj = {x: 10, y: 20};
for (const key of Object.keys(obj)) {
  console.log(key, obj[key]); // 'x' 10 → 'y' 20
}

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南