Shulou(Shulou.com)06/02 Report--

This article shows you how to filter a large amount of data in JavaScript. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

All code uses ES2015 syntax, and those that need ES5 syntax can be translated with Babel-Try it out or TypeScript Playground.

Question raised

Today, a friend asked me a question. The front end obtains a large amount of data from the back end through Ajax, which needs to be filtered according to some conditions. The filtering method is as follows:

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);}}

Now I'm confused. I think it's wrong to deal with the data, but I don't know what to do with it.

Find a problem

The problem is filtering, which allows multiple filtering (which can be achieved by calling filterA () and then filterB ()), but it is irreversible. If the filtering process is like this:

F.filterA ("A1"); f.filterB ("b1"); f.filterA ("a2")

It was hoped that after filtering the data by "A1" and "b1", the condition would be changed to "a2", but it turned out to be an empty set.

Solve the problem

If you find a problem, solve it pertinently. Since this problem is caused by the irreversibility of the filtering process, it can be solved by filtering directly from this.data each time, rather than from this.filterData. If you want to do this, you need to record the selected filter conditions first.

Record filter condition

It is certainly possible to record filter conditions with a list, but note that two filters for the same condition are mutually exclusive and only one filter can be retained, so it is more appropriate to use HashMap.

Class Filter {constructor () {this.filters = {};} set (key, filter) {this.filters [key] = filter;} getFilters () {return Object.keys (this.filters) .map (key = > this.filters [key]);}}

In this case, the process like the one above is represented as

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

The filter set in sentence 3 above overrides the one set in sentence 1. Now use the filters obtained by * * to filter the original data this.data in turn, and you can get the correct result.

Some people will think that the list returned by getFilters () is not in the order of set-- indeed, this is a characteristic of HashMap, unordered. However, for the judgment of simple conditions, no matter who comes first, the result is the same. But for some compound condition judgment, it may have an impact.

If you really need to, you can use array instead of map to solve the problem of order, but this will reduce the efficiency of lookup (linear lookup). If you still want to solve the problem of search efficiency, you can use array + map to deal with it. I won't say much here.

Filter

In fact, it's really slow to use getFilter () one loop at a time when using it. Now that the data is encapsulated in Filter, consider giving a filter () method directly to the shipping filter interface.

Class Filter {filter () {let data = this.data; for (let f of this.getFilters ()) {data = data.filter (f);} return data;}}

But I don't think it's very efficient, especially for a lot of data. Take advantage of lodash's deferred processing.

Using the delay processing of lodash

Filter () {let chain = _ (this.data); for (let f of this.getFilters ()) {chain = chain.filter (f);} return chain.value ();}

Lodash enables deferred processing when the data is greater than 200, that is, it is processed into a loop in which each filter is called in turn, rather than a loop for each filter.

The difference between deferred processing and non-deferred processing can be seen in the following figure. The non-delayed processing performs a total of n (here n = 3) large cycles, resulting in n-1 intermediate results. On the other hand, there is only one big cycle in delayed processing, and there is no intermediate result.

But to be honest, I don't like loading an extra library for a little thing, so I might as well make a simple implementation myself.

Implement deferred processing on your own

Filter () {const filters = this.getFilters (); return data.filter (m = > {for (let f of filters) {/ / if a filter has filtered it out, it is no longer necessary to use the following filter to judge if (! f (m)) {return false;}} return true;});}

The for loop can also be simplified with Array.prototype.every:

Filter () {const filters = this.getFilters (); return data.filter (m = > {return filters.every (f = > f (m));});}

Data filtering is not a complicated matter, as long as you figure out what data needs to be retained, what data is temporary (intermediate process), and what data is the final result. Using the relevant methods in Array.prototype, or tools such as lodash, it is easy to deal with.

The above content is how to filter a large amount of data in JavaScript. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.