如何用JS在嵌套数组JSON中筛选匹配多ID元素并返回两种结果

问题修正说明 #

你的原始代码存在几个问题：

• 嵌套使用filter不合理：filter返回数组，空数组会被判定为假值，我们需要的是「是否存在匹配项」，应该用some（只要有一个符合条件就返回true）
• 未处理colors为null的情况：直接调用filter/some会触发报错
• 层级匹配错误：根据你提供的JSON结构，目标zoneid=1实际在item.zone.zone.id层级，而非item.zone.id，如果你的实际结构不同，请自行调整路径

1. 获取匹配的元素数组 #

以下代码会返回所有符合itemid、zoneid、sizeid、colorid四个条件的元素：

const targetItemId = 1;
const targetZoneId = 1;
const targetSizeId = 9; // 注意：你测试用的sizeid=1和JSON里的size.id=9不匹配，这里修正为对应值
const targetColorId = 2;

const matchedItems = items.filter(item => {
  // 先匹配item和zone的ID
  if (item.id !== targetItemId || item.zone?.zone?.id !== targetZoneId) {
    return false;
  }
  // 检查是否存在符合条件的size和color
  return item.zone?.sizes?.some(size => {
    if (size.id !== targetSizeId) return false;
    // 处理colors为null的情况，避免报错
    return size.colors?.some(color => color.id === targetColorId) ?? false;
  });
});

2. 判断是否存在匹配元素 #

如果只需要布尔值结果，用some直接判断更高效（不需要遍历所有元素，找到匹配项就停止）：

const hasMatch = items.some(item => {
  if (item.id !== targetItemId || item.zone?.zone?.id !== targetZoneId) {
    return false;
  }
  return item.zone?.sizes?.some(size => {
    if (size.id !== targetSizeId) return false;
    return size.colors?.some(color => color.id === targetColorId) ?? false;
  });
});

封装成可复用函数 #

如果需要多次调用，可以把逻辑封装成函数：

// 获取所有匹配元素
function getMatchedItems(items, itemId, zoneId, sizeId, colorId) {
  return items.filter(item => {
    if (item.id !== itemId || item.zone?.zone?.id !== zoneId) return false;
    return item.zone?.sizes?.some(size => {
      if (size.id !== sizeId) return false;
      return size.colors?.some(color => color.id === colorId) ?? false;
    });
  });
}

// 判断是否存在匹配元素
function isItemExist(items, itemId, zoneId, sizeId, colorId) {
  return items.some(item => {
    if (item.id !== itemId || item.zone?.zone?.id !== zoneId) return false;
    return item.zone?.sizes?.some(size => {
      if (size.id !== sizeId) return false;
      return size.colors?.some(color => color.id === colorId) ?? false;
    });
  });
}

// 使用示例
const matched = getMatchedItems(items, 1, 1, 9, 2);
const exists = isItemExist(items, 1, 1, 9, 2);

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