Question

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

我的问题是如果我的数组已被过滤后如何过滤？即我的数组，部分，[“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

Answer 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 - 这个概念比简单的数组过滤更复杂，但您无需了解它们如何工作以便使用它们。

Answer 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来支持过滤选项。

Javascript：数组中的多个过滤器

2 个答案: