One of the most common tasks when working with an array is to lớn create a new array that contains a subset of elements of the original array.
Suppose you have an array of thành phố objects where each object contains two properties: name and population.
let cities = < name: "Los Angeles", population: 3792621, name: "New York", population: 8175133, name: "Chicago", population: 2695598, name: "Houston", population: 2099451, name: "Philadelphia", population: 1526006>;
let bigCities = <>;for (let i = 0; i if (cities.population > 3000000) bigCities.push(cities); }console.log(bigCities);
The following example returns the same result as the example above:
let bigCities = cities.filter(function (e) return e.population > 3000000;);console.log(bigCities);
Inside the function, we check if the population of each đô thị in the array is greater than 3 million. If it is the case, the function returns true or false otherwise.
The filter() method includes the only elements in the result array if they satisfy the demo in the callback function.
Starting with ES6, you can use the arrow function khổng lồ make it more concise:
let bigCities = cities.filter(city => city.population > 3000000);console.log(bigCities);
Code language: CSS (css)The filter() method creates a new array with all the elements that pass the thử nghiệm implemented by the callback() function.
Internally, the filter() method iterates over each element of the array and passes each element to lớn the callback function. If the callback function returns true, it includes the element in the return array.
The filter() method accepts two named arguments: a callbackfunction & an optional object.
Like other iterative methods of the Array object such as every(), some(), map() & forEach(), the callbackfunction has the following form:
The currentElement argument is the current elementin the array that is being processed by the callback function.The index of the currentElement that is being processed by the callback function.The array object being traversed.
function callback(currentElement, index, array) // ...
The index và array arguments are optional.
The contexObject argument of the filter() method is optional. If you pass the this value, you can reference it by using this từ khóa inside the callback function.
It is important to lưu ý that the filter() method does not change the original array.
Because the filter() method returns a new array, you can chain the result with other array methods such as sort() & map().
For example, the following illustrates how lớn chain the three methods: filter(),sort(), & map():
cities .filter(city => city.population 3000000) .sort((c1, c2) => c1.population - c2.population) .map(city => console.log(city.name + ":" + city.population));
First, filter the cities whose populations are less than 3 million using the filter() method.Second, sort the resulting cities by the populations in descending order using the sort() method.Third, đầu ra array element lớn the console using the map() method.
Code language: CSS (css)How it works.
The following example illustrates the use of the contextObject argument that specifies an object which can be referenced in the callback() function using the this keyword
First, define the isInRange() function that checks if its argument is a number and in the range specified by the lower và upper properties of an object.Then, define the range object with two properties lower and upper.After that, điện thoại tư vấn the filter() methods of the data array & pass in the isInRange() function và the range object. Because we pass in the range object, inside the isInRange() function, the this từ khóa references khổng lồ the range object.Finally, show the result array in the console.
< 10, 1, 5 >
Code language: JSON / JSON with Comments (json)How it works.
Was this tutorial helpful ?
Adding / Removing Elements
Arrays lớn Strings
Arrays & Data Structures