JS循环遍历JSON数据的方法

以下是详细的讲解"JS循环遍历JSON数据的方法"的完整攻略：

1. 解析JSON数据

在JS中，可以通过JSON.parse将字符串转换为JSON对象，也可以直接将JSON数据引入JS文件中，得到一个JSON对象。解析成功后，我们即可对JSON数据进行操作。

1.1 解析字符串为JSON对象

const jsonData = '{"name": "Lucy", "age":26, "job": "developer"}';
const jsonObj = JSON.parse(jsonData);
console.log(jsonObj); 
/*
输出：{
  name: 'Lucy',
  age: 26,
  job: 'developer'
}
*/

1.2 引入JSON数据，得到JSON对象

可以通过简单地将JSON数据引入到JS文件中来获取JSON对象，以下是一个示例：

// data.json文件内容
{
  "name": "Tom",
  "age": 33,
  "job": "manager",
  "hobby": [
    "travel",
    "music"
  ],
  "location": {
    "province": "Guangdong",
    "city": "Guangzhou"
  }
}

// 引入data.json文件
import data from './data.json'; 
console.log(data);
/*
{
  name: 'Tom',
  age: 33,
  job: 'manager',
  hobby: [ 'travel', 'music' ],
  location: { province: 'Guangdong', city: 'Guangzhou' }
}
*/

2. 遍历JSON数据

在得到JSON对象后，我们需要进行遍历操作，以获得其中所需的数据。

2.1 for...in循环

for...in语句可以遍历JSON对象中所有可枚举属性，并进行操作。

const person = {name: 'Lucy', age: 26, job: 'developer'};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}
/*
输出：
name: Lucy
age: 26
job: developer
*/

2.2 forEach方法

使用forEach方法可以遍历JSON中的数组部分。

const arr = [1, 2, 3, 4, 5];
arr.forEach(item => console.log(item)); // 输出：1 2 3 4 5

对于JSON中的数组部分，也可以通过forEach方法进行遍历：

const data = {
  "hobby": ["travel", "music", "reading"]
};
data.hobby.forEach(item => console.log(item)); 
// 输出： travel music reading

3. 其他操作

除了上述两种遍历方法以外，可以根据所需操作，使用其它方法。以下是一些常用操作：

3.1 根据属性名获取对应值

const person = {name: 'Lucy', age: 26, job: 'developer'};
console.log(person.name); // 输出：Lucy

// 或者使用[]语法获取属性值
console.log(person['job']); // 输出：developer

3.2 将JSON对象转化为数组

可以使用Object.keys将JSON对象转化为数组。

const person = {name: 'Lucy', age: 26, job: 'developer'};
const arr = Object.keys(person).map(key => person[key]);
console.log(arr); // 输出：[ 'Lucy', 26, 'developer' ]

示例

在以下示例中，我们得到一个JSON对象，其中包含了一些城市信息。我们需要遍历其中的所有城市，并输出其名称和人口数量。

// city.json文件内容示例
{
  "Beijing": {"population": 21550000, "area": 16411},
  "Shanghai": {"population": 24203000, "area": 6341},
  "Guangzhou": {"population": 14493000, "area": 7434},
  "Shenzhen": {"population": 13035000, "area": 1996},
  "Chongqing": {"population": 30752000, "area": 82400}
}

// 引入city.json文件
import cityData from './city.json';
for (let key in cityData) {
  console.log(`city: ${key}, population: ${cityData[key].population}`);
}
/*
输出：
city: Beijing, population: 21550000
city: Shanghai, population: 24203000
city: Guangzhou, population: 14493000
city: Shenzhen, population: 13035000
city: Chongqing, population: 30752000
*/

另一个示例：我们将一个由多个JSON数据组成的数据集合进行遍历，并输出所需的内容。

// data.json文件内容示例
{
  "data": [
    {
      "id": "001",
      "name": "Tom",
      "age": 28,
      "city": "Shanghai",
      "hobby": ["reading", "swimming"]
    },
    {
      "id": "002",
      "name": "Lucy",
      "age": 31,
      "city": "Beijing",
      "hobby": ["travel", "music", "shopping"]
    }
  ]
}

// 引入data.json文件
import data from './data.json';
const {data: dataList} = data;
dataList.forEach(item => {
  console.log(`Name: ${item.name}, Age: ${item.age}, Hobby: ${item.hobby}`);
});
/*
输出：
Name: Tom, Age: 28, Hobby: reading,swimming
Name: Lucy, Age: 31, Hobby: travel,music,shopping
*/

以上就是关于"JS循环遍历JSON数据的方法"的完整攻略了。希望对你有所帮助！