跳到主要内容

对象属性遍历

JavaScript 中遍历对象属性的多种方法。

for...in 循环

const obj = { a: 1, b: 2, c: 3 };

// 遍历可枚举属性(包括原型链)
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key, obj[key]);
}
}

Object.keys()

const obj = { a: 1, b: 2, c: 3 };

// 获取所有可枚举属性键
const keys = Object.keys(obj);
console.log(keys); // ['a', 'b', 'c']

// 遍历
Object.keys(obj).forEach(key => {
console.log(key, obj[key]);
});

Object.values()

const obj = { a: 1, b: 2, c: 3 };

// 获取所有可枚举属性值
const values = Object.values(obj);
console.log(values); // [1, 2, 3]

// 遍历值
Object.values(obj).forEach(value => {
console.log(value);
});

Object.entries()(推荐)

const obj = { a: 1, b: 2, c: 3 };

// 获取键值对数组
const entries = Object.entries(obj);
console.log(entries); // [['a', 1], ['b', 2], ['c', 3]]

// 遍历键值对
Object.entries(obj).forEach(([key, value]) => {
console.log(key, value);
});

// 转换为 Map
const map = new Map(Object.entries(obj));

// 转换对象(键名转换)
const doubled = Object.fromEntries(
Object.entries(obj).map(([key, value]) => [key, value * 2])
);
console.log(doubled); // { a: 2, b: 4, c: 6 }

for...of 循环

const obj = { a: 1, b: 2, c: 3 };

// 遍历键
for (const key of Object.keys(obj)) {
console.log(key);
}

// 遍历值
for (const value of Object.values(obj)) {
console.log(value);
}

// 遍历键值对
for (const [key, value] of Object.entries(obj)) {
console.log(key, value);
}

遍历不可枚举属性

const obj = {};
Object.defineProperty(obj, 'hidden', {
value: 'secret',
enumerable: false
});

// for...in 不会遍历 hidden
// Object.keys 不会返回 hidden

// 使用 Object.getOwnPropertyNames
const allKeys = Object.getOwnPropertyNames(obj);
console.log(allKeys); // ['hidden']

// 获取属性描述符
const descriptor = Object.getOwnPropertyDescriptor(obj, 'hidden');
console.log(descriptor);
// { value: 'secret', enumerable: false, configurable: true, writable: true }