Detailed introduction to filter function in JavaScript

I believe that friends who have studied Vue inJavaScriptall 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:

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: HerefilterKeyrepresents thecharacters entered in the input String, here we assume thatck

whererowrepresentsdata[i], take the first line as an example to execute Code,rowis{ name: 'Chuck Norris', power: Infinity }, thenObject.keys(row) = ['name', 'power'],keymeansnameandpower. The first isname,row['name'] = 'Chuck Norris', this string contains the string'ck', sois returned true, there is no need to executepower, thenrow, that is,data[0]returns to the new array and continues to traverse the following data. Ifrow['name']does not include this string, thenrow['power']needs to be traversed. If both arefalse, no ## will be returned. #row, continue traversing.

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

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 } ]

filterKeyrepresents the characters entered in the input String, here we assume thatck

rowrepresentsdata[i], take the first line as an example to execute the code,rowis{ name: 'Chuck Norris', power: Infinity }, thenObject.keys(row) = ['name', 'power'],keyrepresentsnameandpower. The first isname,row['name'] = 'Chuck Norris', this string contains the string'ck', sois returned true, there is no need to executepower, thenrow, that is,data[0]returns to the new array and continues to traverse the following data. Ifrow['name']does not include this string, thenrow['power']needs to be traversed. If both arefalse, 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!