如何使用JavaScript遍历JSON数组

在JavaScript中遍历JSON数组是一项常见的任务，特别是当你需要处理和展示数据的时候。下面将详细介绍几种在JavaScript中遍历JSON数组的方法。

使用`for`循环

使用基本的`for`循环是遍历数组的最基础方法。

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

for (let i = 0; i < jsonArray.length; i++) {
console.log(jsonArray[i].name + ' is ' + jsonArray[i].age + ' years old.');
}

使用`for…of`循环

`for…of`循环是ES6中引入的，它提供了一种更简洁的遍历数组元素的方式。

for (let item of jsonArray) {
console.log(item.name + ' is ' + item.age + ' years old.');
}

使用`forEach`方法

数组的`forEach`方法提供了一种更为声明式的遍历数组的方式。

jsonArray.forEach(function(item) {
console.log(item.name + ' is ' + item.age + ' years old.');
});

// 使用箭头函数可以更简洁
jsonArray.forEach(item => {
console.log(`${item.name} is ${item.age} years old.`);
});

使用`map`方法

如果你需要基于原始数组创建一个新数组，`map`方法非常有用。

let names = jsonArray.map(item => item.name);
console.log(names); // ["Alice", "Bob", "Charlie"]

使用`for…in`循环

尽管不推荐用于数组遍历，因为`for…in`会枚举对象的所有可枚举属性，包括原型链上的，但有时也可以用于遍历JSON对象的键。

for (let key in jsonArray[0]) {
if (jsonArray[0].hasOwnProperty(key)) {
console.log(key + ': ' + jsonArray[0][key]);
}
}

注意：这里只遍历了数组的第一个对象。

使用`Object.keys`和`forEach`

如何使用JavaScript遍历JSON数组

如果你想要遍历JSON对象的所有键，你可以结合使用`Object.keys`和`forEach`。

Object.keys(jsonArray[0]).forEach(key => {
console.log(key + ': ' + jsonArray[0][key]);
});

这同样只遍历了第一个对象。

在选择遍历方法时，应根据具体需求和场景来选择最合适的方法。例如，如果你需要索引，`for`循环可能是最好的选择；如果你不需要索引并且想要更简洁的代码，`forEach`或`for…of`可能是更好的选择。记住，一般来说，`forEach`和`map`在处理数组时比传统`for`循环更为清晰和简洁。