js遍历json数组

在JavaScript中，遍历JSON数组是一项非常常见的任务。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，通常用于前后端数据传输。JSON数组是由多个JSON对象组成的数组，每个对象包含一组键值对。为了处理这些数据，我们需要使用各种遍历方法来访问和操作数组中的每个元素。本文将详细介绍如何使用JavaScript遍历JSON数组，并探讨不同的遍历方法及其适用场景。

1. for 循环

for循环是最基本的遍历方法，适用于需要精确控制遍历过程的场景。通过for循环，我们可以使用数组的索引来访问每个元素。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

for (let i = 0; i < jsonArray.length; i++) {
    console.log(`Name: ${jsonArray[i].name}, Age: ${jsonArray[i].age}`);
}

在这个例子中，我们使用for循环遍历jsonArray数组，并通过jsonArray[i]访问每个对象。jsonArray[i].name和jsonArray[i].age分别获取对象的name和age属性。

2. for...of 循环

for...of循环是ES6引入的一种更简洁的遍历方法，它可以直接遍历数组中的元素，而不需要使用索引。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

for (const person of jsonArray) {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
}

在这个例子中，for...of循环直接遍历jsonArray数组中的每个对象，并将其赋值给person变量。person.name和person.age分别获取对象的name和age属性。

3. forEach 方法

forEach是数组对象的一个方法，它允许我们对数组中的每个元素执行一个回调函数。forEach方法不会返回新数组，而是直接对原数组进行操作。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

jsonArray.forEach(person => {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
});

在这个例子中，forEach方法遍历jsonArray数组，并对每个对象执行回调函数。回调函数中的person参数表示当前遍历的对象，person.name和person.age分别获取对象的name和age属性。

4. map 方法

map方法也是数组对象的一个方法，它与forEach类似，但map方法会返回一个新数组，新数组中的每个元素都是回调函数的返回值。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

const names = jsonArray.map(person => person.name);
console.log(names); // 输出: ["Alice", "Bob", "Charlie"]

在这个例子中，map方法遍历jsonArray数组，并对每个对象执行回调函数。回调函数返回对象的name属性，最终map方法返回一个包含所有name的新数组。

5. filter 方法

filter方法用于从数组中筛选出符合条件的元素，并返回一个新数组。filter方法的回调函数需要返回一个布尔值，表示当前元素是否应该被包含在新数组中。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

const adults = jsonArray.filter(person => person.age >= 30);
console.log(adults); // 输出: [{ "name": "Bob", "age": 30 }, { "name": "Charlie", "age": 35 }]

在这个例子中，filter方法遍历jsonArray数组，并对每个对象执行回调函数。回调函数返回true表示该对象符合条件（年龄大于等于30），最终filter方法返回一个包含所有符合条件的对象的新数组。

6. reduce 方法

reduce方法用于将数组中的所有元素累加或合并为一个值。reduce方法的回调函数接收两个参数：累加器（accumulator）和当前元素（currentValue）。回调函数需要返回累加器的值。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

const totalAge = jsonArray.reduce((accumulator, person) => accumulator + person.age, 0);
console.log(totalAge); // 输出: 90

在这个例子中，reduce方法遍历jsonArray数组，并对每个对象执行回调函数。回调函数将当前对象的age属性累加到accumulator中，最终reduce方法返回所有age的总和。

7. for...in 循环

for...in循环通常用于遍历对象的属性，但它也可以用于遍历数组的索引。需要注意的是，for...in循环会遍历数组的所有可枚举属性，包括原型链上的属性，因此在使用时需要谨慎。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

for (const index in jsonArray) {
    console.log(`Index: ${index}, Name: ${jsonArray[index].name}, Age: ${jsonArray[index].age}`);
}

在这个例子中，for...in循环遍历jsonArray数组的索引，并通过jsonArray[index]访问每个对象。jsonArray[index].name和jsonArray[index].age分别获取对象的name和age属性。

8. while 循环

while循环是一种基于条件的循环，它会在条件为真时重复执行循环体。while循环通常用于需要手动控制循环次数的场景。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

let i = 0;
while (i < jsonArray.length) {
    console.log(`Name: ${jsonArray[i].name}, Age: ${jsonArray[i].age}`);
    i++;
}

在这个例子中，while循环在i < jsonArray.length的条件下重复执行循环体。jsonArray[i].name和jsonArray[i].age分别获取对象的name和age属性。

9. do...while 循环

do...while循环与while循环类似，但do...while循环会先执行一次循环体，然后再检查条件。do...while循环适用于需要至少执行一次循环体的场景。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

let i = 0;
do {
    console.log(`Name: ${jsonArray[i].name}, Age: ${jsonArray[i].age}`);
    i++;
} while (i < jsonArray.length);

在这个例子中，do...while循环先执行一次循环体，然后在i < jsonArray.length的条件下重复执行循环体。jsonArray[i].name和jsonArray[i].age分别获取对象的name和age属性。

10. for...in 与 Object.keys() 结合

for...in循环通常用于遍历对象的属性，但结合Object.keys()方法，我们可以更安全地遍历对象的属性，而不必担心原型链上的属性。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

for (const index of Object.keys(jsonArray)) {
    console.log(`Index: ${index}, Name: ${jsonArray[index].name}, Age: ${jsonArray[index].age}`);
}

在这个例子中，Object.keys(jsonArray)返回jsonArray数组的索引数组，for...of循环遍历该索引数组，并通过jsonArray[index]访问每个对象。jsonArray[index].name和jsonArray[index].age分别获取对象的name和age属性。

11. for...of 与 Object.values() 结合

Object.values()方法返回一个包含对象所有属性值的数组。结合for...of循环，我们可以直接遍历对象的属性值。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

for (const person of Object.values(jsonArray)) {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
}

在这个例子中，Object.values(jsonArray)返回jsonArray数组中的所有对象，for...of循环遍历这些对象，person.name和person.age分别获取对象的name和age属性。

12. for...of 与 Object.entries() 结合

Object.entries()方法返回一个包含对象所有键值对的数组。结合for...of循环，我们可以同时访问对象的键和值。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

for (const [index, person] of Object.entries(jsonArray)) {
    console.log(`Index: ${index}, Name: ${person.name}, Age: ${person.age}`);
}

在这个例子中，Object.entries(jsonArray)返回jsonArray数组的索引和对象的键值对数组，for...of循环遍历这些键值对，index表示索引，person表示对象，person.name和person.age分别获取对象的name和age属性。

13. for...in 与 hasOwnProperty() 结合

for...in循环会遍历对象的可枚举属性，包括原型链上的属性。为了确保只遍历对象自身的属性，我们可以使用hasOwnProperty()方法进行过滤。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

for (const index in jsonArray) {
    if (jsonArray.hasOwnProperty(index)) {
        console.log(`Index: ${index}, Name: ${jsonArray[index].name}, Age: ${jsonArray[index].age}`);
    }
}

在这个例子中，for...in循环遍历jsonArray数组的索引，jsonArray.hasOwnProperty(index)确保只遍历对象自身的属性，jsonArray[index].name和jsonArray[index].age分别获取对象的name和age属性。

14. for...of 与 Symbol.iterator 结合

JavaScript中的数组是可迭代的，这意味着它们实现了Symbol.iterator方法。我们可以手动调用Symbol.iterator方法来获取数组的迭代器，然后使用for...of循环遍历数组。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

const iterator = jsonArray[Symbol.iterator]();
for (const person of iterator) {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
}

在这个例子中，jsonArray[Symbol.iterator]()返回jsonArray数组的迭代器，for...of循环遍历该迭代器，person.name和person.age分别获取对象的name和age属性。

15. for...of 与 Array.from() 结合

Array.from()方法可以将一个类数组对象或可迭代对象转换为真正的数组。结合for...of循环，我们可以遍历转换后的数组。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

const arrayCopy = Array.from(jsonArray);
for (const person of arrayCopy) {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
}

在这个例子中，Array.from(jsonArray)将jsonArray数组转换为一个新的数组arrayCopy，for...of循环遍历该数组，person.name和person.age分别获取对象的name和age属性。

16. for...of 与 Array.prototype.entries() 结合

Array.prototype.entries()方法返回一个包含数组索引和元素的迭代器。结合for...of循环，我们可以同时访问数组的索引和元素。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

for (const [index, person] of jsonArray.entries()) {
    console.log(`Index: ${index}, Name: ${person.name}, Age: ${person.age}`);
}

在这个例子中，jsonArray.entries()返回jsonArray数组的索引和元素的迭代器，for...of循环遍历该迭代器，index表示索引，person表示对象，person.name和person.age分别获取对象的name和age属性。

17. for...of 与 Array.prototype.keys() 结合

Array.prototype.keys()方法返回一个包含数组索引的迭代器。结合for...of循环，我们可以遍历数组的索引。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

for (const index of jsonArray.keys()) {
    console.log(`Index: ${index}, Name: ${jsonArray[index].name}, Age: ${jsonArray[index].age}`);
}

在这个例子中，jsonArray.keys()返回jsonArray数组的索引的迭代器，for...of循环遍历该迭代器，jsonArray[index].name和jsonArray[index].age分别获取对象的name和age属性。

18. for...of 与 Array.prototype.values() 结合

Array.prototype.values()方法返回一个包含数组元素的迭代器。结合for...of循环，我们可以遍历数组的元素。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

for (const person of jsonArray.values()) {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
}

在这个例子中，jsonArray.values()返回jsonArray数组的元素的迭代器，for...of循环遍历该迭代器，person.name和person.age分别获取对象的name和age属性。

19. for...of 与 Array.prototype[@@iterator]() 结合

Array.prototype[@@iterator]()方法是数组的默认迭代器方法，它返回一个包含数组元素的迭代器。结合for...of循环，我们可以遍历数组的元素。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

const iterator = jsonArray[Symbol.iterator]();
for (const person of iterator) {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
}

在这个例子中，jsonArray[Symbol.iterator]()返回jsonArray数组的默认迭代器，for...of循环遍历该迭代器，person.name和person.age分别获取对象的name和age属性。

20. for...of 与 Array.prototype.reduceRight() 结合

Array.prototype.reduceRight()方法与reduce方法类似，但它从数组的末尾开始遍历。结合for...of循环，我们可以从后向前遍历数组。

const jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
];

const totalAge = jsonArray.reduceRight((accumulator, person) => accumulator + person.age, 0);
console.log(totalAge); // 输出: 90

在这个例子中，reduceRight方法从jsonArray数组的末尾开始遍历，并对每个对象执行回调函数。回调函数将当前对象的age属性累加到accumulator中，最终reduceRight方法返回所有age的总和。

总结

在JavaScript中，遍历JSON数组有多种方法，每种方法都有其适用的场景。for循环适用于需要精确控制遍历过程的场景，for...of循环和forEach方法提供了更简洁的遍历方式，map、filter和reduce方法则适用于需要对数组进行转换、筛选或累加的场景。for...in循环、Object.keys()、Object.values()和`