Javascript：数组中的多个过滤器答案

【问题标题】：Javascript: Multiple Filters in an ArrayJavascript：数组中的多个过滤器
【发布时间】：2017-12-18 11:45:20
【问题描述】：

我有一组项目，我希望用户能够使用多个下拉列表进行过滤。在这种情况下，字符串的每个字符都有自己的过滤器。

我的问题是，一旦我的数组已经被过滤，我该如何过滤它？即我的数组，部件，["35X", "45X" "35L"]，如果我已经过滤到包含 '3' 的字符串，如何过滤到包含 3 和 L 的字符串？

    var parts = [" 35X", " 35L", " X44", " 55L", " 55X"];
    var obj8 = document.getElementById("selectOperators");
    var obj1 = document.getElementById("Series");

function getOption1() {
    var din = filterParts(obj1.options[obj1.selectedIndex].value)
    document.getElementById("other").innerHTML = din;
    }

function getOption8() {
    var ryan = filterParts(obj8.options[obj8.selectedIndex].value)
    document.getElementById("other").innerHTML = ryan;
    }

function filterParts(query) {
    return parts.filter((el) => el.toLowerCase().indexOf(query.toLowerCase()) > -1)
    }

如果可能的话不使用 jquery 这样做

【问题讨论】：

parts.filter(part => /^3.*L$/.test(part)) 是您想要根据“以 3 开头并以 L 结尾”进行过滤的操作
你可以像这样按顺序过滤：arr1.filter(filterAfunc).filter(filterBfunc);

标签： javascript html arrays filter

【解决方案1】：

Array.prototype.filter 返回一个数组，因此您可以链接后续的.filter 调用以基于多个谓词进行过滤

const startsWith = s => x =>
  x.substr(0, s.length) === s
  
const endsWith = s => x =>
  x.substr(-s.length) === s
  
const data =
  ['35X', '45X', '35L']

const result =
  // chain filter calls, one after the next
  data.filter(startsWith('3')) // => [ '35X', '35L' ]
      .filter(endsWith('L'))   // => [ '35L' ]

console.log(result)
// [ '35L' ]

您可能会怀疑，链接许多.filter 调用将创建许多中间数组结果，并将遍历一系列中的每一个。对于大型数据集，创建这些中间结果可能非常昂贵。如果您遇到这种情况，我邀请您查看transducers——这个概念比简单的数组过滤更复杂，但您不必了解它们的工作原理就可以使用它们。

【讨论】：

我认为我提出问题的方式可能会稍微误导我正在寻找的答案。我想实际上不是按开始/结束字符过滤（因为我的实际项目包含 10+ 个字符串）。抱歉，我只是将问题编辑得更清楚一点。

【解决方案2】：

我推荐一个递归过滤函数

var arr, find, _findByQuery;

arr = [" 35X", " 35L", " X44", " 55L", " 55X"];

_findByQuery = function(query, a) {
  return a.filter(function(obj) {
    return obj.toLowerCase().indexOf(query) > -1;
  });
};

find = function(queries, a) {
  var q, rslt, _i, _len;
  rslt = a.slice();
  for (_i = 0, _len = queries.length; _i < _len; _i++) {
    q = queries[_i];
    rslt = _findByQuery(q, rslt);
  }
  return rslt;
};

然后您可以像这样链接任意数量的查询：

find(['3', 'L'], arr) // ["35L"]

这不一定关心您的各个查询的位置，因为这需要更深入的 UI 来支持过滤选项。

【讨论】：