本文详解如何使用 es6 的 `object.keys()`、`object.values()` 和 `for...of` 循环高效遍历嵌套在对象中的多个数组，适用于处理如标题层级（h3/h4/h5）等结构化数据。
在 JavaScript ES6 中，若需遍历一个对象内部多个键对应的数组（例如 headings.value.h3、headings.value.h4 等），关键在于先获取对象的键或值，再逐个访问其数组内容。你原代码 for (let x of Object.keys(headings?.value)) 只输出了键名（如 "h3"），并未进一步遍历对应数组——这是常见误区。
✅ 正确做法分两步：
- 获取键名列表 → 使用 Object.keys(obj)；
- 按键取值并遍历数组 → 通过 obj[key] 获取数组，再用 for...of 或 .forEach() 展开。
以下是完整示例（基于你的数据结构）：
const headings = {
"value": {
"h3": ["Best selling products", "Best Corporate Laptops", "BEST PRICED LAPTOPS", "Shop By Brands"],
"h4": ["Lenovo Thinkpad Touchscreen Yoga X380/i5/8th gen/13.3\" screen", "Lenovo thinkpad T440S/core i7/4th gen/14\" screen"],
"h5": ["View All"]
}
};
// ✅ 方式一：遍历键名 + 数组内容（推荐：可同时使用 key 和 value）
console.log("【按标签类型遍历】");
for (const tag of Object.keys(headings.value)) {
const arr = headings.value[tag];
console.log(`→ ${tag.toUpperCase()} 标签共 ${arr.length} 项：`);
for (const text of arr) {
console.log(` • "${text}"`);
}
}
// ✅ 方式二：直接遍历所有数组（忽略键名）
console.log("\n【仅遍历所有数组内容】");
for (const arr of Object.values(headings.value)) {
arr.forEach(item => console.log(`- ${item}`));
}
// ✅ 方式三：扁平化所有字符串（一行展开全部文本）
const allTexts = Object.values(headings.value)
.flat(); // ES2019+ 支持，兼容性好；旧环境可用 [].concat(...arrays)
console.log("\n【扁平化结果】", allTexts);
// 输出: ["Best selling products", ..., "View All"]⚠️ 注意事项：
- 始终校验对象存在性（如 headings?.value），避免 Cannot convert undefined or null to object 错误；
- Object.keys() 和 Object.values() 返回的是新数组，不修改原对象；
- 若需保证遍历顺序（尤其涉及 DOM 渲染），注意：ES2015+ 规范规定对象属性遍历顺序为「数字键升序 → 字符串键插入顺序 → Symbol 键插入顺序」，因此 "h3"/"h4"/"h5" 将按定义顺序出现；
- 避免 for...in（会遍历原型链，且顺序不可靠），优先选用 Object.keys() + for...of 组合。
总结：面对对象内多数组结构，核心思路是「解构对象 → 提取值 → 二次遍历」。结合可选链（?.）、空值合并（??）与现代数组方法（.flat()、.flatMap()），可写出简洁、健壮、易维护的 ES6 遍历逻辑。
