15 must-know JavaScript array methods

In JavaScript, an array is a special variable used to store different elements. It has some built-in properties and methods that can be used to add, delete, iterate or operands as needed. And knowing the JavaScript array method can improve your development skills.

j Today, we introduce 15 kinds of JavaScript array methods, these methods 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（）

1、some()

This method tests the array for the function passed by the parameter. If there is an element that matches the test element, it returns true, otherwise it returns false.

Note: some() will not detect an empty array; some() will not change the original array.

const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some(test => test === "d")
//-------> Output : true

2、reduce（）

This method receives a function as an accumulator. It executes the callback function in turn for each element in the array, excluding the 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.

Note: The reduce() method accepts 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 a given function on 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 elements after calling the function. It processes the elements sequentially in the order of the original array elements.

Note: map() will not detect empty arrays; map() will not change the original arrays.

const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x)
//-------> Output : 25
//                  16
//                  9
//                  4
//                  1

6、filter（）

The method receives a function as a parameter. And returns a new array that contains all the elements of the array, and the filter function passed as a parameter returns true to it.

Note: The filter() method is to filter the elements in the data, which means that the data in the original array cannot be modified, but the data in the original array can only be read. The callback needs to return a Boolean value; when it is true, the corresponding The element stays; 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.

Note: forEach() will not execute the callback function for empty arrays.

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 a test condition (function) that meets the condition. It calls the function to execute once for each element in the array. When the element in the array returns true when the condition is tested, findIndex() returns the index position of the element that meets the condition, and the execution function will not be called for the subsequent values. If there are no eligible elements, return -1

Note: The findIndex() function will not be executed for empty arrays, and 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 : 2
myAwesomeArray.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 (judgment within the function). The find() method calls the function execution once for each element in the array: when the element in the array returns true when the test condition is tested, find() returns the element that meets the condition, and the execution function will not be called for the subsequent values. If there is no element that meets the conditions, undefined is returned.

Note: The find() function will not execute for empty arrays; 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 receives a function as a parameter. 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, it will not change the existing arrays. Instead, it just returns a new array of the connected arrays.

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 function of this method is to replace the elements in the array with a fixed value. The fixed value can be letters, numbers, strings, arrays, and so on. It also has two optional parameters, which indicate the start position of the filling (default is 0) and the end position (default is array.length).

Note: The fill() method is used to replace an element of the 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. If a matching string is found, it returns true, otherwise it returns false.

Note: The includes() method is case sensitive.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.includes(3)
// -------> Output : true
myAwesomeArray.includes(8)
// -------> Output : false

14、 reverse（）

This method is used to reverse the order of the elements in the 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() and map() in one 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]