js中怎么遍历json字符串

JavaScript中遍历JSON字符串的实用方法与最佳实践

在JavaScript开发中,处理JSON（JavaScript Object Notation）数据是一项常见任务，JSON以其轻量级、易读的数据交换格式特性，成为前后端数据交互的主流选择，当我们需要从服务器获取JSON数据或处理本地JSON字符串时，遍历其中的数据结构是必不可少的一步，本文将详细介绍在JavaScript中遍历JSON字符串的各种方法，从基础到进阶，帮助你这一核心技能。

JSON字符串与JSON对象的区别

在开始遍历之前,我们需要明确一个重要概念：JSON字符串和JSON对象的区别，JSON字符串是用单引号或双引号包裹的文本数据，而JSON对象是JavaScript中的实际数据结构。

// JSON字符串
const jsonString = '{"name": "张三", "age": 30, "hobbies": ["阅读", "旅行"]}';
// JSON对象
const jsonObject = {
  name: "张三",
  age: 30,
  hobbies: ["阅读", "旅行"]
};

遍历JSON字符串之前,必须先将其转换为JSON对象，因为JavaScript的所有遍历方法都是针对对象的。

将JSON字符串转换为JSON对象

使用JSON.parse()方法可以将JSON字符串转换为JavaScript对象：

const jsonString = '{"name": "张三", "age": 30, "hobbies": ["阅读", "旅行"]}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject); // 输出转换后的对象

遍历JSON对象的方法

for...in循环

for...in循环用于遍历对象的可枚举属性（包括继承的可枚举属性）：

const jsonObject = {name: "张三", age: 30, hobbies: ["阅读", "旅行"]};
for (let key in jsonObject) {
  if (jsonObject.hasOwnProperty(key)) { // 确保是对象自身的属性
    console.log(`${key}: ${jsonObject[key]}`);
  }
}

输出：

name: 张三
age: 30
hobbies: 阅读,旅行

注意：for...in会遍历对象的所有可枚举属性，包括原型链上的属性，因此通常需要配合hasOwnProperty()方法检查是否是对象自身的属性。

Object.keys() + forEach

Object.keys()方法返回一个包含对象自身所有可枚举属性名的数组，然后可以结合forEach遍历：

const jsonObject = {name: "张三", age: 30, hobbies: ["阅读", "旅行"]};
Object.keys(jsonObject).forEach(key => {
  console.log(`${key}: ${jsonObject[key]}`);
});

这种方法更简洁,且不会遍历原型链上的属性。

Object.entries() + forEach

Object.entries()方法返回一个包含对象自身所有可枚举属性的键值对数组，每个键值对是一个包含两个元素的数组：

const jsonObject = {name: "张三", age: 30, hobbies: ["阅读", "旅行"]};
Object.entries(jsonObject).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

这种方法可以直接解构出键和值,代码更加简洁。

for...of循环 + Object.values()

Object.values()方法返回一个包含对象自身所有可枚举属性值的数组，可以结合for...of遍历：

const jsonObject = {name: "张三", age: 30, hobbies: ["阅读", "旅行"]};
for (const value of Object.values(jsonObject)) {
  console.log(value);
}

这种方法适用于只需要值而不需要键的场景。

递归遍历嵌套JSON对象

当JSON对象包含嵌套结构时,需要使用递归方法进行遍历：

function deepTraverse(obj) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object' && obj[key] !== null) {
        console.log(`发现嵌套对象: ${key}`);
        deepTraverse(obj[key]);
      } else {
        console.log(`${key}: ${obj[key]}`);
      }
    }
  }
}
const nestedJsonObject = {
  name: "张三",
  address: {
    city: "北京",
    district: "朝阳区"
  },
  hobbies: ["阅读", "旅行"]
};
deepTraverse(nestedJsonObject);

输出：

name: 张三
发现嵌套对象: address
city: 北京
district: 朝阳区
hobbies: 阅读,旅行

处理JSON数组

如果JSON字符串表示的是一个数组,转换后可以直接使用数组遍历方法：

const jsonArrayString = '[{"name": "张三", "age": 30}, {"name": "李四", "age": 25}]';
const jsonArray = JSON.parse(jsonArrayString);
// 使用forEach遍历数组
jsonArray.forEach(item => {
  console.log(`${item.name}: ${item.age}`);
});
// 使用for...of遍历数组
for (const item of jsonArray) {
  console.log(`${item.name}: ${item.age}`);
}

最佳实践与注意事项

错误处理：使用JSON.parse()时，如果字符串不符合JSON格式，会抛出异常，建议使用try-catch处理：

let jsonObject;
try {
  jsonObject = JSON.parse(jsonString);
} catch (error) {
  console.error("JSON解析失败:", error);
  return;
}

性能考虑：对于大型JSON对象，for...in可能比Object.keys()等方法稍慢，因为需要检查原型链，在性能敏感的场景下，推荐使用Object.keys()或Object.entries()。
安全性：不要直接解析来自不可信源的JSON字符串，可能存在安全风险（如原型污染），可以使用JSON.parse的第二个参数reviver函数进行过滤：

const safeParse = (str) => {
  return JSON.parse(str, (key, value) => {
    // 过滤掉函数等不安全的类型
    if (typeof value === 'function') {
      return undefined;
    }
    return value;
  });
};

现代JavaScript特性：在支持ES6+的环境中，推荐使用Object.entries()和for...of等现代语法，代码更简洁易读。

遍历JSON字符串是JavaScript开发中的基础技能,关键步骤包括：

使用JSON.parse()将JSON字符串转换为JavaScript对象
根据需求选择合适的遍历方法：
- 简单对象遍历：for...in、Object.keys()、Object.entries()
- 只需值：Object.values() + for...of
- 嵌套对象：递归遍历
- JSON数组：数组遍历方法
注意错误处理、性能和安全性问题