JavaScript中对比两数组返回带isAdded属性的嵌套结构数组

我有两个数组：alreadyAddedAreas是一维数组，areasData是嵌套数组。现需返回与areasData结构完全一致的数据，并为其中每个area添加isAdded属性，用于标识该area是否存在于alreadyAddedAreas中。

原数组定义 #

areasData（嵌套结构）

const areasData = [
  {
    countries: [
      {
        id: 123,
        cities: [
          {
            id: 001,
            areas: [
              { id: 890 },
              { id: 891 }
            ]
          },
          {
            id: 002,
            areas: [
              { id: 897 },
              { id: 899 }
            ]
          }
        ]
      }
    ]
  }
];

注：原代码存在语法错误，数组内不能直接使用countries: [...]的键值对形式，已修正为数组包含对象的合法结构。

alreadyAddedAreas（已选区域一维数组）

const alreadyAddedAreas = [
  { id: 890 },
  { id: 891 }
];

当前实现代码 #

export const getFilteredAreasList1 = (areasData, alreadyAddedAreas) => {
  const filteredArray = [];
  if (areasData && alreadyAddedAreas) {
    areasData[0]?.cities?.map((city) => {
      return city?.areas?.map((area) => {
        if (
          !alreadyAddedAreas.find((item) => item?.areaID?._id === area?._id)
        ) {
          filteredArray.push({
            ...area,
            isAdded: false,
          });
        } else {
          filteredArray.push({
            ...area,
            isAdded: true,
          });
        }
      });
    });
    return filteredArray;
  }
};

当前代码的问题 #

• 直接将所有area平铺为一维数组返回，完全丢失原有的countries、cities层级结构，不符合“返回与areasData结构完全一致的数据”的要求。
• 匹配逻辑错误：alreadyAddedAreas中的元素只有id属性，代码却用item?.areaID?._id匹配，且area的属性是id而非_id，导致匹配逻辑完全失效。

正确实现方案 #

要保留原结构，需逐层遍历嵌套数组，对每个层级的对象进行浅拷贝，同时为areas内的元素添加isAdded属性。先将已选区域的id存入Set，可将查询效率从O(n)优化为O(1)：

export const getFilteredAreasList = (areasData, alreadyAddedAreas) => {
  // 边界判断：若输入数组为空，直接返回原数据
  if (!areasData || !alreadyAddedAreas) return areasData;

  // 提取已选区域的id存入Set，提升查询效率
  const addedAreaIds = new Set(alreadyAddedAreas.map(item => item.id));

  // 逐层遍历并保留原结构，为每个area添加isAdded属性
  return areasData.map(item => ({
    ...item,
    countries: item.countries.map(country => ({
      ...country,
      cities: country.cities.map(city => ({
        ...city,
        areas: city.areas.map(area => ({
          ...area,
          isAdded: addedAreaIds.has(area.id)
        }))
      }))
    }))
  }));
};

验证结果 #

调用上述函数后，返回数据与areasData结构完全一致，每个area均带有正确的isAdded标记：

// 返回结果示例
[
  {
    countries: [
      {
        id: 123,
        cities: [
          {
            id: 1,
            areas: [
              { id: 890, isAdded: true },
              { id: 891, isAdded: true }
            ]
          },
          {
            id: 2,
            areas: [
              { id: 897, isAdded: false },
              { id: 899, isAdded: false }
            ]
          }
        ]
      }
    ]
  }
]

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