JavaScript遍历对象的7种方式

注：纯手打，如有错误欢迎评论区交流！
转载请注明出处：https://blog.youkuaiyun.com/testleaf/article/details/145523427
编写此文是为了更好地学习前端知识，如果损害了有关人的利益，请联系删除！
本文章将不定时更新，敬请期待！！！
欢迎点赞、收藏、转发、关注，多谢！！！

一、for…in 循环

for...in 循环用于遍历对象的可枚举属性，包括对象自身的属性以及继承的属性，但不包含 Symbol 类型的属性。
示例代码：

const person = {
    name: 'Alice',
    age: 25,
    occupation: 'Engineer'
};

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}

注意事项：由于 for...in 会遍历继承的属性，若只想遍历对象自身的属性，可以使用 hasOwnProperty 方法进行过滤。

for (const key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(`${key}: ${person[key]}`);
    }
}

二、Object.keys() 方法结合 forEach 方法

Object.keys() 方法会返回一个由对象的可枚举属性名组成的数组，然后可以使用 forEach 方法遍历这个数组。
示例代码：

const person = {
    name: 'Alice',
    age: 25,
    occupation: 'Engineer'
};

const keys = Object.keys(person);
keys.forEach(key => {
    console.log(`${key}: ${person[key]}`);
});

三、Object.values() 方法结合 forEach 方法

Object.values() 方法会返回一个由对象的可枚举属性值组成的数组，然后使用 forEach 方法遍历这个数组。不过这种方式只能获取到值，无法直接获取对应的键。
示例代码：

const person = {
    name: 'Alice',
    age: 25,
    occupation: 'Engineer'
};

const values = Object.values(person);
values.forEach(value => {
    console.log(value);
});

四、Object.entries() 方法结合 for…of 循环

Object.entries() 方法会返回一个由对象的键值对组成的二维数组，每个子数组包含一个键和对应的值，接着可以使用 for...of 循环遍历这个二维数组。
示例代码：

const person = {
    name: 'Alice',
    age: 25,
    occupation: 'Engineer'
};

for (const [key, value] of Object.entries(person)) {
    console.log(`${key}: ${value}`);
}

五、Reflect.ownKeys() 方法结合 forEach 方法

Reflect.ownKeys() 方法会返回一个由对象的所有属性名（包括 Symbol 类型的属性）组成的数组，然后使用 forEach 方法遍历这个数组。
示例代码：

const symbolKey = Symbol('symbolKey');
const person = {
    name: 'Alice',
    age: 25,
    [symbolKey]: 'Secret'
};

Reflect.ownKeys(person).forEach(key => {
    console.log(`${key}: ${person[key]}`);
});

六、Object.getOwnPropertyNames() 方法结合 forEach 方法

Object.getOwnPropertyNames() 方法会返回一个由对象自身的所有属性名（不包括 Symbol 类型的属性）组成的数组，再使用 forEach 方法遍历这个数组。
示例代码：

const person = {
    name: 'Alice',
    age: 25,
    occupation: 'Engineer'
};

Object.getOwnPropertyNames(person).forEach(key => {
    console.log(`${key}: ${person[key]}`);
});

七、Object.getOwnPropertySymbols() 方法结合 forEach 方法

如果需要专门遍历对象的 Symbol 类型的属性，可以使用 Object.getOwnPropertySymbols() 方法，它会返回一个由对象自身的 Symbol 类型属性组成的数组，然后使用 forEach 方法遍历该数组。
示例代码：

const symbolKey = Symbol('symbolKey');
const person = {
    [symbolKey]: 'Secret'
};

Object.getOwnPropertySymbols(person).forEach(symbol => {
    console.log(`${symbol.toString()}: ${person[symbol]}`);
});