遍历 JSON 数组

发布时间：2023-05-09

引言

JSON（JavaScript Object Notation）是一种轻量级数据交换格式，由于其具有良好的可读性和易于解析性而成为常见的数据格式之一。在 Web 应用程序中，可能会频繁使用 JSON 数据进行数据交换和存储。而对于遍历 JSON 数组，是开发者在使用 JSON 数据时必须掌握的技能点。

正文

一、提取 JSON 数组

在进行 JSON 数组的遍历之前，需要先将 JSON 数组提取出来。通常情况下，JSON 数组是作为 JSON 对象的一个属性值存在的。因此，需要先通过 JSON 对象的属性名获取到对应的 JSON 数组。

const jsonObj = {
  "name": "John",
  "age": 30,
  "cars": [
    { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
    { "name":"BMW", "models":[ "320", "X3", "X5" ] },
    { "name":"Fiat", "models":[ "500", "Panda" ] }
  ]
};
const carsArray = jsonObj.cars;

上述代码中，通过 jsonObj.cars 获取到了 jsonObj 中的 cars 数组。

二、for 循环遍历数组

使用 for 循环遍历 JSON 数组是最常见的方法之一。在遍历过程中，使用数组的索引值可以依次获取数组中的每个元素。

for (let i = 0; i < carsArray.length; i++) {
  const car = carsArray[i];
  console.log(car.name);
  for (let j = 0; j < car.models.length; j++) {
    console.log(car.models[j]);
  }
}

上述代码中，使用嵌套的 for 循环遍历了 carsArray 数组中的所有元素。

三、forEach() 方法遍历数组

除了使用 for 循环以外，还可以使用数组的 forEach() 方法来遍历 JSON 数组。forEach() 方法接受一个回调函数作为参数，该回调函数会依次对数组中的每个元素进行操作。在回调函数中，可以使用当前元素的值和索引值进行操作。

carsArray.forEach(function(car) {
  console.log(car.name);
  car.models.forEach(function(model) {
    console.log(model);
  });
});

上述代码说明了如何使用 forEach() 方法遍历 JSON 数组。使用 forEach() 方法可以使代码更加简洁易懂。

四、map() 方法遍历数组

在一些需要对数组进行操作并生成新数组的情况下，可以使用数组的 map() 方法。map() 方法会返回一个新的数组，其中每个元素是通过对原数组中的每个元素应用回调函数得到的结果。

const carNames = carsArray.map(function(car) {
  return car.name;
});
console.log(carNames);

上述代码中，使用 map() 方法返回了一个新的数组，其中每个元素为 carsArray 中每个元素的 name 属性。

五、filter() 方法遍历数组

除了 map() 方法以外，还可以使用数组的 filter() 方法，返回一个由所有通过回调函数测试的元素组成的新数组。在回调函数中，需要返回一个布尔值，用于确定当前元素是否应该包含在新数组中。

const filterResults = carsArray.filter(function(car) {
  return car.name === "Ford";
});
console.log(filterResults);

上述代码中，使用 filter() 方法筛选出了 carsArray 数组中 car.name 为 "Ford" 的元素，返回了一个新的数组。

小结

遍历 JSON 数组是 Web 应用程序开发中必不可少的技能点。在实际开发中，只需要根据实际需求灵活使用各种遍历方法即可实现对 JSON 数组的遍历操作。

推荐文章