本文详解如何使用 es6 语法（如 `object.keys()`、`object.values()` 和 `for...of`）高效遍历对象中各属性对应的数组，支持按键名处理、按值遍历及深层数组元素访问，并附可运行示例与关键注意事项。
在 JavaScript（ES6+）中，当数据结构为「对象内嵌多个命名数组」（如 h3: [...], h4: [...], h5: [...]）时，直接对 Object.keys(obj) 使用 for...of 只能获取键名（如 "h3"），而非数组本身。要真正遍历每个数组的元素，需分两步：先获取键或值，再对每个数组进行二次遍历。
以下为三种常用且符合现代 JS 风格的实践方式：
✅ 方式一：遍历键名 + 访问对应数组（推荐 —— 保留语义信息）
for (const key of Object.keys(headings?.value || {})) {
const arr = headings.value[key];
console.log(`Array under "${key}":`, arr);
// 进一步遍历数组元素
for (const item of arr) {
console.log(` → ${item}`);
}
}✅ 优势：可区分 h3、h4 等语义层级，便于条件渲染或分类处理；?. 和 || {} 提供安全访问，避免 undefined 报错。
✅ 方式二：直接遍历所有数组值（简洁无键依赖）
for (const arr of Object.values(headings?.value || {})) {
if (Array.isArray(arr)) {
for (const item of arr) {
console.log(item);
}
}
}✅ 优势：代码更紧凑，适合仅需聚合全部文本内容的场景（如 SEO 提取、批量校验）；显式 Array.isArray() 增强健壮性。
✅ 方式三：函数式链式处理（一行提取所有字符串）
const allTexts = Object.values(headings?.value || {})
.filter(Array.isArray)
.flat();
console.log(allTexts);
// ["Best selling products", "Best Corporate Laptops", ..., "View All"]✅ 优势：声明式、不可变、易组合；.flat() 自动展平一层嵌套，适用于后续 .map() 或 .includes() 操作。
⚠️ 注意事项
- 空值防护必加：始终使用可选链 ?. 和空值合并 || {}，防止 headings 或 headings.value 为 null/undefined 导致运行时错误；
- 类型校验建议：Object.values() 返回的是混合类型数组（理论上可能含非数组值），生产环境建议用 Array.isArray() 做兜底判断；
- 性能提示：若数组极大且仅需首项，可用 arr[0] 替代完整 for...of；若需索引，改用 arr.forEach((item, i) => ...)；
- 兼容性说明：Object.keys()、Object.values()、for...of、可选链均属 ES2015+ 特性，现代浏览器及 Node.js ≥ 12 均原生支持。
掌握这三种模式，你就能灵活应对任意“对象 → 多数组”结构的数据消费场景，兼顾可读性、健壮性与扩展性。
