怎么用js遍历json数组长度

JavaScript中如何遍历JSON数组长度及实用方法详解

在JavaScript开发中，处理JSON数组是一项常见任务，了解如何正确遍历JSON数组并获取其长度对于数据操作至关重要，本文将详细介绍几种遍历JSON数组长度的方法,并提供实际应用示例。

获取JSON数组长度

在JavaScript中，JSON数组本质上是一个普通数组，因此可以使用length属性获取其长度：

let jsonArray = [
  {id: 1, name: "张三"},
  {id: 2, name: "李四"},
  {id: 3, name: "王五"}
];
console.log(jsonArray.length); // 输出: 3

遍历JSON数组的常用方法

for循环

最基础的遍历方式,通过索引访问每个元素：

for (let i = 0; i < jsonArray.length; i++) {
  console.log(jsonArray[i].id, jsonArray[i].name);
}

for...of循环

现代JavaScript推荐的遍历方式,代码更简洁：

for (let item of jsonArray) {
  console.log(item.id, item.name);
}

forEach方法

数组自带的遍历方法,可以方便地处理每个元素：

jsonArray.forEach((item, index) => {
  console.log(`索引${index}:`, item.id, item.name);
});

map方法

当需要处理数组并返回新数组时特别有用：

let names = jsonArray.map(item => item.name);
console.log(names); // 输出: ["张三", "李四", "王五"]

for...in循环

虽然可以遍历数组，但不推荐用于数组遍历（更适合对象）：

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

实际应用示例

示例1：动态渲染列表

let products = [
  {id: 101, name: "笔记本电脑", price: 5999},
  {id: 102, name: "智能手机", price: 3999},
  {id: 103, name: "平板电脑", price: 2999}
];
function renderProducts() {
  let container = document.getElementById('product-list');
  products.forEach(product => {
    let div = document.createElement('div');
    div.innerHTML = `
      <h3>${product.name}</h3>
      <p>价格: ¥${product.price}</p>
    `;
    container.appendChild(div);
  });
}
renderProducts();

示例2：统计符合条件的元素

let students = [
  {name: "小明", score: 85, passed: true},
  {name: "小红", score: 92, passed: true},
  {name: "小刚", score: 58, passed: false}
];
let passedCount = students.filter(student => student.passed).length;
console.log(`及格人数: ${passedCount}`); // 输出: 及格人数: 2

注意事项

1. JSON.parse()：如果数据是JSON字符串格式,需要先解析：

   let jsonString = '[{"id":1},{"id":2}]';
   let jsonArray = JSON.parse(jsonString);

2. 空数组检查：遍历前最好检查数组是否为空：

   if (jsonArray && jsonArray.length > 0) {
     // 安全遍历
   }

3. 性能考虑：对于大型数组，for循环通常比forEach或map性能更好。

JSON数组的遍历方法是JavaScript开发的基础技能,根据具体需求选择合适的遍历方式：

• 需要索引时使用for循环
• 简洁性优先选择for...of
• 需要返回新数组用map
• 需要简单遍历用forEach

通过合理运用这些方法,可以高效地处理各种JSON数组操作场景。