循环遍历 JSON 对象

在 Web 开发中，经常需要对 JSON 对象进行遍历和操作。在 jQuery 中，可以使用 .each() 方法对 JSON 对象进行循环遍历。

1. 循环遍历 JSON 对象

// 示例 JSON 对象
var data = [
    {
        "name": "John",
        "age": 30,
        "email": "john@example.com"
    },
    {
        "name": "Mary",
        "age": 25,
        "email": "mary@example.com"
    },
    {
        "name": "Jane",
        "age": 40,
        "email": "jane@example.com"
    }
];

// 遍历 JSON 对象
$.each(data, function(index, item){
    console.log(item.name + ", " + item.age + ", " + item.email);
});

该示例代码中定义了一个包含三个元素的 JSON 对象 data，通过 .each() 方法对 JSON 对象进行了遍历。循环时可以获取到当前遍历元素的索引 index 和对应的值 item。遍历结果输出如下：

John, 30, john@example.com
Mary, 25, mary@example.com
Jane, 40, jane@example.com

2. 循环遍历嵌套 JSON 对象

如果 JSON 对象中包含嵌套的子属性，可以通过多次 .each() 方法进行层层遍历。

// 示例 JSON 对象
var data = [
    {
        "name": "John",
        "age": 30,
        "email": "john@example.com",
        "address": {
            "city": "New York",
            "state": "NY",
            "zip": "10001"
        }
    },
    {
        "name": "Mary",
        "age": 25,
        "email": "mary@example.com",
        "address": {
            "city": "Los Angeles",
            "state": "CA",
            "zip": "90001"
        }
    }
];

// 遍历嵌套 JSON 对象
$.each(data, function(index, item){
    console.log(item.name + ", " + item.age + ", " + item.email);
    $.each(item.address, function(key, value){
        console.log("-- " + key + ": " + value);
    });
});

该示例代码中定义了一个包含两个元素的 JSON 对象 data，其中每个元素包含一个嵌套的子属性 address。通过嵌套两次的 .each() 方法对 JSON 对象进行了层层遍历，输出结果如下：

John, 30, john@example.com
-- city: New York
-- state: NY
-- zip: 10001
Mary, 25, mary@example.com
-- city: Los Angeles
-- state: CA
-- zip: 90001

3. 循环遍历 JSON 数组

除了遍历 JSON 对象，还可以遍历 JSON 数组。在 jQuery 中，可以使用 .each() 方法对 JSON 数组进行循环遍历，方法与遍历 JSON 对象相同。

// 示例 JSON 数组
var data = ["John", "Mary", "Jane"];

// 遍历 JSON 数组
$.each(data, function(index, item){
    console.log(index + ": " + item);
});

该示例代码中定义了一个包含三个元素的 JSON 数组 data，通过 .each() 方法对 JSON 数组进行了遍历，输出结果如下：

0: John
1: Mary
2: Jane

4. 循环遍历 JSON 键值对

如果需要遍历 JSON 对象的键值对，可以使用 JavaScript 的 for...in 循环语句。

// 示例 JSON 对象
var data = {
    "name": "John",
    "age": 30,
    "email": "john@example.com"
};

// 遍历 JSON 键值对
for(var key in data){
    console.log(key + ": " + data[key]);
}

该示例代码中定义了一个包含三个键值对的 JSON 对象 data，通过 for...in 循环语句对 JSON 对象进行了遍历，输出结果如下：

name: John
age: 30
email: john@example.com

总结

本文介绍了循环遍历 JSON 对象、嵌套 JSON 对象、JSON 数组、JSON 键值对的方法。在实际 Web 开发中，可以根据具体需求选择合适的方法进行操作。