如何在jQuery中处理数组内嵌套对象中的数组？附示例数据

嘿，我来帮你梳理下怎么用jQuery（其实很多时候原生JS也够用，但既然你问jQuery我就结合着来）处理这种嵌套结构的数据~

你的数据源结构很清晰，每个玩家对象里包含name、cars数组和cars_total字段，我们可以结合jQuery的遍历方法和原生JS的数组方法来完成各种操作。

1. 遍历所有玩家及其车辆 #

如果想要把每个玩家的信息和他们的车辆列表展示出来，用jQuery的$.each()就很方便：

let source = [{ name: "Player1", cars:[{id: 20, count: 11}, {id: 23, count: 6}, {id: 2, count: 5}], cars_total: 22 }, { name: "Player2", cars:[{id: 11, count: 5}, {id: 24, count: 5}, {id: 42, count: 4}], cars_total: 14 }];

// 遍历每个玩家
$.each(source, function(playerIndex, player) {
  console.log(`玩家：${player.name}，总车辆数：${player.cars_total}`);
  
  // 遍历当前玩家的每辆车
  $.each(player.cars, function(carIndex, car) {
    console.log(`--- 车辆ID：${car.id}，数量：${car.count}`);
  });
});

这里$.each()的第一个参数是要遍历的集合，第二个回调函数里的参数分别是索引和当前元素，完全适配这种嵌套结构的遍历需求。

2. 查找特定玩家的特定车辆 #

比如你想找Player1中ID为23的车辆，可以结合原生JS的find()方法，比jQuery的方法更直观：

// 先找到Player1
const targetPlayer = source.find(player => player.name === "Player1");
if (targetPlayer) {
  // 再找他的车辆中ID为23的
  const targetCar = targetPlayer.cars.find(car => car.id === 23);
  if (targetCar) {
    console.log(`找到目标车辆：ID=${targetCar.id}，数量=${targetCar.count}`);
  } else {
    console.log("该玩家没有这辆车");
  }
}

如果你更习惯用jQuery的写法，也可以用$.grep()：

const targetPlayer = $.grep(source, function(player) {
  return player.name === "Player1";
})[0];

3. 修改车辆数量并更新总数 #

比如要把Player2中ID为42的车辆数量改成8，同时更新他的总车辆数：

$.each(source, function(_, player) {
  if (player.name === "Player2") {
    $.each(player.cars, function(_, car) {
      if (car.id === 42) {
        car.count = 8;
        // 用reduce重新计算总车辆数，确保数据一致
        player.cars_total = player.cars.reduce((sum, car) => sum + car.count, 0);
      }
    });
  }
});

console.log(source); // 此时Player2的cars_total会变成5+5+8=18

4. 给玩家添加新车辆（含重复ID判断） #

比如给Player1添加一辆ID为100、数量为3的车，严谨一点的话要先检查是否已有该ID的车，避免重复：

$.each(source, function(_, player) {
  if (player.name === "Player1") {
    const existingCar = player.cars.find(car => car.id === 100);
    if (existingCar) {
      // 已有该车就累加数量
      existingCar.count += 3;
    } else {
      // 没有就新增
      player.cars.push({id: 100, count: 3});
    }
    // 重新计算总车辆数
    player.cars_total = player.cars.reduce((sum, car) => sum + car.count, 0);
  }
});

其实很多时候原生JS的数组方法（forEach、find、filter、reduce）已经足够好用，jQuery的$.each()更多是提供了兼容旧浏览器的遍历方式，你可以根据自己的需求混合使用~

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