如何基于ID数组筛选对象数组匹配项实现心愿单心形图标显示

你写的代码存在两个核心问题：

1. wishlistIds 里存储的都是纯数字类型的商品ID，遍历的时候每个w就是ID本身，不存在w.id属性，取值会得到undefined
2. items是商品对象数组，不是单个对象，直接取items.id也会得到undefined，两个undefined恒等判断永远为真，所以会返回所有ID。

场景1：筛选出items中属于心愿单的商品对象（用于渲染心愿单列表） #

先把心愿单ID转成Set提升查找效率，再过滤items数组：

const wishlistIdSet = new Set(wishlistIds);
const myWishlistItems = items.filter(item => wishlistIdSet.has(item.id));

示例运行后会得到：[{id:123, productName:"Cheese", price: 15.99}]

场景2：筛选出wishlistIds中当前商品列表存在的ID（用于批量校验收藏状态） #

先提取当前商品列表的所有ID转Set，再过滤心愿单ID数组：

const existItemIdSet = new Set(items.map(item => item.id));
const matchedWishlistIds = wishlistIds.filter(id => existItemIdSet.has(id));

示例运行后会得到：[123]

如果你是要给商品列表每个项单独判断是否要显示心形图标，不需要提前过滤，直接在渲染循环里用wishlistIdSet.has(item.id)判断即可，返回true就展示选中状态的心形图标。

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