在前端开发中，我们经常需要迭代一个对象的属性。可能是为了输出一些信息，也可能是为了对属性进行操作。本文将详细介绍如何迭代对象属性并提供一些示例代码。
Object.keys()
Object.keys() 方法返回一个包含给定对象所有可枚举属性名称的数组。
const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
console.log(keys); // ["a", "b", "c"]for...in 循环
for...in 循环是一种迭代对象属性的常见方式。它会遍历对象的每个可枚举属性，包括继承来的属性。因此，使用 for...in 循环时需要注意判断是否是对象自身的属性。
-- -------------------- ---- -------
----- --- - - -- -- -- -- -- - --
--- ------ --- -- ---- -
-- ------------------------- -
-------------------- --------------
-
-
-- -- -
-- -- -
-- -- -Object.entries()
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。
const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries);
// [["a", 1], ["b", 2], ["c", 3]]可以使用解构赋值来方便地获取每个属性的键和值。
const obj = { a: 1, b: 2, c: 3 };
for (const [key, value] of Object.entries(obj)) {
console.log(`${key}: ${value}`);
}
// a: 1
// b: 2
// c: 3Map 对象
Map 对象是一种键值对的集合，其中每个键都可以是任意类型，包括对象。它提供了多种方法来迭代键值对。
-- -------------------- ---- ------- ----- --- - --- ----- ----- --- -- -- - -- --- ----- --- --- ------------------- ---- -- - -------------------- ----------- --- -- -- - -- ------- -------- - -- -- -
可以使用解构赋值来方便地获取每个属性的键和值。
-- -------------------- ---- ------- ----- --- - --- ----- ----- --- -- -- - -- --- ----- --- --- --- ------ ----- ------ -- -------------- - -------------------- ----------- - -- -- - -- ------- -------- - -- -- -
小结
本文介绍了四种迭代对象属性的方式：Object.keys()、for...in 循环、Object.entries() 和 Map 对象。在实际开发中，要根据具体情况选择合适的方式来迭代对象属性，并注意避免不必要的迭代。
示例代码：https://codepen.io/ChatGPT/pen/yLBNJvR
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/7262