时间戳

首页 > 解决方案 > 使用 JavaScript/TypeScript 过滤两个数组

javascript - 使用 JavaScript/TypeScript 过滤两个数组

问题描述

我想在 UI 上制作一个复选框列表，用户可以使用它来切换和过滤一组数据结果。复选框可以是累积的，所以我现在将它们存储为字符串数组。我的代码看起来像这样。

export interface IMyObjectFromAPI {
   status: {
      id: number,
      description: string,
      location: string,
      name: string,
      imageUrl: string
  }
}

var filteredByTerms: string[] = [];
var resultsFromAPI: IMyObjectFromAPI [] = [];
var filteredDataResults: IMyObjectFromAPI[] = [];

我将 api 调用的返回结果保存到resultsFromAPI数组中。

在 UI 上，我有一组基于国家/地区的复选框，这些复选框通过国家/地区数组循环填充。在选择一个复选框时，我触发了以下代码。同样，这里的目标是向要过滤的术语数组添加多个内容（所以我想按位置 + 名称进行过滤）。

filterDataResults(term: string) {
  var indexOfTerm = this.filteredByTerms.indexOf(term);
  // if the term is not in an array of terms to filter by, add it
  if (indexOfTerm === -1) {
   this.filteredByTerms.push(term);
   this.filteredDataResults = this.resultsFromAPI.filter(x => x.location === 
                              this.filteredByTerms.includes(term));
  }
   else {
     this.filteredByTerms.splice(indexOfTerm, 1);
     this.filteredDataResults = this.resultsFromAPI.filter(x => x.location === 
                                this.filteredByTerms.includes(term));
  }
}

我不知道我是否正确解释了这一点，但我附上了一张图片以提供帮助。左侧的一系列复选框，右侧的数据集，并且复选框可以是累积的（因此在图像示例中，如果我选择 ITContractor 和 Clinical Psychology，过滤器函数会在从 API 返回的结果中查找某些内容这说明了这两个条件。

在此处输入图像描述

标签： javascripttypescript

解决方案

似乎一些 HOF 和过滤器映射可以帮助您组织用户确定的逻辑/过滤。

const filters = {
  lastHourFilter: (result) => result.postedDate > Date.now() - ms('1 hour'),
  last24HoursFilter: (result) => result.postedDate > Date.now() - ms('24 hours'),
  ...
  itContractorFilter: generateSpecialismFilter('IT Contractor'),
  clinicalPsychologyFilter: generateSpecialismFilter('Clinical Psychology'),
  ...
  fullTimeFilter: generateJobTypeFilter('Full Time'),
  temporaryFilter: generateJobTypeFilter('Temporary')
}

然后检查复选框并确定应将哪些过滤器应用于结果。就像是：

function applyFilters(results) {
  Object.keys(filters).forEach((key) => {
    if (checkboxes[key].checked) results = 
  results.filter(filters[key]);
  });
  return results;
}

这里的 checkboxes 是 DOM 中的复选框映射，由与过滤器相同的键索引。

推荐阅读