如何遍历json的所有属性值

如何遍历JSON的所有属性值：从基础到高级的全面指南

在JavaScript开发中，处理JSON（JavaScript Object Notation）数据是一项非常常见的任务，JSON以其轻量级、易读和易于解析的特性，成为数据交换的首选格式，当我们需要从复杂的JSON对象中提取或处理所有属性值时，如何高效、全面地遍历这些属性就成为了一个关键问题，本文将详细介绍几种遍历JSON所有属性值的方法，从基础的循环到高级的递归和现代ES6+特性,帮助你应对各种场景。

理解JSON数据结构

在开始遍历之前，我们首先要明确JSON的基本结构,JSON数据可以是：

对象（Object）：由键值对组成，用花括号包围，如 {"name": "张三", "age": 30}。
数组（Array）：有序的值列表，用方括号 [] 包围，如 [{"name": "李四"}, {"name": "王五"}]。
值（Value）：可以是字符串、数字、布尔值、null,甚至是对象或数组。

遍历JSON属性值，主要针对的是其对象部分,因为数组通常通过索引遍历。

基础遍历方法

使用 `for...in` 循环

for...in 循环用于遍历对象的可枚举属性（包括继承的可枚举属性，但通常我们更关心对象自身的属性）。

const person = {
  name: "张三",
  age: 30,
  city: "北京"
};
for (let key in person) {
  if (person.hasOwnProperty(key)) { // 确保是对象自身的属性
    console.log(key + ": " + person[key]);
  }
}

输出：

name: 张三
age: 30
city: 北京

优点：

语法简洁,直接遍历对象的键。
可以遍历对象原型链上的属性（配合 hasOwnProperty 过滤）。

缺点：

遍历顺序不一定按照属性定义的顺序（尽管现代JavaScript引擎大多保持插入顺序）。
会遍历到可枚举的继承属性,需要额外判断。

使用 `Object.keys()`、`Object.values()` 和 `Object.entries()`

ES6引入了这些静态方法，提供了更直接的方式来获取对象的键、值或键值对数组。

Object.keys(obj)：返回一个包含对象自身可枚举属性键的数组。
Object.values(obj)：返回一个包含对象自身可 enumerable 属性值的数组。
Object.entries(obj)：返回一个包含对象自身可枚举属性的键值对数组的数组，每个键值对是一个 [key, value] 数组。

示例：

const person = {
  name: "张三",
  age: 30,
  city: "北京"
};
// 遍历键
Object.keys(person).forEach(key => {
  console.log(key + ": " + person[key]);
});
// 直接遍历值
Object.values(person).forEach(value => {
  console.log(value);
});
// 遍历键值对
Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

优点：

语法清晰,代码可读性高。
Object.values() 和 Object.entries() 直接提供所需信息,无需额外访问。
只遍历对象自身的可枚举属性，无需 hasOwnProperty 判断。

缺点：

返回的是数组，如果对象属性非常多，可能会占用较多内存（但对于大多数应用场景影响不大）。

处理嵌套JSON与递归遍历

当JSON对象包含嵌套的对象或数组时，基础的遍历方法可能无法触及所有层级的属性值，这时,递归遍历就派上了用场。

递归遍历所有属性值

function getAllValues(obj, result = []) {
  if (typeof obj !== 'object' || obj === null) {
    // 如果是基本类型，直接加入结果数组
    result.push(obj);
    return result;
  }
  if (Array.isArray(obj)) {
    // 如果是数组，遍历每个元素
    obj.forEach(item => getAllValues(item, result));
  } else {
    // 如果是对象，遍历每个属性值
    Object.values(obj).forEach(value => getAllValues(value, result));
  }
  return result;
}
const complexData = {
  name: "项目",
  version: 1.0,
  author: {
    name: "李四",
    contact: {
      email: "lisi@example.com",
      phone: "1234567890"
    }
  },
  features: ["登录", "注册", "设置"],
  nullValue: null
};
const allValues = getAllValues(complexData);
console.log(allValues);

输出：

["项目", 1, "李四", "lisi@example.com", "1234567890", "登录", "注册", "设置", null]

工作原理：

函数接收一个对象/数组和可选的结果数组。
如果当前值不是对象或null（即基本类型）,则将其加入结果数组。
如果是数组,则递归遍历数组中的每个元素。
如果是对象，则获取其所有值，并对每个值递归调用 getAllValues。
最终返回收集了所有基本类型值的结果数组。

优点：

能够处理任意深度的嵌套结构。
可以灵活收集所有值或进行其他处理。

缺点：

递归深度过大时可能导致栈溢出（但对于大多数JSON数据结构来说，嵌套深度不会达到极限）。
需要明确处理数组的情况。

使用现代JavaScript特性：`for...of` 与生成器

结合 for...of 循环和生成器（Generator），可以创建更灵活、更惰性的遍历方式。

使用生成器递归遍历

function* getAllValuesGenerator(obj) {
  if (typeof obj !== 'object' || obj === null) {
    yield obj;
    return;
  }
  if (Array.isArray(obj)) {
    for (const item of obj) {
      yield* getAllValuesGenerator(item);
    }
  } else {
    for (const value of Object.values(obj)) {
      yield* getAllValuesGenerator(value);
    }
  }
}
const complexData = {
  name: "项目",
  version: 1.0,
  author: {
    name: "李四",
    contact: {
      email: "lisi@example.com",
      phone: "1234567890"
    }
  },
  features: ["登录", "注册", "设置"],
  nullValue: null
};
for (const value of getAllValuesGenerator(complexData)) {
  console.log(value);
}

优点：

生成器是惰性的，只有在需要时才计算下一个值,节省内存。
代码结构清晰,易于理解和扩展。

缺点：

生成器语法相对复杂一些。
同样需要注意递归深度问题。

处理特殊情况

Symbol属性：上述方法（for...in、Object.keys()等）默认不会遍历Symbol类型的属性，如果需要遍历Symbol属性，可以使用 Object.getOwnPropertySymbols()。
```
const sym = Symbol('symbolKey');
const obj = { a: 1, [sym]: 2 };
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(symbolKey)]
```
不可枚举属性：Object.keys() 和 for...in 都不会遍历不可枚举属性，如果需要遍历所有属性（包括不可枚举的），可以使用 Object.getOwnPropertyNames() 和 Reflect.ownKeys()。

循环引用：如果JSON对象中存在循环引用（即对象的某个属性直接或间接指向了对象本身），直接递归遍历会导致无限循环和栈溢出,处理循环引用需要额外的标记机制。

function getAllValuesSafe(obj, result = [], seen = new WeakSet()) {
  if (typeof obj !== 'object' || obj === null) {
    result.push(obj);
    return result;
  }
  if (seen.has(obj)) {
    result.push('[Circular]'); // 标记循环引用
    return result;
  }
  seen.add(obj);
  if (Array.isArray(obj)) {
    obj.forEach(item => getAllValuesSafe(item, result, seen));
  } else {
    Object.values(obj).forEach(value => getAllValuesSafe(value, result, seen));
  }
  return result;
}

总结与选择建议

方法	适用场景	优点	缺点
`for...in`	简单对象遍历，需考虑原型链	语法简单	可能遍历继承属性，顺序不确定

正文

如何遍历json的所有属性值