Common higher-order functions:
map()：
Since the map() method is defined in JavaScript Array, we call the Array map() method, pass in our own function, and get a new Array as the result. Essentially, every number in the array is taken out to perform the operation.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>map演示</title>
</head>
<body>
<script>
// 将数组内容全部乘以2
let a_list = [2, 3, 4, 5]
let newList = a_list.map(function (n) {
return n * 2
})
console.log(newList)
</script>
</body>
</html>
filter():
Filter is a commonly used operation, it is used to filter out some elements of the Array, and then return the remaining elements. The filter() of Array receives a function. Unlike map(), filter() applies the passed function to each element in turn, and then decides whether to keep or discard the element according to whether the return value is true or false.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filter演示</title>
</head>
<body>
<script>
// 将数组中大于5的过滤掉
let a_list = [2, 3, 4, 5, 6, 7, 8]
let newList = a_list.filter(function (n) {
return n <= 5
})
console.log(newList)
</script>
</body>
</html>
reduce()：
Array's reduce() applies a function to this Array. This function must receive two parameters, one is the result of the previous execution, the other is the parameter of this execution, reduce() continues the result with the next element of the sequence Do cumulative calculations.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reduce演示</title>
</head>
<body>
<script>
// 将数组加和
let a_list = [2, 3, 4, 5, 6, 7, 8]
// reduce的结构:
// reduce(fun(pre,cur),init) 此处的init为第一次给pre的赋值，如果不写，则默认数组的第一个值为pre,从第二个值开始执行
let total = a_list.reduce(function (preValue, currentValue) {
console.log('preValue:' + preValue)
return preValue + currentValue
})
console.log(total)
</script>
</body>
</html>
A comprehensive example:
Claim:
- 1. Remove the numbers greater than 100 in the array
- 2. Multiply the number in the new array by 2
- 3. Add the numbers in the remaining array
- 4. Get the result
Example 1: Common implementation method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
let aList = [20, 23, 22, 445, 21, 22, 100, 50, 200, 233, 46, 22]
let newList = []
//1.---------
for (const number of aList) {
if (number <= 100) {
newList.push(number)
}
}
let newList2 = []
//2.--------------
for (const newListElement of newList) {
newList2.push(newListElement * 2)
}
let total = 0
//3.-------
for (const newList2Element of newList2) {
total += newList2Element
}
console.log(aList, newList, newList2, total)
</script>
</html>
Example 2: Using higher-order functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
let aList = [20, 23, 22, 445, 21, 22, 100, 50, 200, 233, 46, 22]
// 1.--------
newList = aList.filter(function (n) {
return n <= 100
})
let newList2 = []
// 2.---------
newList2 = newList.map(function (n) {
return n * 2
})
let total = 0
// 3.----------
total = newList2.reduce(function (pre, cur) {
return pre + cur
})
console.log(aList, newList, newList2, total)
</script>
</html>
Example 3: Add chain programming
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
let aList = [20, 23, 22, 445, 21, 22, 100, 50, 200, 233, 46, 22]
let total = aList.filter(function (n) {
return n <= 100
}).map(function (n) {
return n * 2
}).reduce(function (pre, cur) {
return pre + cur
})
console.log(total)
</script>
</html>
Example 4: Using arrow functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
let aList = [20, 23, 22, 445, 21, 22, 100, 50, 200, 233, 46, 22]
let total = aList.filter(n => n <= 100).map(n => n * 2).reduce((pre, cur) => pre + cur)
console.log(total)
</script>
</html>