循环遍历 JSON 对象 JavaScript

JSON（JavaScript 对象表示法）是一种轻量级的数据交换格式，常用于前端和服务器之间的数据传输。在 JavaScript 中，我们可以使用循环遍历 JSON 对象，获取对象中所有的键值对或者值。

1. 基本语法

JSON 对象可以使用 JavaScript 的内置 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象。转换后的对象可以通过循环遍历获取对象中的所有属性和属性值。下面是基本的语法：

const jsonObj = JSON.parse(jsonStr);

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

使用 for...in 循环遍历 JSON 对象，获取对象中的所有属性和属性值。其中，jsonStr 是 JSON 字符串，jsonObj 是 JavaScript 对象。

2. 示例代码

下面是一个简单的 JSON 示例，包含一个数组和两个对象：

{
  "employees": [
    { "firstName": "John", "lastName": "Doe" },
    { "firstName": "Anna", "lastName": "Smith" },
    { "firstName": "Peter", "lastName": "Jones" }
  ],
  "company": {
    "name": "ABC Company",
    "address": "123 Main St",
    "city": "New York"
  }
}

我们可以使用 JSON.parse() 方法将该 JSON 字符串转换为 JavaScript 对象，并使用 for...in 循环遍历该对象：

const jsonStr = `{
  "employees": [
    { "firstName": "John", "lastName": "Doe" },
    { "firstName": "Anna", "lastName": "Smith" },
    { "firstName": "Peter", "lastName": "Jones" }
  ],
  "company": {
    "name": "ABC Company",
    "address": "123 Main St",
    "city": "New York"
  }
}`;

const jsonObj = JSON.parse(jsonStr);

for (let key in jsonObj) {
  if (Array.isArray(jsonObj[key])) {
    console.log(key + ':');
    for (let i = 0; i < jsonObj[key].length; i++) {
      console.log('  ' + jsonObj[key][i].firstName + ' ' + jsonObj[key][i].lastName);
    }
  } else {
    console.log(key + ': ' + jsonObj[key].name + ', ' + jsonObj[key].address + ', ' + jsonObj[key].city);
  }
}

以上代码使用 Array.isArray() 方法判断对象中的属性是否为数组，如果是数组就循环遍历数组中的元素并输出。否则，直接输出属性值。

输出结果如下所示：

employees:
  John Doe
  Anna Smith
  Peter Jones
company: ABC Company, 123 Main St, New York

3. 总结

循环遍历 JSON 对象是前端开发工作中经常会用到的技能。使用 for...in 循环可以轻松获取 JSON 对象中的所有属性和属性值，同时可以配合 Array.isArray() 判断属性是否为数组进行更加灵活的控制。