如何比较两个深度嵌套对象并返回匹配ID值——解决filter/find不是函数报错问题

首先得明确你遇到的核心问题：this.articles和this.imgGallery是对象而非数组，直接调用数组的filter/find/some方法肯定会报错——这些方法只有数组才有！我们得先从对象里取出真正需要的数组部分，再做匹配。

根据你给出的对象结构，我们需要：

• 从galleries（对应this.imgGallery）的data.allGalleries里，提取所有submitImages的id
• 从articles（对应this.articles）的data.allArticles里，提取所有addGalleryEvent的id
• 找出这两组id中存在匹配的值

具体实现代码 #

下面是两种常用的实现方式，你可以根据需求选择：

方式1：获取所有匹配的ID

// 第一步：收集galleries中所有submitImages的id（用Set提升查找效率）
const galleryImageIds = new Set();
this.imgGallery.data.allGalleries.forEach(gallery => {
  // 遍历每个gallery下的submitImages，把id加入Set
  gallery.submitImages.forEach(img => galleryImageIds.add(img.id));
});

// 第二步：遍历articles，找出匹配的addGalleryEvent.id
const matchedIds = [];
this.articles.data.allArticles.forEach(article => {
  // 用可选链?.避免addGalleryEvent为null时的报错
  const targetId = article.addGalleryEvent?.id;
  if (targetId && galleryImageIds.has(targetId)) {
    matchedIds.push(targetId);
  }
});

console.log("所有匹配的ID：", matchedIds);

方式2：只获取第一个匹配的ID

如果只需要找到第一个匹配的id，可以用find方法：

// 先收集galleries的id集合
const galleryImageIds = new Set();
this.imgGallery.data.allGalleries.forEach(gallery => {
  gallery.submitImages.forEach(img => galleryImageIds.add(img.id));
});

// 查找第一个匹配的id
const firstMatchedId = this.articles.data.allArticles
  .find(article => {
    const targetId = article.addGalleryEvent?.id;
    return targetId && galleryImageIds.has(targetId);
  })
  ?.addGalleryEvent?.id;

console.log("第一个匹配的ID：", firstMatchedId);

关键说明 #

1. 为什么用Set？：Set的has方法查找效率比数组的includes更高，当数据量较大时优势明显。
2. 可选链操作符?.：用来处理addGalleryEvent可能为null的情况（比如你的示例里有addVideoGallery": null，同理addGalleryEvent也可能为空），避免出现Cannot read property 'id' of null的报错。
3. 对象转数组的核心：一定要先从this.imgGallery.data.allGalleries和this.articles.data.allArticles拿到数组，再调用数组方法。

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