如何筛选JSON对象中指定记录？以提取name为Spain的记录为例

嘿，我来帮你搞定这个筛选问题！其实用JavaScript里的filter()方法就能轻松解决，这个方法专门用来从数组里挑出符合条件的元素，完全不用复杂的手动遍历逻辑，上手超简单～

基础实现：直接筛选Spain的记录 #

先给你看完整的代码示例，你可以直接跑起来试试：

var trips = [ 
{ "name": "Spain", "visit_id": 1, "city": "Barcelona", "year": 2016, "main_img": "main.jpg", "other_imgs": "001.jpg, 002.jpg" },
{ "name": "Spain", "visit_id": 2, "city": "Moraira", "year": 2015, "main_img": "main.jpg", "other_imgs": "001.jpg, 002.jpg" }, 
{ "name": "Portugal", "visit_id": 1, "city": "Lisbon", "year": 2016, "main_img": "main.jpg", "other_imgs": "001.jpg, 002.jpg" }, 
{ "name": "Italy", "visit_id": 1, "city": "Rome", "year": 2017, "main_img": "main.jpg", "other_imgs": "001.jpg, 002.jpg" }, 
{ "name": "France", "visit_id": 1, "city": "Paris", "year": 2015, "main_img": "main.jpg", "other_imgs": "001.jpg, 002.jpg" } 
];

// 筛选name为Spain的记录
var spainTrips = trips.filter(function(trip) {
  // 判断当前遍历的trip对象，name是否等于"Spain"
  return trip.name === "Spain";
});

// 打印结果，控制台会显示筛选后的数组
console.log(spainTrips);

代码解释 #

• trips.filter()会自动遍历数组里的每一条记录，把每条记录传给后面的回调函数（这里的trip就是当前正在遍历的那条旅行记录）
• 回调函数里的return trip.name === "Spain"是核心逻辑：如果这条记录的name是"Spain"，就把它保留到新数组spainTrips里；不符合条件的会被自动过滤掉
• 最终spainTrips里就只有所有属于Spain的旅行记录了

更灵活的写法：封装成可复用函数 #

如果你以后想筛选其他国家（比如Portugal、Italy），可以把筛选逻辑封装成一个函数，这样不用每次都写重复代码：

function filterTripsByCountry(countryName) {
  return trips.filter(function(trip) {
    return trip.name === countryName;
  });
}

// 用法示例：
var spainTrips = filterTripsByCountry("Spain");
var portugalTrips = filterTripsByCountry("Portugal");
var italyTrips = filterTripsByCountry("Italy");

遍历并显示筛选后的记录 #

如果需要把筛选出来的记录展示出来（比如在控制台打印或者网页上生成元素），可以用forEach()方法遍历筛选后的数组：

// 遍历Spain的记录并打印关键信息
spainTrips.forEach(function(trip) {
  console.log(`国家：${trip.name}，城市：${trip.city}，旅行年份：${trip.year}`);
  
  // 如果是在网页端，也可以这样创建DOM元素展示：
  // let tripElement = document.createElement('div');
  // tripElement.innerHTML = `<h3>${trip.name}</h3><p>城市：${trip.city}，年份：${trip.year}</p>`;
  // document.body.appendChild(tripElement);
});

这样你就能轻松筛选并展示指定国家的旅行记录啦～

内容的提问来源于stack exchange，提问作者Rob Hern