JavaScript遍历对象的7种方式
注:纯手打,如有错误欢迎评论区交流!
转载请注明出处:https://blog.csdn.net/testleaf/article/details/145523427
编写此文是为了更好地学习前端知识,如果损害了有关人的利益,请联系删除!
本文章将不定时更新,敬请期待!!!
欢迎点赞、收藏、转发、关注,多谢!!!
目录
- 一、for...in 循环
- 二、Object.keys() 方法结合 forEach 方法
- 三、Object.values() 方法结合 forEach 方法
- 四、Object.entries() 方法结合 for...of 循环
- 五、Reflect.ownKeys() 方法结合 forEach 方法
- 六、Object.getOwnPropertyNames() 方法结合 forEach 方法
- 七、Object.getOwnPropertySymbols() 方法结合 forEach 方法
一、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]}`);
});