javascript - Angular 6 多场滤镜

Question

我目前正在开发 Angular 6 应用程序。我有一个巨大的文章列表，想对其进行一些过滤。现在它是实时运行的，没有按钮可以提交您的过滤器选项，这一切都在您键入时发生。我想出了一种方法，但它仍然有一些我可以解决的问题，但不喜欢我这样做的方式。我确信，必须有更优雅的东西。

为了更好地发挥想象力，这些文章有类别、标题、作者、标签。我可以根据类别过滤它们......但我想做某种过滤。

示例:过滤类别“sports”中的所有文章，然后从已过滤的数组中过滤标题中包含子字符串“goal”的所有文章，然后过滤作者为“john”的文章，然后过滤所有带有标签“hockey”的文章。

我最终得到了大量的 IF 语句，我认为这不是正确的方法。您能给我推荐一些更好的方法吗？

Answer 1

这就是您可以在没有许多 if 语句的情况下创建多重过滤器的方法。

第一步:创建一个执行各种比较功能的对象:

let compareFunctions = {
    equal: function(a,b) {
        return a === b;
    },
    in: function(a,b){
        return a.indexOf(b) !== -1
    }
}

第二步:创建一个具有以下参数的函数:

1. key - 您要过滤的记录字段的键。
2. 值 - 您要过滤的值
3. compareFn - 用于此字段的比较函数

该函数返回执行条件的函数。

function condition(key, value, comparFn = compareFunctions.equal) {
    return function(data) {
        return comparFn(data[key],value);
    }
}

第三步:创建一个包含表示过滤器值的“条件”函数的数组:

let filterArray = [
    condition('category', 'sports'),
    condition('title', 'goal', compareFunctions.in),
    condition('author', 'john'),
    condition('tags', 'hokey', compareFunctions.in),
]

第四步:通过为每个条目调用条件函数数组并评估每个条件的结果来过滤您的记录:

let result = dataset.filter(y => {
    let resolved = filterArray.map(x => x(y))
    return resolved.every(x => x === true);
})

完整示例代码:

let compareFunctions = {
    equal: function(a,b) {
        return a === b;
    },
    in: function(a,b){
        return a.indexOf(b) !== -1
    }
}

function condition(key, value, comparFn = compareFunctions.equal) {
    return function(data) {
        return comparFn(data[key],value);
    }
}

let dataset = [
    {
        category: "sports",
        title: "goal goal goal",
        author: "john",
        tags: ["hokey", "ice-hokey"]
    },
    {
        category: "news",
        title: "bla bla",
        author: "Timo",
        tags: ["news"]
    },
    {
        category: "news",
        title: "blub blub",
        author: "alex",
        tags: ["hokey", "ice-hokey"]
    },
    {
        category: "sports",
        title: "Kölner Haie bla bla",
        author: "Timo",
        tags: ["hokey", "ice-hokey"]
    }
]

let filterArray = [
    condition('category', 'sports'),
    condition('title', 'goal', compareFunctions.in),
    condition('author', 'john'),
    condition('tags', 'hokey', compareFunctions.in),
]

//console.log(filterArray)

let result = dataset.filter(y => {
    let resolved = filterArray.map(x => x(y))
    return resolved.every(x => x === true);
})

console.log(result)