js如何遍历JSON对象 JSON对象遍历的4种实用方案

在js开发中，JSON对象是最常用的数据格式之一，无论是接口返回的数据还是本地存储的配置信息，大多都以JSON结构存在。遍历JSON对象获取所需数据是开发者的必备技能，不同的遍历方式适配不同的数据结构，下面介绍4种常用的遍历方案。

方案一：for...in循环遍历普通JSON对象

for...in是js原生支持的遍历对象属性的方法，适合遍历普通的键值对JSON对象，会遍历对象自身和继承的可枚举属性，实际使用时通常需要配合hasOwnProperty过滤继承属性。

// 普通JSON对象示例
const userJson = {
  name: '张三',
  age: 25,
  city: '北京'
};

// 使用for...in遍历
for (let key in userJson) {
  // 过滤继承的属性
  if (userJson.hasOwnProperty(key)) {
    console.log(`键名：${key}，键值：${userJson[key]}`);
  }
}

方案二：Object.keys()结合forEach遍历

Object.keys()会返回对象自身所有可枚举属性的键名组成的数组，之后可以结合数组的forEach方法遍历，这种方式只会遍历对象自身的属性，不需要额外过滤继承属性，使用起来更简洁。

const productJson = {
  id: 1001,
  title: '无线鼠标',
  price: 89,
  stock: 200
};

// 获取所有键名数组后遍历
Object.keys(productJson).forEach(key => {
  console.log(`属性${key}的值是：${productJson[key]}`);
});

方案三：for...of遍历JSON数组

如果JSON数据是数组结构，或者JSON对象内部嵌套了数组，可以使用for...of循环遍历数组元素，这种方式语法更简洁，支持直接获取数组的每一项元素。

// JSON数组示例
const studentList = [
  { name: '李四', score: 92 },
  { name: '王五', score: 88 },
  { name: '赵六', score: 95 }
];

// 使用for...of遍历数组
for (let student of studentList) {
  console.log(`学生姓名：${student.name}，成绩：${student.score}`);
}

方案四：递归遍历嵌套JSON对象

当JSON对象存在多层嵌套结构时，普通的遍历方式无法获取深层数据，此时可以使用递归的方式，逐层遍历对象的每个属性，遇到子对象或子数组就继续递归遍历。

// 嵌套JSON对象示例
const deptJson = {
  deptName: '技术部',
  leader: '小明',
  members: [
    { name: '小红', role: '前端' },
    { name: '小刚', role: '后端' }
  ],
  subDept: {
    deptName: '测试组',
    leader: '小华'
  }
};

// 递归遍历函数
function traverseJson(obj) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      const value = obj[key];
      // 判断如果是对象或数组，继续递归
      if (typeof value === 'object' && value !== null) {
        console.log(`进入${key}的子结构`);
        traverseJson(value);
      } else {
        console.log(`键：${key}，值：${value}`);
      }
    }
  }
}

// 调用递归函数
traverseJson(deptJson);

不同方案的选择建议

实际开发中可以根据JSON结构选择合适的遍历方式：普通单层对象优先用Object.keys结合forEach，代码更简洁；需要兼容旧环境或者要遍历继承属性时用for...in；数组结构的JSON用for...of更高效；多层嵌套的复杂结构则必须使用递归遍历。掌握这4种方案基本可以覆盖所有JSON对象遍历的场景。

jsJSON对象遍历for...infor...ofObject.keys修改时间：2026-06-09 02:51:18