如何对比两个接口返回的数组，提取第二个数组独有的元素生成新数组

你原有代码的问题出在双重循环的逻辑：你遍历第一个数组的每一个元素时，都会把第二个数组里所有和当前第一个数组元素id不相等的项都加入结果集，比如你示例里第二个数组的id=5，和第一个数组的id=1、2、3对比都会判定为不相等，会被重复插入3次，最终结果就会出现大量重复值。

可以通过Set结构存储已存在的id优化查找效率，同时避免重复插入，优化后代码如下：

const listaRealmTrovata = async () => {
  // 两个接口无依赖可以并行请求，缩短加载时间
  const [realmUserAttivi, realmAttivi] = await Promise.all([
    axios.get(APICALL1),
    axios.get(APICALL2)
  ]);

  // 提取第一次接口返回的所有realm id存入Set，查找效率为O(1)
  const existRealmIds = new Set(realmUserAttivi.data.map(item => item.realm.id));

  // 过滤第二次接口返回的结果，仅保留第一次结果中不存在的项
  const uniqueList = realmAttivi.data
    .filter(realm => !existRealmIds.has(realm.id))
    .map(realm => ({ value: realm.id, label: realm.realmId }));

  // 一次性更新状态，避免触发多次不必要的渲染
  setListaRealm(uniqueList);
};

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