Angular 5中使用Lodash根据ID数组过滤对象数组

首先，你当前的代码里直接把this.completedIds（也就是目标ID数组）传给_.filter的第二个参数是不对的——_.filter需要的是一个判断函数，而不是数组本身。下面给你两种可行的实现方案：

方式一：用Lodash的_.includes配合过滤函数 #

getWeekItems(weekNumber) {
  this.contenfulService.getWeekItems(weekNumber)
    .then((weekOverview) => {
      // 遍历每个对象，判断其sys.id是否在目标ID数组中
      this.weekOverviewCompleted = _.filter(weekOverview, (item) => 
        _.includes(this.completedIds, item.sys.id)
      );
      console.log(this.weekOverviewCompleted);
    })
    .then(() => console.log(this.weekOverviewCompleted));
}

方式二：原生JavaScript实现（无需依赖Lodash） #

如果不想依赖第三方库，原生数组方法也能轻松搞定：

getWeekItems(weekNumber) {
  this.contenfulService.getWeekItems(weekNumber)
    .then((weekOverview) => {
      this.weekOverviewCompleted = weekOverview.filter(item => 
        this.completedIds.includes(item.sys.id)
      );
      console.log(this.weekOverviewCompleted);
    })
    .then(() => console.log(this.weekOverviewCompleted));
}

性能优化小技巧 #

如果你的ID数组元素很多，建议先把数组转成Set，这样查找ID的时间复杂度会从O(n)降到O(1)，提升过滤效率：

getWeekItems(weekNumber) {
  this.contenfulService.getWeekItems(weekNumber)
    .then((weekOverview) => {
      const idSet = new Set(this.completedIds);
      this.weekOverviewCompleted = weekOverview.filter(item => idSet.has(item.sys.id));
      console.log(this.weekOverviewCompleted);
    })
    .then(() => console.log(this.weekOverviewCompleted));
}

另外要注意：确保this.completedIds在当前函数中的指向是正确的，如果是在类组件里，可能需要通过箭头函数或者构造函数绑定来避免this指向异常。

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