How does JS find an element in an array

preface

Sometimes we want to find out if there are elements in an array that meet the criteria, and then return that element, or the index value of that element. Javascript provides us with a variety of methods, mainly divided into value lookup and some kind of conditional lookup, starting with these methods 📄.

1. Array.prototype.includes()

The includes() method is used to determine whether an array contains a specified value and returns true if it does, false otherwise.

This method supports two arguments, valueToFind, fromIndex (optional). The first argument is’ the value of the element to find ‘. The second argument is’ at which index to start the search ‘. The search starts in ascending order from array.length + fromIndex’s index (even if you jump ahead of fromIndex’s absolute index from the end and then search backwards).

Var a = [6]
a.includes(2)  // true
Anderson ncludes / / (2, 3)false
a.includes(5,-2)  // true
a.includes(5,-1) // false Copy the code

2. Array.prototype.indexOf()

The indexOf() method returns the first indexOf the specified element in the array, or -1 if none exists.

This method supports two arguments, searchElement and fromIndex (optional). The first argument is’ the element to look for ‘and the second argument is’ the index to start the search’. If the index value is greater than or equal to the length of the array, it means that the search will not take place in the array and returns -1. If the index value provided in the argument is a negative value, it is treated as an offset at the end of the array, with -1 indicating the search starts from the last element, -2 indicating the search starts from the next-to-last element, and so on. Note: If the index value provided in the argument is a negative value, the lookup order does not change, and the lookup order is still the array queried from front to back. If the offset index is still less than 0, the entire array will be queried. The default value is 0.

var array = [2, 5, 9];

array.indexOf(2); / / 0array.indexOf(7);     // -1
array.indexOf(9, 2); / / 2array.indexOf(2, -1); // -1 array.indexOf(2, -3); / / 0Copy the code

3. Array.prototype.lastIndexOf()

The lastIndexOf() method returns the index of the last element in the array, or -1 if none exists. Look forward from the back of the array, starting at fromIndex.

This method supports two arguments, searchElement and (optionally) fromIndex, the first of which is’ element to be looked for ‘. The second argument is’ reverse lookup from here ‘, which defaults to the length of the array minus 1(arr.length-1), meaning that the entire array is searched. If the value is greater than or equal to the length of the array, the entire array is searched. If it is negative, it is treated as an offset forward from the end of the array. Even if the value is negative, the array will still be looked up backwards. If the value is negative and its absolute value is greater than the array length, the method returns -1, meaning that the array is not found.

var array = [2, 5, 9, 2];

array.lastIndexOf(2); / / 3array.lastIndexOf(7);      // -1
array.lastIndexOf(2, 3); / / 3array.lastIndexOf(2, 2); / / 0array.lastIndexOf(2, -2); / / 0array.lastIndexOf(2, -1); / / 3Copy the code

4. Array.prototype.some()

The some() method tests that at least one element in the array passes the provided function test. It returns a Boolean value.

❝

Arr. Some (element[, index[, array]])[, thisArg])

❞

“Parameters” :

Callback: a function used to test each element, taking three arguments:

• Element The element being processed in the array.
• Index Indicates the index of the element being processed in the array.
• Array Optional, the array itself to be traversed.

ThisArg: Optional, this value used for callback.

The following example checks if any element in an array is greater than 10.

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true Copy the code

You can also use the arrow function to achieve the same effect.

[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true
Copy the code

5. Array.prototype.every()

The every() method tests whether all elements in an array pass the test of a given function. It returns a Boolean value.

❝

This method takes the same parameters as the array.prototype.some () method, which I won’t cover here. The difference between them is that some() is true as long as one element in the array satisfies the condition, and every() is true as long as all of the elements satisfy the condition.

❞

Checks if all elements in the array are greater than 10.

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
Copy the code

6. Array.prototype.filter()

The filter() method creates a new array containing all the elements of the test implemented through the provided function.

This method takes the same arguments as some() and every(), and callback tests the function for each element of the array. Returning true indicates that the element passed the test and is retained, false does not.

The following example uses filter to create a new array consisting of elements from the original array with values greater than 10.

function isBigEnough(element) {
  return element >= 10;
}

var filtered = [12, 5, 8, 130, 35].filter(isBigEnough);
// filtered is [12, 130, 35] Copy the code

7. Array.prototype.find()

The find() method returns the value of the first element in the array that satisfies the provided test function. Otherwise return undefined.

❝

This method takes the same arguments as some(),every(),filter().

❞

Find an object in an array using its properties.

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'orange', quantity: 5}
];
 function findOranges(fruit) {  return fruit.name === 'orange'; }  console.log(inventory.find(findOrange)); // { name: 'orange', quantity: 5 } Copy the code

8. Array.prototype.findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided test function. Returns -1 if no corresponding element is found.

❝

This method takes the same parameters as find(), except that one returns the element and one returns the element’s index in the array.

❞

Find the index of the object whose name is orange in the array.

var inventory = [
    {name: 'apple', quantity: 2},
    {name: 'banana', quantity: 0},
    {name: 'orange', quantity: 5}
];
 function findOrange(fruit) {  return fruit.name === 'orange'; }  console.log(inventory.findIndex(findOrange)); // { name: 'orange', quantity: 5 } Copy the code

conclusion

For easy lookup and memorization, I’ve summarized these methods into a table 📝.