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

This article mainly introduces JavaScript Array.filter () how to traverse the elements in the array, the article introduces in great detail, has a certain reference value, interested friends must read it!

JavaScriptArray.filter () method

The filter () method takes a callback function and calls it for each item it iterates through the target array. The callback function can accept the following parameters:

CurrentItem: this is the element in the array currently being iterated over.

Index: this is the index position within the currentItem array.

Array: this represents the target array and all its items.

The filter method creates a new array and returns all items that meet the criteria specified in the callback.

How to use the filter () method in JavaScript

In the following example, I'll show you how to filter items from an array in JavaScript using the filter () method.

Filter () example 1: how to filter items from an array

In this example, we filter out every toddler (ages between 0 and 4).

Let people = [{name: "aaron", age: 65}, {name: "beth", age: 2}, {name: "cara", age: 13}, {name: "daniel", age: 3}, {name: "ella", age: 25}, {name: "fin", age: 1}, {name: "george", age: 43} ] let toddlers = people.filter (person = > person.age member.position = = "developer") console.log (developers) / * [{name: "aaron", position: "developer"}, {name: "cara", position: "developer"}, {name: "george", position: "developer"}] * /

In the above example, we filtered out the developers. But what if we want to filter out every member who is not a developer?

We can do this:

Let team = [{name: "aaron", position: "developer"}, {name: "beth", position: "ui designer"}, {name: "cara", position: "developer"}, {name: "daniel" Position: "content manager"}, {name: "ella", position: "cto"}, {name: "fin", position: "backend engineer"}, {name: "george", position: "developer"} ] let nondevelopers = team.filter (member = > member.position! = = "developer") console.log (nondevelopers) / * [{name: "beth", position: "ui designer"}, {name: "daniel", position: "content manager"}, {name: "ella" Position: "cto"}, {name: "fin", position: "backend engineer"}] * / example 3: how to access the index property

This is a game. There are three winners in this competition. The first place won the gold medal, the second won the silver medal and the third won the bronze medal.

By using filter in each iteration and accessing the properties of each index project, we can filter each of the three winners into a different variable.

Let winners = ["Anna", "Beth", "Cara"] let gold = winners.filter ((winner, index) = > index = = 0) let silver = winners.filter ((winner, index) = > index = = 1) let bronze = winners.filter ((winner, index) = > index = = 2) console.log (Gold winner: ${gold}, Silver Winner: ${silver}, Bronze Winner: ${bronze}) / / "Gold winner: Anna, Silver Winner: Beth, Bronze Winner: Cara" example 4: how to use array parameters

One of the most common uses of the third parameter (array) is to check the state of the array being iterated. For example, we can check if there are other items in the array. Depending on the result, we can specify that different things should happen.

In this example, we will define an array of four people. However, since there are only three winners, the fourth person on the list will have to give a discount.

To be able to do this, we need to get information about the target array in each iteration.

Let competitors = ["Anna", "Beth", "Cara", "David"] function displayWinners (name, index, array) {let isNextItem = index + 1

< array.length ? true : false if (isNextItem) { console.log(`The No${index+1} winner is ${name}.`); } else { console.log(`Sorry, ${name} is not one of the winners.`) }}competitors.filter((name, index, array) =>

DisplayWinners (name, index, array) / * "The No1 winner is Anna."The No2 winner is Beth."The No3 winner is Cara."Sorry, David is not one of the winners." * / how to use context objects

In addition to the callback function, the filter () method can also receive context objects.

Filter (callbackfn, contextobj)

You can then reference this object from within the callback function using the this keyword reference.

Example 5: how to access the context object this

This will be similar to example 1. We will filter out all people between the ages of 13 and 19.

However, we do not hard-code the values inside the callback function. Instead, we define these values 13 and 19 as properties inside the range object, and then pass in their filter as the context object (the second parameter).

Let people = [{name: "aaron", age: 65}, {name: "beth", age: 15}, {name: "cara", age: 13}, {name: "daniel", age: 3}, {name: "ella", age: 25}, {name: "fin", age: 16}, {name: "george", age: 18}, let range = {lower: 13 Upper: 16} let teenagers = people.filter (function (person) {return person.age > = this.lower & & person.age

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.