js如何遍历一个对象

在 JavaScript 中，遍历对象是常见的操作，以下是四种主要方法及其适用场景：

1. for...in 循环const person = { name: "John", age: 30 };for (const key in person) { console.log(key); // 输出: "name", "age" console.log(person[key]); // 输出: "John", 30}

特点：遍历对象所有可枚举属性（包括原型链上的属性）。
注意：需配合 hasOwnProperty() 过滤原型属性，或使用 Object.create(null) 创建无原型对象。
适用场景：需快速遍历所有属性（包括继承属性）时。

2. Object.keys()const person = { name: "John", age: 30 };const keys = Object.keys(person); // ["name", "age"]keys.forEach(key => { console.log(key); // "name", "age" console.log(person[key]); // "John", 30});

特点：返回对象自身可枚举属性的键数组，不包含原型属性。
优势：结合数组方法（如 forEach、map）更灵活。
适用场景：仅需处理对象自身属性时。

3. Object.values()const person = { name: "John", age: 30 };const values = Object.values(person); // ["John", 30]values.forEach(value => console.log(value)); // "John", 30

特点：直接返回属性值的数组，忽略键。
适用场景：仅需操作属性值（如计算、渲染列表）。

4. Object.entries()const person = { name: "John", age: 30 };const entries = Object.entries(person); // [["name", "John"], ["age", 30]]entries.forEach(([key, value]) => { console.log(key, value); // "name" "John", "age" 30});

特点：返回 [key, value] 数组，便于解构赋值。
优势：同时需要键和值时更简洁。
适用场景：需同时访问键和值（如动态生成对象）。

选择方法的注意事项

原型属性：for...in 可能包含原型属性，其他方法（如 Object.keys()）仅处理自身属性。
性能：Object.keys() + forEach 在大多数情况下性能良好，for...in 在大型对象中可能较慢。
可枚举性：所有方法默认忽略不可枚举属性（如 Symbol 属性需用 Object.getOwnPropertySymbols()）。

总结

仅需键：Object.keys()。
仅需值：Object.values()。
需键值对：Object.entries()。
兼容原型属性：for...in（需过滤）。

根据需求选择合适方法，可提升代码可读性和效率。

您可能感兴趣问答

Collapsible

热门标签

热点问答