在JavaScript中循环遍历JSON对象

JavaScript中循环遍历JSON对象

基础概念

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，在JavaScript中可以直接作为对象处理。遍历JSON对象实际上是遍历JavaScript对象。

遍历方法

1. for...in循环

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

for (let key in jsonObj) {
  if (jsonObj.hasOwnProperty(key)) {
    console.log(key + ": " + jsonObj[key]);
  }
}

2. Object.keys() + forEach

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

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

3. Object.entries() + for...of

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

for (const [key, value] of Object.entries(jsonObj)) {
  console.log(`${key}: ${value}`);
}

4. JSON.parse() + 遍历

如果JSON是字符串形式：

const jsonString = '{"name":"John","age":30,"city":"New York"}';
const jsonObj = JSON.parse(jsonString);

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

嵌套JSON对象的遍历

对于嵌套的JSON对象，可以使用递归：

function traverse(obj) {
  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      traverse(obj[key]);
    } else {
      console.log(key + ": " + obj[key]);
    }
  }
}

const nestedJson = {
  name: "John",
  details: {
    age: 30,
    address: {
      city: "New York",
      zip: "10001"
    }
  }
};

traverse(nestedJson);

注意事项

使用for...in时，建议加上hasOwnProperty()检查，以避免遍历到原型链上的属性
对于大型JSON对象，考虑性能问题，Object.keys()通常比for...in更快
如果需要保持顺序，使用Map或数组可能更合适，因为普通对象的属性顺序在ES6之前不保证

应用场景

处理API返回的JSON数据
解析配置文件
数据转换和映射
表单数据处理
构建动态UI组件

常见问题及解决方案

问题1：循环时遇到undefined值 原因：可能是JSON结构不符合预期或访问了不存在的属性解决：添加类型检查和默认值

Object.keys(jsonObj).forEach(key => {
  const value = jsonObj[key] || 'default';
  console.log(key + ": " + value);
});

问题2：循环嵌套对象时无限递归 原因：对象中存在循环引用解决：添加循环引用检测

function traverse(obj, visited = new Set()) {
  if (visited.has(obj)) return;
  visited.add(obj);
  
  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      traverse(obj[key], visited);
    } else {
      console.log(key + ": " + obj[key]);
    }
  }
}