如何利用 Object.entries 配合 for...of 循环更直观地遍历对象键值对

Object.entries() 转二维数组配合 for...of 解构遍历更清晰安全，因其只返回对象自身可枚举键值对，自动过滤原型链属性，结构明确且语义直观；注意 null/undefined 会报错，非对象类型会被包装转换。

直接用 Object.entries() 转成二维数组，再用 for...of 解构遍历，比传统 for...in 或 Object.keys().forEach() 更清晰、更安全，还能天然避开原型链干扰。

为什么比 for...in 更直观

for...in 会遍历对象自身 + 原型链上的可枚举属性，容易出错；而 Object.entries() 只返回对象**自身可枚举的键值对数组**，结果确定、无副作用。

• 自动过滤掉继承来的属性（比如 toString）
• 每个元素是 [key, value] 形式，结构明确
• 配合解构赋值，语义一目了然

基础写法：解构 + for...of

一行解构，两行逻辑，读起来像“对每一对键和值做某事”：

const user = { name: 'Alice', age: 30, city: 'Beijing' };for (const [key, value] of Object.entries(user)) {  console.log(`${key}: ${value}`);}// 输出：// name: Alice// age: 30// city: Beijing

实用技巧：跳过、过滤或转换

可以在循环体内加条件，也可以提前用 filter、map 处理 entries 数组：

• 只处理字符串类型的值：if (typeof value === 'string') { ... }
• 跳过某个键：if (key === 'age') continue;
• 转成新对象（如只保留长度 > 2 的键名）：Object.fromEntries(Object.entries(obj).filter(([k]) => k.length > 2))

注意边界情况

Object.entries() 对 null/undefined 报错，对非对象类型（如数字、字符串）会先转对象再取键值对：

• Object.entries(null) → 抛错
• Object.entries('ab') → [['0', 'a'], ['1', 'b']]（字符串被包装为类数组对象）
• 空对象 {} 返回空数组 []，for...of 自然不执行