如何循环遍历 JSON 对象的 Key 值:全面指南
在 JavaScript 开发中,JSON(JavaScript Object Notation)是一种常用的数据交换格式,无论是处理 API 响应、配置文件还是前端数据状态,我们经常需要遍历 JSON 对象的 key 值(属性名),本文将详细介绍多种循环遍历 JSON 对象 key 值的方法,包括其原理、适用场景及代码示例,帮助你根据实际需求选择最合适的方案。
JSON 对象与 JavaScript 对象的关系
首先需要明确:JSON 对象本质上是 JavaScript 对象的子集,JSON 格式要求严格(如属性名必须用双引号包裹、值只能是字符串、数字、布尔值、数组、对象或 null),而 JavaScript 对象的语法更灵活(属性名可用单引号或双引号、值可以是任意 JavaScript 类型),但在实际开发中,我们通常将符合 JSON 格式的字符串通过 JSON.parse() 转换为 JavaScript 对象后,再进行遍历操作,本文讨论的“JSON 对象 key 值遍历”,实际指的是对 JavaScript 对象属性名的遍历。
循环遍历 JSON 对象 key 值的常用方法
方法 1:for...in 循环
for...in 是 JavaScript 中专门用于遍历对象可枚举属性(包括原型链上的属性)的循环语句,它是遍历对象 key 值最直接的方式之一。
基本语法
for (const key in object) {
// 执行逻辑,key 为当前属性名
}
示例代码
const jsonData = {
name: "Alice",
age: 25,
city: "New York"
};
for (const key in jsonData) {
console.log(key); // 输出:name, age, city
}
注意事项
-
遍历原型链属性:
for...in会遍历对象及其原型链上的所有可枚举属性,如果只想遍历对象自身的属性,需要结合Object.prototype.hasOwnProperty()判断:for (const key in jsonData) { if (Object.prototype.hasOwnProperty.call(jsonData, key)) { console.log(key); // 确保只遍历对象自身的 key } }(推荐使用
Object.hasOwn(obj, key)替代,它是 ES2022 引入的新方法,更简洁:if (Object.hasOwn(jsonData, key))) -
属性顺序:
for...in的遍历顺序不一定与对象属性的声明顺序一致(尽管现代 JavaScript 引擎通常按声明顺序遍历普通对象),如果需要严格按顺序遍历,建议使用Object.keys()+forEach(见方法 2)。
方法 2:Object.keys() + forEach 或 for...of
Object.keys() 方法返回一个包含对象自身可枚举属性名的数组(不包括原型链属性),配合数组遍历方法(如 forEach 或 for...of)可以更灵活地处理 key 值。
基本语法
const keys = Object.keys(object); // 获取对象自身的 key 数组
keys.forEach(key => {
// 执行逻辑
});
或使用 for...of 遍历 key 数组:
for (const key of Object.keys(object)) {
// 执行逻辑
}
示例代码
const jsonData = {
name: "Bob",
age: 30,
city: "London"
};
// 使用 forEach
Object.keys(jsonData).forEach(key => {
console.log(key); // 输出:name, age, city(按声明顺序)
});
// 使用 for...of
for (const key of Object.keys(jsonData)) {
console.log(key); // 输出:name, age, city
}
优点
- 只遍历对象自身的属性,无需手动过滤原型链属性。
- 遍历顺序与
Object.keys()返回的数组顺序一致(对普通对象而言,通常为声明顺序)。 - 可直接结合数组的其他方法(如
map、filter)进行链式操作。
方法 3:Object.entries() + forEach 或 for...of
Object.entries() 方法返回一个包含对象自身可枚举属性键值对的数组,每个元素是一个形如 [key, value] 的数组,如果同时需要 key 和 value,此方法更高效。
基本语法
Object.entries(object).forEach(([key, value]) => {
// 执行逻辑,key 为属性名,value 为属性值
});
或使用 for...of:
for (const [key, value] of Object.entries(object)) {
// 执行逻辑
}
示例代码
const jsonData = {
name: "Charlie",
age: 35,
city: "Paris"
};
Object.entries(jsonData).forEach(([key, value]) => {
console.log(`Key: ${key}, Value: ${value}`);
// 输出:
// Key: name, Value: Charlie
// Key: age, Value: 35
// Key: city, Value: Paris
});
适用场景
- 当遍历时需要同时获取 key 和 value 时,比
Object.keys()+ 额外访问object[key]更简洁。 - 适合需要处理键值对的逻辑(如格式化输出、数据转换等)。
方法 4:Object.getOwnPropertyNames()
Object.getOwnPropertyNames() 方法返回一个包含对象所有自身属性名的数组,包括不可枚举属性(如通过 Object.defineProperty 定义的可枚举属性为 false 的属性)。
基本语法
const keys = Object.getOwnPropertyNames(object);
keys.forEach(key => {
// 执行逻辑
});
示例代码
const jsonData = { a: 1 };
Object.defineProperty(jsonData, "b", {
value: 2,
enumerable: false // 不可枚举属性
});
console.log(Object.getOwnPropertyNames(jsonData)); // 输出:["a", "b"]
Object.getOwnPropertyNames(jsonData).forEach(key => {
console.log(key); // 输出:a, b(包括不可枚举属性)
});
与 Object.keys() 的区别
Object.keys()只返回可枚举属性,Object.getOwnPropertyNames()返回所有属性(包括不可枚举)。- 如果遍历目标是普通 JSON 对象(通常属性均为可枚举),
Object.keys()更常用;若涉及特殊属性(如内置对象或自定义不可枚举属性),可使用Object.getOwnPropertyNames()。
方法 5:Reflect.ownKeys()
Reflect.ownKeys() 是 ES6 引入的方法,返回一个包含对象所有自身属性名的数组,包括不可枚举属性和 Symbol 类型属性(其他方法如 Object.keys() 和 Object.getOwnPropertyNames() 均不返回 Symbol 属性)。
基本语法
Reflect.ownKeys(object).forEach(key => {
// 执行逻辑,key 可能是字符串或 Symbol
});
示例代码
const jsonData = { a: 1 };
const symbolKey = Symbol("secret");
jsonData[symbolKey] = "hidden"; // Symbol 属性
console.log(Reflect.ownKeys(jsonData)); // 输出:["a", Symbol(secret)]
Reflect.ownKeys(jsonData).forEach(key => {
console.log(key); // 输出:a, Symbol(secret)
});
适用场景
- 当对象包含 Symbol 类型的属性名时,这是唯一能遍历到所有自身属性的方法。
- 适用于需要全面处理对象所有属性(包括特殊类型)的场景。
方法对比与选择建议
| 方法 | 遍历范围 | 是否包含原型链属性 | 是否包含不可枚举属性 | 是否包含 Symbol 属性 | 遍历顺序 | 适用场景 |
|---|---|---|---|---|---|---|
for...in |
可枚举属性 | 是(需手动过滤) | 否 | 否 | 不保证(通常为声明顺序) | 遍历对象及其原型链的可枚举属性(需注意原型链污染) |
Object.keys() |
自身可枚举属性 | 否 | 否 | 否 | 声明顺序(普通对象) | 常规场景,只需自身可枚举属性 |
Object.entries() |
自身可枚举属性 | 否 | 否 | 否 | 声明顺序(普通对象) | 需同时获取 key 和 value |
Object.getOwnPropertyNames() |
所有自身属性 | 否 | 是 | 否 | 声明顺序 | 需包含不可枚举属性(非 Symbol) |
Reflect.ownKeys() |
所有自身属性 |



还没有评论,来说两句吧...