Detailed introduction to filter function in JavaScript

I believe that friends who have studied Vue in JavaScript all know the filter function, but there are many friends who don’t know how to filter. If they know it, it may be ambiguous, so we will give it today. Let’s introduce the filter function in JavaScript in detail!

When I saw the grid component in the example, I was confused by a piece of nested code. I will understand it only after asking for help (segmentful questions). I hereby record it for subsequent inquiries:

Click here to see all the code

Some code snippets:

<p style="margin-top: 5px; margin-bottom: 14px; line-height: normal;">data = data.filter(function (row) {<br/>    return <a href="http://www.php.cn/wiki/60.html" target="_blank">Object</a>.keys(row).some(function (key) {<br/>        return String(row[key]).toLowerCase().<br/>        indexOf(filterKey) > -1;<br/>    });<br/>});<br/><br/>data = [<br/>    { name: &#39;Chuck Norris&#39;, power: Infinity },<br/>    { name: &#39;Bruce Lee&#39;, power: 9000 },<br/>    { name: &#39;Jackie Chan&#39;, power: 7000},<br/>    { name: &#39;Jet Li&#39;, power: 8000 }<br/>]<br/></p>

Note: Here filterKey represents the characters entered in the input String , here we assume that ck

where row represents data[i], take the first line as an example to execute Code, row is { name: 'Chuck Norris', power: Infinity }, then Object.keys(row) = ['name', 'power'], key means name and power. The first is name, row['name'] = 'Chuck Norris', this string contains the string 'ck', so is returned true, there is no need to execute power, then row, that is, data[0] returns to the new array and continues to traverse the following data. If row['name'] does not include this string, then row['power'] needs to be traversed. If both are false, no ## will be returned. #row, continue traversing.

The entire code involves vue's

data binding, but I won't record it because I am still in a confused state.

I am a front-end novice. If you find any mistakes in this article or do not understand it well, I hope you will give me some advice.

I am currently learning Vue. When I saw the grid component in the example, I was confused by a piece of nested code. I will understand it only after asking for help from many sources (segmentful questions). I hereby record it for subsequent inquiries. ：

Click here to see all the code

Some code snippets:

data = data.filter(function (row) {
    return Object.keys(row).some(function (key) {
        return String(row[key]).toLowerCase().
        indexOf(filterKey) > -1;
    });
});

data = [
    { name: 'Chuck Norris', power: Infinity },
    { name: 'Bruce Lee', power: 9000 },
    { name: 'Jackie Chan', power: 7000},
    { name: 'Jet Li', power: 8000 }
]

Note: Here

filterKey represents the characters entered in the input String, here we assume that ck

where

row represents data[i], take the first line as an example to execute the code, row is { name: 'Chuck Norris', power: Infinity }, then Object.keys(row) = ['name', 'power'], key represents name and power. The first is name, row['name'] = 'Chuck Norris', this string contains the string 'ck', so is returned true, there is no need to execute power, then row, that is, data[0] returns to the new array and continues to traverse the following data. If row['name'] does not include this string, then row['power'] needs to be traversed. If both are false, no ## will be returned. #row, continue traversing. The entire code involves Vue data binding, but I won’t record it because I am still in a state of ignorance.

Summary:
#This article introduces the filter function in JavaScript in detail through example code. I believe that friends will also know this. Learn more and hope it will be helpful to your work!

Related recommendations:

Simple application of ajax and how to write filter

Detailed introduction to the filter attribute of CSS3

The url-pattern setting method and mapping rules of servlet and filter

The above is the detailed content of Detailed introduction to filter function in JavaScript. For more information, please follow other related articles on the PHP Chinese website!