js怎么取得json中键名

JavaScript 如何获取 JSON 对象中的键名

在 JavaScript 开发中，JSON（JavaScript Object Notation）是一种常用的数据交换格式，它以键值对的形式存储数据，很多时候我们需要遍历 JSON 对象，获取其中的所有键名（key），以便进行数据处理、条件判断或动态展示，本文将详细介绍几种在 JavaScript 中获取 JSON 对象键名的方法,并附上代码示例和注意事项。

JSON 对象与 JavaScript 对象的关系

首先需要明确：JSON 本质是一种字符串格式，而 JavaScript 中的对象（Object）是一种数据结构，当我们说“JSON 对象”时,通常指两种情况：

1. 符合 JSON 格式的字符串：如 '{"name": "张三", "age": 18}'，需要先通过 JSON.parse() 转换为 JavaScript 对象才能操作。
2. JavaScript 对象：如 {"name": "张三", "age": 18},这是可以直接操作的对象。

本文讨论的是第二种情况（JavaScript 对象）中获取键名的方法,第一种情况需先解析为对象再操作。

获取 JSON 对象键名的常用方法

方法 1：使用 Object.keys()（推荐）

Object.keys() 是 ES5 引入的静态方法，返回一个包含对象自身可枚举属性键名的数组，这是最常用、最简洁的方式。

语法

Object.keys(obj)

• obj：要获取键名的对象。
• 返回值：字符串数组,包含对象自身的所有可枚举键名。

示例

const jsonObj = {
  name: "张三",
  age: 18,
  city: "北京"
};
const keys = Object.keys(jsonObj);
console.log(keys); // 输出: ["name", "age", "city"]

特点

• 只返回自身可枚举属性，不包含继承的属性和不可枚举属性（如 Symbol 类型键名，除非使用 Object.getOwnPropertySymbols()）。
• 适用于现代浏览器和 Node.js，兼容性良好（IE9 及以上支持）。

方法 2：使用 for...in 循环

for...in 循环用于遍历对象的可枚举属性（包括自身和继承的可枚举属性）,通过循环可以逐个获取键名。

语法

for (const key in obj) {
  // key 为当前遍历的键名
}

示例

const jsonObj = {
  name: "张三",
  age: 18,
  city: "北京"
};
for (const key in jsonObj) {
  console.log(key); // 依次输出: "name", "age", "city"
}

注意事项

• for...in 会遍历对象原型链上的可枚举属性，如果只需要自身属性，需要配合 Object.prototype.hasOwnProperty() 判断：

  for (const key in jsonObj) {
    if (jsonObj.hasOwnProperty(key)) {
      console.log(key); // 只输出自身属性
    }
  }

• 遍历顺序可能因引擎不同而异（现代 JavaScript 引擎通常按属性创建顺序遍历）。

方法 3：使用 Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 返回一个包含对象自身所有属性键名的数组（包括可枚举和不可枚举属性，但不包括继承属性）。

语法

Object.getOwnPropertyNames(obj)

示例

const jsonObj = {
  name: "张三",
  age: 18,
  city: "北京"
};
// 添加一个不可枚举属性（仅演示用）
Object.defineProperty(jsonObj, "gender", {
  value: "男",
  enumerable: false
});
const keys = Object.getOwnPropertyNames(jsonObj);
console.log(keys); // 输出: ["name", "age", "city", "gender"]

特点

• 包含不可枚举的自身属性（如通过 Object.defineProperty 定义的属性）。
• 不包含继承属性，适合需要获取“所有自身属性”的场景。

方法 4：使用 Reflect.ownKeys()（ES6）

Reflect.ownKeys() 是 ES6 新增的方法，返回一个包含对象自身所有属性键名的数组,包括：

• 字符串键名（可枚举和不可枚举）；
• Symbol 类型键名；
• 继承的 Symbol 键名（不，Reflect.ownKeys() 只返回自身属性，包括 Symbol 键名）。

语法

Reflect.ownKeys(obj)

示例

const jsonObj = {
  name: "张三",
  age: 18
};
// 添加 Symbol 键名
const symbolKey = Symbol("id");
jsonObj[symbolKey] = 123;
const keys = Reflect.ownKeys(jsonObj);
console.log(keys); // 输出: ["name", "age", Symbol(id)]

特点

• 最全面的方法，能获取所有类型的自身属性（字符串、Symbol、可枚举、不可枚举）。
• 适用于需要处理复杂属性的场景（如 Symbol 键名）。

处理 JSON 字符串的情况

如果数据是 JSON 格式的字符串（如从 API 获取的响应），需要先用 JSON.parse() 转换为 JavaScript 对象,再使用上述方法：

const jsonString = '{"name": "李四", "age": 20, "city": "上海"}';
// 1. 解析为 JavaScript 对象
const jsonObj = JSON.parse(jsonString);
// 2. 获取键名
const keys = Object.keys(jsonObj);
console.log(keys); // 输出: ["name", "age", "city"]

方法对比与选择

注意事项

1. JSON 键名必须加双引号
   JSON 规范要求键名必须使用双引号（），单引号（）是无效的。{"name": "张三"} 是合法的，{'name': '张三'} 是非法的。

2. 避免遍历原型链属性
   使用 for...in 时，如果对象继承自其他对象（如通过构造函数创建），可能会遍历到原型链上的属性，建议用 hasOwnProperty 过滤：

   for (const key in jsonObj) {
     if (Object.prototype.hasOwnProperty.call(jsonObj, key)) {
       console.log(key);
     }
   }

3. Symbol 键名的处理
   如果对象可能包含 Symbol 类型的键名（如 Symbol.iterator），需使用 Reflect.ownKeys() 或 Object.getOwnPropertySymbols() 单独获取：

   const symbolKeys = Object.getOwnPropertySymbols(jsonObj);
   console.log(symbolKeys); // 输出: [Symbol(id)]

在 JavaScript 中获取 JSON 对象的键名,根据需求选择合适的方法：

• 日常开发：优先使用 Object.keys(),简洁高效；
• 需要过滤继承属性：用 for...in + hasOwnProperty；
• 需要获取不可枚举属性：用 Object.getOwnPropertyNames()；
• 需要处理 Symbol 键名：用 Reflect.ownKeys()。

这些方法，能让你更灵活地处理 JSON 数据,提升开发效率。