Methods like includes indexOf lastIndexOf used on string are also used on arrays to search its items.
indexOf, lastIndexOf, and includes methods
indexOf method
The indexOf method has its syntax shown below:
Syntax
array.indexOf(item[, from])
The search is from left to right.
item => The item is an element in the array.
from => The from specifies where to start the counting. It ignores the matching item before it.
See the example below:
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];
console.log( numbs.indexOf(0) ); // 1
console.log( numbs.indexOf(0, 2) ); // 8
lastIndexOf method
The lastIndexOf method has its syntax shown below:
Syntax
array.lastIndexOf(item[, from])
The search is from right to left.
item => The item is an element in the array.
from => The from specifies where to start the counting. It ignores the matching item before it.
See the example below:
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];
console.log( numbs.indexOf(0) ); // 9
console.log( numbs.indexOf(0, 2) ); // 1
If both the indexOf and lastIndexOf items it returns -1.
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 0 ];
console.log( numbs.indexOf(9) ); // -1
console.log( numbs.lastIndexOf(9) ); // -1
includes method
The includes method has its syntax shown below:
Syntax
array.includes(item)
item => If the item exist it returns true, false otherwise
See the example below:
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];
console.log( numbs.includes(4) ); // true
console.log( numbs.includes(3) ); // false
includesmethod can also check ifNaNbutindexOf/lastIndexOfcan't.
See the example below:
const numbs = [ 5, 0, 2, 4, NaN, 1, 4, 6, 0, NaN ];
console.log( numbs.indexOf(NaN, 2) ); // -1
console.log( numbs.lastIndexOf(NaN, 2) ); // -1
console.log( numbs.includes(NaN) ); // true
-1is returned for bothindexofandlastIndexOfbecause equality===doesn't work forNaN.
find and findIndex methods
The find method finds an object with a specific condition.
The find method has its syntax shown below:
Syntax
array.find(func)
func => func is a callback function
It returns the first matching item in an array
See the example below:
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];
const greaterThan3 = num => {
return num > 3;
};
numbs.find(greaterThan3); // 5 => 5 is greater than 3
findIndex
The findIndex method has its syntax shown below:
array.findIndex(function)
It returns the index of the first matching item in an array.
See the example below:
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];
const greaterThan3 = num => {
return num > 3;
};
numbs.findIndex(greaterThan3); // 0 => 5 is at index 0
Since functions are first-class objects, we can have an object in place of the callback function func.
See the syntax below:
array.find(obj)
See the example below:
const names = [
{ id: 1, name: "Bello" },
{ id: 2, name: "John" },
{ id: 3, name: "Sarah" }
];
const id2 = item => {
return item.id === 2;
};
const findName = names.find(id2);
findName.name;
See another example but with the findIndex method.
const names = [
{ id: 1, name: "Bello" },
{ id: 2, name: "John" },
{ id: 3, name: "Sarah" }
];
const id2 = item => {
return item.id === 2;
};
const findName = names.findIndex(id2);
findName; // 2 => returns index of item.id
General syntax of find and findIndex methods
The general syntax is shown below:
arr.find(func(item[, index[, array]]))
filter method
The syntax is similar to find, but filter returns an array of all matching elements:
The find method has its syntax shown below:
Syntax
array.filter(func)
func => func is a callback function
See the examples below:
const numbs = [ 5, 0, 2, 4, 2, 1, 4, 6, 0, 10 ];
const greaterThan3 = num => {
return num > 3;
};
numbs.filter(greaterThan3); // [ 5, 4, 4, 6, 10 ]
const names = [
{ id: 1, name: "Bello" },
{ id: 2, name: "John" },
{ id: 3, name: "Sarah" }
];
const id2 = item => {
return item.id > 2;
};
const findNames = names.filter(id2);
findNames; // [ { id: 2, name: 'John' }, { id: 3, name: 'Sarah' } ]
The general syntax is shown below:
array.filter(func(item[, index[, array]]))
Happy coding!!!
Top comments (0)