Javascript 角6多场滤波器_Javascript_Angular_Frontend_Filtering

Javascript 角6多场滤波器

javascript angular

Javascript 角6多场滤波器,javascript,angular,frontend,filtering,Javascript,Angular,Frontend,Filtering,我目前正在开发angular 6应用程序。我有一个巨大的文章列表，想做一些过滤。现在它可以实时工作，没有按钮来提交你的过滤选项，一切都在你输入的时候发生。我想了一个方法，但它仍然有一些问题我可以解决，但不喜欢我这样做。我敢肯定，一定有更优雅的东西为了更好地发挥想象力，这些文章有类别、标题、作者和标签。我可以根据类别过滤它们，比如说。。。但是我想做一些过滤示例：筛选“sports”类别中的所有文章，然后从已筛选的数组中筛选标题中包含子字符串“goal”的所有文章，然后筛选作者为“john”的文

我目前正在开发angular 6应用程序。我有一个巨大的文章列表，想做一些过滤。现在它可以实时工作，没有按钮来提交你的过滤选项，一切都在你输入的时候发生。我想了一个方法，但它仍然有一些问题我可以解决，但不喜欢我这样做。我敢肯定，一定有更优雅的东西

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

示例：筛选“sports”类别中的所有文章，然后从已筛选的数组中筛选标题中包含子字符串“goal”的所有文章，然后筛选作者为“john”的文章，然后筛选标记为“hockey”的所有文章

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

这是创建一个没有很多if语句的多重过滤器的方法

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

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

第二步：创建具有以下参数的函数：

key-要筛选的记录字段的键

值-要按其进行筛选的值

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)

这就是创建一个没有许多if语句的多重过滤器的方法