本文详解如何使用 es6 语法（如 `object.keys()`、`object.values()` 和 `for...of`）高效遍历对象中多个键对应的数组值，并提供可直接运行的示例与关键注意事项。
在 JavaScript ES6 中，若需遍历一个对象（如 headings.value）内多个属性（如 "h3"、"h4"、"h5"）所对应的数组，核心思路是：先获取键名或键值，再逐个访问并迭代其内部数组。直接对 Object.keys(...) 使用 for...of 只会遍历键名字符串（如 "h3"），而非数组内容——这正是原代码 console.log(x) 仅输出 "h3" "h4" "h5" 的原因。
✅ 正确做法：分层遍历（推荐）
首先通过 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"]
}
};
// ✅ 遍历每个键及其对应数组（带上下文）
for (const key of Object.keys(headings.value)) {
const arr = headings.value[key];
console.log(`Key: ${key}`);
for (const item of arr) {
console.log(` → ${item}`);
}
}✅ 简洁写法：只遍历所有数组值（忽略键名）
若无需区分 "h3" 还是 "h4"，仅需扁平化处理所有数组项，可结合 Object.values() 与嵌套循环：
// ✅ 所有数组元素一次性展开
for (const arr of Object.values(headings.value)) {
for (const item of arr) {
console.log(item); // 直接输出每个字符串
}
}也可借助 flat() 实现更函数式风格（ES2019+）：
const allItems = Object.values(headings.value).flat(); allItems.forEach(item => console.log(item));
⚠️ 注意事项
-
空值防护：生产环境务必检查 headings?.value 是否存在，避免 Cannot convert undefined or null to object 错误。推荐使用可选链 + 空值合并：
const valueObj = headings?.value ?? {}; for (const key of Object.keys(valueObj)) { /* ... */ } - 性能考量：Object.keys() 和 Object.values() 均返回新数组，对超大对象高频调用时可考虑 for...in（需配合 hasOwnProperty 过滤原型属性）。
- 顺序保证：ES2015+ 规范保证 Object.keys() / values() / entries() 按属性创建顺序返回（与对象字面量声明顺序一致），可安全依赖。
掌握这种“对象→键/值→数组→元素”的三层遍历逻辑，即可灵活处理任意结构的嵌套数组数据，适用于动态渲染标题、菜单、分类列表等典型前端场景。
