首页 web前端 js教程 JavaScript中对大量数据的多重过滤

JavaScript中对大量数据的多重过滤

Nov 08, 2016 am 09:58 AM

所有代码使用 ES2015 语法,需要 ES5 语法的可以用 Babel - Try it out 或者 TypeScript Playground 翻译。

问题提出

今天有朋友问我一个问题,前端通过 Ajax 从后端取得了大量的数据,需要根据一些条件过滤,过滤的方法是这样的:

class Filter { 
    filterA(s) { 
        let data = this.filterData || this.data; 
        this.filterData = data.filter(m => m.a === s); 
    } 
     
    filterB(s) { 
        let data = this.filterData || this.data; 
        this.filterData = data.filter(m => m.b === s); 
    } 
}
登录后复制

现在迷糊了,觉得这样处理数据不对,但是又不知道该怎么处理。

发现问题

问题就在过滤上,这样固然可以实现多重过滤(先调用 filterA() 再调用 filterB() 就可以实现),但是这个过滤是不可逆的。假如过滤过程是这样:

f.filterA("a1"); 
f.filterB("b1"); 
f.filterA("a2");
登录后复制

本来是希望按 "a1" 和 "b1" 过滤了数据之后,再修改第一个条件为 "a2",但结果却成了空集。

解决问题

发现了问题,就针对性的解决。这个问题既然是因为过滤过程不可逆造成的,那每次都直接从 this.data 开始过滤,而不是从this.filterData 开始过滤,就能解决问题。如果要这样做,就需要将选择的过滤条件先记录下来。

记录过滤条件

用一个列表记录过滤条件当然是可行的,但是注意对同一个条件的两次过滤是互斥的,只能保留最后一个,所以应该用 HashMap 更为合适。

class Filter { 
    constructor() { 
        this.filters = {}; 
    } 
 
    set(key, filter) { 
        this.filters[key] = filter; 
    } 
 
    getFilters() { 
        return Object.keys(this.filters).map(key => this.filters[key]); 
    } 
}
登录后复制

这种情况下,像上面的过程表示为

f.set("A", m => m.a === "a1"); 
f.set("B", m => m.b === "b1"); 
f.set("A", m => m.a === "a1"); 
let filters = f.getFilters(); // length === 2;
登录后复制

上面第 3 句设置的 filter 覆盖了第 1 句设置的那个。现在再用最后取得的 filters 依次来过滤原数据 this.data,就能得到正确的结果。

有人会觉得 getFilters() 返回的列表不是按 set 的顺序的——的确,这是 HashMap 的特点,无序。不过对于简单条件的判断,不管谁先谁后,结果是一样的。但是对于一些复合条件判断,就可能会有影响。

确实需要的话,可以通过 array 代替 map 来解决一下顺序的问题,但这样查找效率会降低(线性查找)。如果还想解决查找效率的问题,可以用 array + map 来处理。这里就不多说了。

过滤

实际上在使用的时候,每次都 getFilter() 再用一个循环来处理确实比较慢。既然 data 都封装成 Filter 中,可以考虑直接给一个filter() 方法来送货过滤接口。

class Filter { 
    filter() { 
        let data = this.data; 
        for (let f of this.getFilters()) { 
            data = data.filter(f); 
        } 
        return data; 
    } 
}
登录后复制

不过这样我觉得效率不太好,尤其是对大量数据的时候。不妨利用一下 lodash 的延迟处理过程。

利用 lodash 的延迟处理

filter() { 
    let chain = _(this.data); 
    for (let f of this.getFilters()) { 
        chain = chain.filter(f); 
    } 
    return chain.value(); 
}
登录后复制

lodash 在数据大于 200 的时候会启用延迟处理过程,也就是说,它会处理成一个循环中依次调用每一个 filter,而不是对每一个 filter 进行一次循环。

延迟处理和非延迟处理通过下图可以看出来区别。非延迟处理总共会进行 n(这里 n = 3) 次大循环,产生 n - 1 个中间结果。而延迟处理只会进行一次大循环,没有中间结果产生。

892670031-581ee02140c15_articlex.png

不过说实在的,我不太喜欢为了一点小事多加载一个库,所以干脆自己做个简单的实现

自己实现延迟处理

filter() { 
    const filters = this.getFilters(); 
    return data.filter(m => { 
        for (let f of filters) { 
            // 如果某个 filter 已经把它过滤掉了,也不用再用后面的 filter 来判断了 
            if (!f(m)) { 
                return false; 
            } 
        } 
        return true; 
    }); 
}
登录后复制

里面的 for 循环还可以用 Array.prototype.every 来简化:

filter() { 
    const filters = this.getFilters(); 
    return data.filter(m => { 
        return filters.every(f => f(m)); 
    }); 
}
登录后复制

数据过滤其实并不是多复杂的事情,只要把思路理清楚,搞明白什么数据是需要保留的,什么数据是临时(中间过程)的,什么数据是最终结果……利用 Array.prototype 中的相关方法,或者诸如 lodash 之类的工具,很容易就处理出来了。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

在JavaScript中替换字符串字符 在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

自定义Google搜索API设置教程 自定义Google搜索API设置教程 Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中,提供了比标准WordPress主题搜索功能更精致的搜索体验。 令人惊讶的是简单!您将能够将搜索限制为Y

示例颜色json文件 示例颜色json文件 Mar 03, 2025 am 12:35 AM

本文系列在2017年中期进行了最新信息和新示例。 在此JSON示例中,我们将研究如何使用JSON格式将简单值存储在文件中。 使用键值对符号,我们可以存储任何类型的

10个jQuery语法荧光笔 10个jQuery语法荧光笔 Mar 02, 2025 am 12:32 AM

增强您的代码演示:开发人员的10个语法荧光笔 在您的网站或博客上共享代码片段是开发人员的常见实践。 选择合适的语法荧光笔可以显着提高可读性和视觉吸引力。 t

构建您自己的Ajax Web应用程序 构建您自己的Ajax Web应用程序 Mar 09, 2025 am 12:11 AM

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

8令人惊叹的jQuery页面布局插件 8令人惊叹的jQuery页面布局插件 Mar 06, 2025 am 12:48 AM

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

10 JavaScript和JQuery MVC教程 10 JavaScript和JQuery MVC教程 Mar 02, 2025 am 01:16 AM

本文介绍了关于JavaScript和JQuery模型视图控制器(MVC)框架的10多个教程的精选选择,非常适合在新的一年中提高您的网络开发技能。 这些教程涵盖了来自Foundatio的一系列主题

什么是这个'在JavaScript? 什么是这个'在JavaScript? Mar 04, 2025 am 01:15 AM

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象,但具体取决于函数的调用方式。 没有当前对象时,this 指代全局对象。在 Web 浏览器中,它由 window 表示。 调用函数时,this 保持全局对象;但调用对象构造函数或其任何方法时,this 指代对象的实例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前,这句话可

See all articles