JavaScript 中遍历对象属性的多种方法 可遍历不同类型属性
• 2026-02-24 • 类别: JavaScript • 阅读量:4
在 JavaScript 开发中,经常会遇到需要遍历对象的属性,因此需要熟练掌握在 JS 中遍历对象的方法。
在本文将系统讲解在 JavaScript 中的 7 种遍历对象属性的方法,涵盖基础循环、Object 内置方法、Reflect 方法等。
如果需要在线运行 JavaScript 代码可以使用本站工具:JS 在线编辑器、在线运行工具
对象属性的基本概念
在介绍具体的遍历方法之前,先介绍以下几个概念。
属性按键的类型分为:
- 字符串键属性:属性的名称是字符串形式,
- Symbol 属性:以
Symbol为键的属性,主要作用是避免属性名冲突。
属性按可枚举性分为:
- 可枚举属性:对象属性的
enumerable标志为true,默认创建的属性都是可枚举的。 - 可枚举属性:对象属性的
enumerable标志为false的属性。
属性按照属性的来源分为:
- 自身属性:在本对象内定义的属性。
- 继承属性:从原型链上继承的属性,如从
Object.prototype.toString继承的 toString 属性。
[!NOTE]
各个分类之间的属性存在交叉的关系。如字符串键属性可以是字符串键属性,也可以是不字符串键属性;Symbol 属性可以是字符串键属性,也可以是不字符串键属性。
在本文的介绍中,所有的示例都是基于如下的对象为基础进行介绍:
let obj = {
name: "张三",
age: 15,
class: "八年级"
};
[!IMPORTANT]
具体的选择那个方法,把你需要遍历什么类型的属性。
使用 for 循环循环遍历属性
使用 for 循环循环遍历属性是最基础的遍历方法。
使用 for...in 循环
for...in 是 JavaScript 中遍历对象最基础的方式,用于循环对象所有的可枚举的属性,包括继承的可枚举属性。
使用示例:
// 遍历 obj 的可枚举属性
for (let key in obj) {
// 使用 hasOwnProperty 过滤继承属性(如原型链上的 toString)
if (obj.hasOwnProperty(key)) {
console.log(key, obj[key]);
}
}
输出内容为:
> "name" "张三"
> "age" 15
> "class" "八年级"
for...of 循环
for...of 本身用于遍历可迭代对象(如数组、Set、Map),需要结合 Object.keys() 或 Object.entries() 方法使用。
[!WARNING]
普通对象默认是不可迭代的,因此不能使用
for...of方法遍历
使用示例:
// 使用 Object.keys() 获取全部属性名
for (let key of Object.keys(obj)) {
console.log(key, obj[key]);
}
// 使用 Object.entries() 获取全部的键值对
for (let [key, value] of Object.entries(obj)) {
console.log(key, value);
}
输出内容为:
> "name" "张三"
> "age" 15
> "class" "八年级"
使用 Object 静态方法
使用 Object 对象的静态方法能够更精准的遍历对象的属性。
使用 Object.keys()
Object.keys() 返回对象的自身可枚举属性名的数组(仅字符串键的属性,不含 Symbol 熟悉感、继承属性),是最经常使用的方法之一。
使用示例:
// 遍历属性名数组
Object.keys(obj).forEach(key => {
console.log(key, obj[key]);
});
// 仅获取属性名数组
console.log(Object.keys(obj));
输出信息为:
> "name" "张三"
> "age" 15
> "class" "八年级"
> Array ["name", "age", "class"]
使用 Object.entries()
Object.entries() 方法返回对象的自身可枚举属性键值对的数组,它可以同时获取属性名和属性值。
使用示例:
// 遍历键值对
Object.entries(obj).forEach(([key, value]) => {
console.log(key, value);
});
// 仅获取键值对的数组
console.log(Object.entries(obj));
输出信息为:
> "name" "张三"
> "age" 15
> "class" "八年级"
> Array [Array ["name", "张三"], Array ["age", 15], Array ["class", "八年级"]]
[!TIP]
使用
Object.values()可以获取自身可枚举属性的值的数组。
使用 Object.getOwnPropertyNames() 遍历属性
Object.getOwnPropertyNames() 方法返回该对象中定义的所有自身属性名的数组(包括不可枚举属性,但不含 Symbol 属性)。不可枚举属性可以认为是隐藏属性。
使用示例:
// 定义一个不可枚举属性
Object.defineProperty(obj, 'id', {
value: 100001,
enumerable: false // 不可枚举属性
});
// 遍历自身的所有属性,包括不可枚举属性
Object.getOwnPropertyNames(obj).forEach(key => {
console.log(key, obj[key]);
});
输出信息为:
> "name" "张三"
> "age" 15
> "class" "八年级"
> "id" 100001
Object.getOwnPropertySymbols()
Object.getOwnPropertySymbols() 是专门用于遍历对象的自身 Symbol 类型属性的方法,它会返回 Symbol 键数组。
使用示例:
// 定义 Symbol 属性
const address = Symbol('address');
obj[address] = 'symbol-山东省';
// 仅遍历 Symbol 属性
Object.getOwnPropertySymbols(obj).forEach(key => {
console.log(key, obj[key]); // 输出:Symbol(name) symbol-张三 | Symbol(class) symbol-八年级
});
输出信息为:
> Symbol(address) "symbol-山东省"
遍历无 Symbol 属性的对象:
console.log(Object.getOwnPropertySymbols({age: 1})); // 输出:[]
输出信息为:
> Array []
使用 Reflect.ownKeys() 方法
Reflect.ownKeys() 方法 ES6 中新增的一个方法,专门用于遍历对象的属性,它会返回对象的自身所有属性名的数组,其中包括字符串键属性、Symbol 属性、可枚举属性、不可枚举属性,是最全面的属性的遍历方法。
使用示例:
const address = Symbol('address');
obj[address] = 'symbol-山东省';
Object.defineProperty(obj, 'uuid', { value: 'cb5f0978-700d-49a0-b73a-119695278c1f', enumerable: false });
// 遍历所有自身属性
Reflect.ownKeys(obj).forEach(key => {
console.log(key, obj[key]);
});
输出信息为:
> "name" "张三"
> "age" 15
> "class" "八年级"
> "uuid" "cb5f0978-700d-49a0-b73a-119695278c1f"
> Symbol(address) "symbol-山东省"
总结
在本文中讲解了在 JavaScript 中使用 for 循环、Object 静态方法、Reflect 方法遍历对象的属性,可以遍历的属性包含字符串键属性、Symbol 属性、可枚举属性、不可枚举属性。可以根据自己需求选择。