Use of foreach, map, filter, reduce, find, some and every methods in js array

Posted by chronister on Fri, 28 Jan 2022 07:55:43 +0100

1, Array prototype. forEach()

No return value
This method traverses each item in the array and executes the given function once for each element of the array. The forEach method cannot modify array items, but the original array can be modified through the index of the array.

Sample code

const arr = [1,2,3]
arr.forEach((value,index,array)=>{
	console.log("The first"+index+"Elements are"+value)
})
/*
Output content
 Element 0 is 1
 The first element is 2
 The second element is 3
*/

Modify the original array by index

const arr = [1,2,3]
arr.forEach((value,index,array)=>{
	array[index] = index;
	console.log("The first"+index+"Elements are"+value)
})
/* Output content
 The 0 th element is 0
 The first element is 1
 The second element is 2
*/

2, Array prototype. map()

There is a return value
This method copies the original array, executes the given function for each element in the copied array, and finally returns the new array.

Sample code

const arr = [1,2,3]
const arr1 = arr.map((value,index)=>value*2)
console.log(arr1.toString())
/* Output content
2,4,6
*/

3, Array prototype. filter()

There is a return value
This method copies the original array and controls whether the elements are retained by providing the return value of the function.
When the return value is true, the element is retained in the new array. When the return value is false, the element is not retained.

Sample code

const arr = [1,2,3,4,5,6,7,8,8,10]
const arr1 = arr.filter(value=>value>5)
console.log(arr1.toString())
/* Output content
6,7,8,9,10
*/

4, Array prototype. reduce()

There is a return value
This method receives a function and an initial value as parameters. The reduce method will execute the function for each element in the array in turn, and summarize and return the results.

Do not pass the initial value, and directly take the first element in the array as the initial value.

Example code - accumulation

const arr = [1,2,3,4,5]
const result = arr.reduce((prev,cur)=>prev+cur)
console.log(result)
/* Output content
15
*/

prev the value returned by the last call to the callback function
Currently processed element in cur array

Sample code - Maximum

const arr = [1,3,2,5,4]
const max = arr.reduce((prev,cur)=>Math.max(prev,cur))
console.log(max)
/* Output content
5
*/

Example code - array de duplication

const arr= ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
const arr1= arr.sort().reduce((prev, cur)=>{
  if (prev.indexOf(cur) === -1) {
    prev.push(cur)
  }
  return prev
}, [])
console.log(arr1.toString())
/* Output content
["a", "b", "c", "e", "d"]
*/

5, Array prototype. find()

There is a return value
This method returns the value of the first element in the array that satisfies the provided test function.
If all do not match, return undefined.

Sample code

const arr = [1,2,3,4,5]
const result = arr.find((value,index)=>value>=3)
console.log(result)
/* Output content
3
*/

6, Array prototype. some()

Return Boolean
This method traverses every element in the array. If at least one of the elements meets the conditions, it returns true; otherwise, it returns false

Sample code

const arr = [-1,1,2,3,4,5] //false is returned because - 1 < 0
const result = arr.some(value=>value>0)
console.log(result)
/* Output content
false
*/

7, Array prototype. every()

Return Boolean
This method traverses every element in the array. If all elements meet the conditions, it returns true, otherwise it returns false

const arr = [1,2,3,4,5] //All elements are greater than 0, so return true
const result = arr.some(value=>value>0)
console.log(result)
/* Output content
true
*/

Topics: Javascript ECMAScript