js怎么循环遍历json数组对象

JavaScript中循环遍历JSON数组对象的几种常用方法

在JavaScript开发中,处理JSON数组对象是非常常见的操作，多种遍历JSON数组对象的方法，能够帮助我们更高效地操作数据，本文将介绍几种常用的循环遍历JSON数组对象的方法，包括传统的for循环、for...of循环、forEach()方法、map()方法以及for...in循环等，并分析它们的适用场景和优缺点。

使用for循环遍历

for循环是最基础、最传统的遍历方式，适用于任何数组，包括JSON数组对象。

let jsonArray = [
  {id: 1, name: '张三', age: 25},
  {id: 2, name: '李四', age: 30},
  {id: 3, name: '王五', age: 28}
];
for (let i = 0; i < jsonArray.length; i++) {
  console.log(jsonArray[i].id, jsonArray[i].name, jsonArray[i].age);
}

优点：

• 兼容性最好,所有浏览器都支持
• 可以灵活控制循环的起始和结束点
• 可以在循环中修改索引

缺点：

• 代码相对冗长
• 容易出错（如索引越界）

使用for...of循环遍历

for...of是ES6引入的循环语法，专门用于遍历可迭代对象（如数组、字符串等）。

let jsonArray = [
  {id: 1, name: '张三', age: 25},
  {id: 2, name: '李四', age: 30},
  {id: 3, name: '王五', age: 28}
];
for (let item of jsonArray) {
  console.log(item.id, item.name, item.age);
}

优点：

• 代码简洁易读
• 直接获取数组元素,无需索引
• 不会遍历数组原型链上的属性

缺点：

• 无法直接获取索引（除非配合entries()）
• 不能在循环中动态修改遍历范围

使用forEach()方法遍历

forEach()是数组原型上的一个方法，对数组的每个元素执行一次提供的函数。

let jsonArray = [
  {id: 1, name: '张三', age: 25},
  {id: 2, name: '李四', age: 30},
  {id: 3, name: '王五', age: 28}
];
jsonArray.forEach((item, index) => {
  console.log(index, item.id, item.name, item.age);
});

优点：

• 代码简洁,函数式编程风格
• 可以同时获取元素和索引
• 不会修改原数组（除非在回调中修改）

缺点：

• 无法使用break或continue跳出循环
• 对于空数组不会执行回调
• 兼容性较好（IE9+部分支持，IE11完全支持）

使用map()方法遍历

map()方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。

let jsonArray = [
  {id: 1, name: '张三', age: 25},
  {id: 2, name: '李四', age: 30},
  {id: 3, name: '王五', age: 28}
];
let newArray = jsonArray.map(item => {
  return {
    id: item.id,
    displayName: item.name,
    isAdult: item.age >= 18
  };
});
console.log(newArray);

优点：

• 函数式编程,不可变性
• 可以方便地转换和映射数据
• 返回新数组,不修改原数组

缺点：

• 总是返回新数组,即使不需要
• 无法使用break或continue跳出循环
• 对于空数组会返回空数组

使用for...in循环遍历

for...in循环用于遍历对象的可枚举属性，包括原型链上的属性，不推荐直接用于数组遍历。

let jsonArray = [
  {id: 1, name: '张三', age: 25},
  {id: 2, name: '李四', age: 30},
  {id: 3, name: '王五', age: 28}
];
for (let index in jsonArray) {
  if (jsonArray.hasOwnProperty(index)) {
    console.log(jsonArray[index].id, jsonArray[index].name, jsonArray[index].age);
  }
}

优点：

• 可以遍历对象的可枚举属性
• 可以遍历数组的索引

缺点：

• 会遍历原型链上的属性（需配合hasOwnProperty检查）
• 遍历顺序不确定（现代JS引擎按数字顺序遍历数组索引）
• 不推荐用于数组遍历,更适合对象遍历

使用for...of与entries()结合遍历

如果同时需要索引和元素值,可以使用entries()方法结合for...of。

let jsonArray = [
  {id: 1, name: '张三', age: 25},
  {id: 2, name: '李四', age: 30},
  {id: 3, name: '王五', age: 28}
};
for (let [index, item] of jsonArray.entries()) {
  console.log(index, item.id, item.name, item.age);
}

优点：

• 同时获取索引和元素值
• 代码简洁
• 可使用break或continue

缺点：

• entries()返回的是迭代器，需要解构赋值
• 兼容性略差（IE不支持）

总结与选择建议

选择建议：

• 如果只是简单遍历数组元素,优先使用for...of
• 如果需要索引且不需要跳出循环,使用forEach()
• 如果需要转换数据,使用map()
• 避免使用for...in遍历数组
• 在需要精确控制循环时使用传统for循环

这些遍历方法,并根据实际场景选择合适的方案，能够让我们在处理JSON数组对象时更加得心应手。