JS简单循环遍历json数组的方法

JS简单循环遍历json数组的方法，通常使用for循环来实现。下面我将详细讲解以下步骤：

1. 获取JSON数组

首先，我们需要获取JSON数组，可以通过以下方式获取：

const jsonArr = [
    {
        "name": "张三",
        "age": 18,
        "gender": "男"
    },
    {
        "name": "李四",
        "age": 20,
        "gender": "女"
    },
    {
        "name": "王五",
        "age": 25,
        "gender": "男"
    }
];

2. 循环遍历JSON数组

接下来，我们可以通过for循环来遍历JSON数组，可以使用以下代码实现：

for (let i = 0; i < jsonArr.length; i++) {
    const item = jsonArr[i];
    console.log(item.name, item.age, item.gender);
}

上述代码会逐个输出JSON数组中每个对象的name、age、gender属性值。循环变量i从0开始，循环次数为JSON数组的长度，每次循环获取当前下标对应的JSON对象，从而可以访问到其各个属性。

3. 示例说明

下面，我们通过两个示例来说明如何使用for循环遍历JSON数组：

示例一

假设，我们有这样一个JSON数组，如下：

const studentArr = [
    {
        "name": "张三",
        "age": 18,
        "gender": "男",
        "score": {
            "Chinese": 89,
            "Math": 78,
            "English": 90
        }
    },
    {
        "name": "李四",
        "age": 20,
        "gender": "女",
        "score": {
            "Chinese": 90,
            "Math": 85,
            "English": 95
        }
    },
    {
        "name": "王五",
        "age": 25,
        "gender": "男",
        "score": {
            "Chinese": 80,
            "Math": 79,
            "English": 92
        }
    }
];

这个JSON数组中有每个学生的姓名，年龄，性别及各科成绩。如果我们需要打印出每个学生的姓名，年龄和总成绩，我们可以使用以下代码：

for (let i = 0; i < studentArr.length; i++) {
    const item = studentArr[i];
    const score = item.score;
    const totalScore = score.Chinese + score.Math + score.English;
    console.log(item.name, item.age, totalScore);
}

上述代码会逐个输出每个学生的姓名，年龄和总成绩。

示例二

假设我们有这样一个JSON数组，如下：

const fruitArr = [
    {
        "name": "苹果",
        "price": 5.8
    },
    {
        "name": "香蕉",
        "price": 2.5
    },
    {
        "name": "橙子",
        "price": 4.0
    }
];

这个JSON数组中有每种水果的名称和价格，如果我们需要计算出这些水果的总价格，我们可以使用以下代码：

let totalPrice = 0;
for (let i = 0; i < fruitArr.length; i++) {
    const item = fruitArr[i];
    totalPrice += item.price;
}
console.log(totalPrice);

上述代码会将每种水果的价格进行累加，并最终计算出这些水果的总价格。

以上就是JS简单循环遍历JSON数组的方法的完整攻略。