Summary of commonly used array filtering and search methods in javascript

Introduce several commonly used array filtering methods to process data.

1. filter() method

Filter data according to conditions and return new data.

const array = [
  {name: '11', age: 1},
  {name: '22', age: 2},
  {name: '33', age: 3}
];
const filterArray = (item =&gt;  &gt; 2);
(filterArray); // Output new array: [{name: '33', age: 3}]

Attachment: Js uses filter to filter items in an array that meet multiple conditions

In JavaScript, you can usefilterFunctions combine multiple conditions to filter arrays. You can create a function that will return a new array containing elements that satisfy all the criteria.

Here is a simple example, suppose we have an array of objects and we want to filter out those objects older than 20 and whose name starts with "J".

let people = [

{ name: 'John', age: 25 },j

{ name: 'Jane', age: 18 },

{ name: 'Doe', age: 22 },

{ name: 'Jane', age: 20 }

];

let filteredPeople = (person =&gt;

 &gt; 20 &amp;&amp; ('J')

);

(filteredPeople);

// Output: [{ name: 'John', age: 25 }, { name: 'Jane', age: 20 }]

In this example,filterThe function accepts an arrow function as an argument, which is for eachpersonThe element is conditionally checked. If this condition is true, the element will be added to the result array. In this example, we use&&Operators combine two conditions.

2. Find() method

Filter data by conditionality, find and return the first matching element, and the return data is an object type or a string type (single item).

const array = ['11', '22', '33'];
const res = (item=&gt; item === '22');
(res); // Output "22"

const array = [{name:'11'}, {name:'22'}, {name:'33'},{name:'22'}];
const res = (item =&gt;  === '22');
(res); // Output {name:'22'}

3. Reduce() method

Filter data by conditions, find and return the first element, and the return data is an object type or a string type.

reduce()Methods are very useful when dealing with large data sets and complex calculations, and can provide concise and efficient code implementations.

explain:

The first parameter is a callback function (also known as an accumulator function).

The second parameter (optional) is the value of the initialization accumulator. Below isreduce()The syntax of the method.

(callback(accumulator, currentValue, currentIndex, array), initialValue);
// Array name.reduce(callback function (old value, element, current subscript, original array), initial value);

If initialValue is not provided, the first element of the array will be used as the initial value of the accumulator and will be processed from the second element of the array. However, in this case, if the array is empty, a TypeError is thrown.

// 1. Calculate the sum of the arrayconst arr = [1, 2, 3, 4, 5];
const sum = ((acc, curr) =&gt; acc + curr, 0); // Output: 15
// 2. Statistics the number of occurrences of each elementconst array = ['11', '22', '11', '22', '33'];
const fruitCount = ((acc, curr) =&gt; {
  acc[curr] = (acc[curr] || 0) + 1;
  return acc;
}, {}); 
// Output: { 11: 2, 22: 2, 33: 1 }

// 3. Two-dimensional array flat one-dimensional arrayconst arr2D = [[1, 2], [3, 4], [5, 6]];
const arrFlat = ((acc, curr) =&gt; (curr), []);
// Output：[1, 2, 3, 4, 5, 6]

4. FindIndex() method

Find and return the index of the first element in the array that meets the condition. If the element that meets the condition cannot be found, -1 will be returned.

const names = ['11', '22', '33'];
const index = (name =&gt; name === '22');
(index); // Output 1

5. include() method

Determines whether the array contains a certain value and returns when appropriatetrueorfalse。

includesandindexOfAll methods use strict equality（'==='）Search for arrays. If the value type is different (e.g.4and'4'), they will return separatelyfalseand-1。

// Check if 11 is an element in the arrayconst array = [11, 22, 33, 11];
const inc = (11);
(inc)//true
 
// Check if the array contains 22 in other places other than the first elementconst array = [11, 22, 33, 44, 55];
const inc = (22, 1);
(inc) //true

6. IndexOf() method

Returns the first index of the matching element found in the array. If the element does not exist in the array, return-1。

includesandindexOfAll methods use strict equality（'==='）Search for arrays. If the value type is different (e.g.4and'4'), they will return separatelyfalseand-1。

// Match the index of 33 in the arrayconst array = [11, 22, 33, 44, 55];
const ind = (33);
(ind)//2

other

If you want to find all items in an array that meets certain criteria, use filter().
If you want to check if at least one project meets a specific condition, use find().
If you want to check that an array contains a specific value, use include().
If you want to find the index of a specific item in an array, use indexOf()

Summarize

This is the end of this article about the summary of commonly used array filtering and search methods in JavaScript. For more related JS array filtering methods, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!