js遍历json的key

在JavaScript中，遍历JSON对象的键（key）有多种方法，以下是一些常用的方法及其基础概念：

1. 使用for...in循环

for...in循环可以用来遍历对象的可枚举属性，包括继承的属性。

const json = {
  "name": "John",
  "age": 30,
  "city": "New York"
};

for (let key in json) {
  if (json.hasOwnProperty(key)) { // 确保属性是对象自身的，而非继承的
    console.log(key + ": " + json[key]);
  }
}

2. 使用Object.keys()方法

Object.keys()方法返回一个包含对象自身所有可枚举属性名称的数组。

const json = {
  "name": "John",
  "age": 30,
  "city": "New York"
};

Object.keys(json).forEach(key => {
  console.log(key + ": " + json[key]);
});

3. 使用Object.entries()方法

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for...in循环（区别在于一个for-in循环也枚举原型链中的属性）的顺序一致（两者的主要区别是一个for-in循环还会枚举其原型链上的属性）。

const json = {
  "name": "John",
  "age": 30,
  "city": "New York"
};

Object.entries(json).forEach(([key, value]) => {
  console.log(key + ": " + value);
});

4. 使用for...of循环与Object.entries()

结合for...of循环和Object.entries()方法，可以更简洁地遍历键值对。

const json = {
  "name": "John",
  "age": 30,
  "city": "New York"
};

for (const [key, value] of Object.entries(json)) {
  console.log(key + ": " + value);
}

应用场景

• 数据处理：当你需要处理或转换JSON数据时，遍历键可以帮助你访问特定的数据片段。
• 动态UI生成：在前端开发中，根据JSON数据动态生成表单或列表。
• 数据验证：遍历JSON对象的键可以用于验证数据结构或内容。

注意事项

• 当使用for...in循环时，需要注意它会遍历对象及其原型链上的所有可枚举属性，通常需要使用hasOwnProperty()方法来过滤掉继承的属性。
• Object.keys()和Object.entries()只返回对象自身的可枚举属性，不包括继承的属性。

以上方法可以根据具体需求选择使用，例如，如果你只需要键而不关心值，可以使用Object.keys()；如果你需要同时处理键和值，Object.entries()会更加方便。