JavaScript遍历JSON

JSON（JavaScript Object Notation） 是一种轻量级的数据交换格式，常用于前端与后台之间的数据传输。在 JavaScript 中，使用 JSON.parse() 函数将字符串转换成 JSON 对象，JSON.stringify() 函数将 JSON 对象转换成字符串。

为了操作 JSON 数据，我们需要使用遍历方法来获取其中的值。下面列出了 JavaScript 中常用的遍历 JSON 数据的方法。

1. 使用for...in

for...in 循环可以遍历对象的属性。当遍历 JSON 数据时，可以通过 JSON.parse() 函数将 JSON 字符串转换成对象，然后使用 for...in 循环遍历对象的属性。

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

for(let key in jsonObj) {
  console.log(`${key}: ${jsonObj[key]}`);
}

输出：

name: John
age: 30
city: New York

2. 使用forEach

如果 JSON 数据是一个数组，我们可以使用 forEach() 方法遍历数组中的每个元素。

const jsonStr = '[{"name":"John", "age":30}, {"name":"Mary", "age":25}, {"name":"Tom", "age":35}]';
const jsonArray = JSON.parse(jsonStr);

jsonArray.forEach(item => {
  console.log(`${item.name} is ${item.age} years old.`);
});

输出：

John is 30 years old.
Mary is 25 years old.
Tom is 35 years old.

3. 使用Array.map()

如果需要将 JSON 数组中的每个元素都进行一遍操作，可以使用 Array.map() 方法。

const jsonStr = '[{"name":"John", "age":30}, {"name":"Mary", "age":25}, {"name":"Tom", "age":35}]';
const jsonArray = JSON.parse(jsonStr);

const resultArray = jsonArray.map(item => {
  return `${item.name} is ${item.age} years old.`;
});

console.log(resultArray);

输出：

["John is 30 years old.", "Mary is 25 years old.", "Tom is 35 years old."]

4. 使用Array.filter()

如果需要根据 JSON 数组中的某个字段进行筛选，可以使用 Array.filter() 方法。

const jsonStr = '[{"name":"John", "age":30}, {"name":"Mary", "age":25}, {"name":"Tom", "age":35}]';
const jsonArray = JSON.parse(jsonStr);

const resultArray = jsonArray.filter(item => {
  return item.age > 30;
});

console.log(resultArray);

输出：

[{name: "Tom", age: 35}]

以上就是 JavaScript 中常用的遍历 JSON 数据的方法。使用这些方法，我们可以在前端轻松地操作 JSON 数据，呈现出更好的用户体验。