There are 15 array methods for JavaScript that can help you process data correctly.
1.some()
2. reduce()
3. Every()
4. map()
5. flat()
6. filter()
7. forEach()
8. findIndex()
9. find()
10. sort()
11. concat()
12. fill()
13. includes()
14. reverse()
15. flatMap()
Note that in most cases, we will simplify the functions that are passed as parameters.
1,some()
This method tests the array of functions passed as parameters. Returns true if one of the elements matches the test element, otherwise false.
some() does not detect empty arrays; some() does not change the original array.
const myAwesomeArray = ["a", "b", "c", "d", "e"] myAwesomeArray.some(test => test === "d") //-------> Output : true
2,reduce()
This method takes a function as an accumulator. It performs a callback function for each element in the array in turn, excluding those elements in the array that have been deleted or have never been assigned. The function is applied to the accumulator, and each value in the array returns only one value at the end.
The reduce() method takes four parameters: the initial value (the return value of the last callback), the current element value, the current index, and the original array.
const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.reduce((total, value) => total * value) // 1 * 2 * 3 * 4 * 5 //-------> Output = 120
3,Every()
This method is to run the given function for each item in the array. If each element of the array matches the test, it returns true, otherwise it returns false.
const myAwesomeArray = ["a", "b", "c", "d", "e"] myAwesomeArray.every(test => test === "d") // -------> Output : falseconst myAwesomeArray2 = ["a", "a", "a", "a", "a"] myAwesomeArray2.every(test => test === "a") //-------> Output : true
4,map()
This method returns a new array. The elements in the array are the values processed by the original array element call function. It processes elements in order of the original array elements.
map() does not detect empty arrays; map() does not change the original array.
const myAwesomeArray = [5, 4, 3, 2, 1]myAwesomeArray.map(x => x * x) //-------> Output : 25 // 16 // 9 // 4 // 1
5,flat()
This method creates a new array that contains the holden element on the subarray and flattens it into the new array. Note that this method can only have one level of depth.
const myAwesomeArray = [[1, 2], [3, 4], 5] myAwesomeArray.flat() //-------> Output : [1, 2, 3, 4, 5]
6,filter()
This method takes a function as an argument. And returns a new array that contains all the elements of the array and returns true as a filter function passed as a parameter.
The filter () method is to filter the elements in the data, that is to say, the data in the original array cannot be modified, only the data in the original array can be read, and the callback needs to return a Boolean value; when it is true, the corresponding element is left; when it is false, the corresponding element is filtered out.
const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, { id: 4, name: "Mass" },] myAwesomeArray.filter(element => element.name === "Mass") //-------> Output : 0:{id: 3, name: "Mass"}, // 1:{id: 4, name: "Mass"}
7,forEach()
This method is used to call each element of the array. And pass the element to the callback function.
forEach() does not perform a callback function for an empty array.
const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" },] myAwesomeArray.forEach(element => console.log(element.name)) //-------> Output : john // Ali // Mass
8, findIndex()
This method returns the position of the first element of the array passed in a test condition (function). It calls the function once for each element in the array. When the element in the array returns true when testing the condition, findIndex() returns the index position of the qualified element, and the subsequent value will not call the execution function. Return - 1 if there is no eligible element
findIndex() does not execute for an empty array. findIndex() does not change the original value of the array.
const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" },]myAwesomeArray.findIndex(element => element.id === 3)// -------> Output : 2myAwesomeArray.findIndex(element => element.id === 7)//-------> Output : -1
9, find()
This method returns the value of the first element of the array that passed the test (judged within the function). The find() method calls the function once for each element in the array: when the element in the array returns true when testing the condition, find() returns the qualified element, and the subsequent value will not call the execution function. If no eligible element is returned undefined.
Find() does not execute for an empty array; find() does not change the original value of the array.
const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" },] myAwesomeArray.find(element => element.id === 3) // -------> Output : {id: 3, name: "Mass"} myAwesomeArray.find(element => element.id === 7) //-------> Output : undefined
10, sort()
This method takes a function as an argument. It sorts the elements of the array and returns it. You can also use the sort() method with parameters to sort.
const myAwesomeArray = [5, 4, 3, 2, 1] // Sort from smallest to largestmyAwesomeArray.sort((a, b) => a - b) // -------> Output : [1, 2, 3, 4, 5] // Sort from largest to smallestmyAwesomeArray.sort((a, b) => b - a) //-------> Output : [5, 4, 3, 2, 1]
11, concat()
This method is used to connect two or more arrays / values and does not change the existing array. Only a new array of connected arrays is returned.
const myAwesomeArray = [1, 2, 3, 4, 5]const myAwesomeArray2 = [10, 20, 30, 40, 50] myAwesomeArray.concat(myAwesomeArray2) //-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]
12, fill()
The purpose of this method is to replace elements in an array with a fixed value. The fixed values can be letters, numbers, strings, arrays, and so on. It also has two optional parameters that represent the start (default 0) and end (default array.length) of the fill.
The fill() method is used to replace the elements of an array with a fixed value.
const myAwesomeArray = [1, 2, 3, 4, 5] // The first argument (0) is the value // The second argument (1) is the starting index // The third argument (3) is the ending indexmyAwesomeArray.fill(0, 1, 3) //-------> Output : [1, 0, 0, 4, 5]
13, includes()
This method is used to determine whether the string contains the specified substring. Returns true if a matching string is found, false otherwise.
The includes() method is case sensitive.
const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.includes(3) // -------> Output : truemyAwesomeArray.includes(8) // -------> Output : false
14, reverse()
This method is used to reverse the order of elements in an array. The first element becomes the last, and the last element becomes the first.
const myAwesomeArray = ["e", "d", "c", "b", "a"] myAwesomeArray.reverse() // -------> Output : ['a', 'b', 'c', 'd', 'e']
15, flatMap()
This method applies the function to each element of the array, and then compresses the result into a new array. It combines flat () with map () in a function.
const myAwesomeArray = [[1], [2], [3], [4], [5]] myAwesomeArray.flatMap(arr => arr * 10) //-------> Output : [10, 20, 30, 40, 50] // With .flat() and .map()myAwesomeArray.flat().map(arr => arr * 10) //-------> Output : [10, 20, 30, 40, 50]
