JavaScript - 高阶函数
高阶函数接受其他函数作为参数并返回一个函数。要了解高阶函数,我们应该先了解回调函数。
回调函数是作为参数传递给另一个函数的函数。借助回调函数,一个函数可以调用另一个函数,并且回调函数仅在另一个函数完成后运行。一些高阶函数包括 map、reduce 和 filter。
让我们举一个例子,在不使用任何高阶函数的情况下实现它。
示例
在下面的代码中,我们有一个数字列表,我们希望将每个元素递增 10。为了在不使用高阶函数的情况下实现这一点,我们需要使用 for 循环遍历数组,将每个值递增 10,并将递增的值推送到新数组。最后,使用 console.log() 打印递增后的数组。
const numbers = [1, 2, 3, 4, 5];
incrementedNums=[]
for(i = 0; i < numbers.length; i++){
added = i + 10
incrementedNums.push(added)
}
console.log(incrementedNums)
输出
[ 11, 12, 13, 14, 15 ]
map 函数的工作原理如下。它遍历一个数组,并为每个数组元素执行一次提供的函数,然后将输出以数组形式返回。 Map() 函数不会改变原始数组,也不会对空数组执行操作。
以下是一些 JavaScript 内置的高阶函数
- map()
- filter()
- reduce()
- forEach()
高阶函数的优势
以下是高阶函数的优势:
- 代码可重用性
- 代码量更少
- 易于理解
- 易于维护
高阶函数的用法
让我们以同样的例子为例,并使用高阶函数来实现它。
使用 map()函数
map() 函数迭代数组,并对数组中的每个元素应用一个回调函数。让我们考虑另一个示例来理解。在下面的示例中,map 函数迭代给定的数字数组,并将其传递给 sqrt 函数,从而输出根值。
numbers=[4,9,16,25,36] root= numbers.map(Math.sqrt) console.log(root)
输出
[2, 3, 4, 5, 6]
使用 filter() 函数
filter() 方法对数组进行浅复制,并过滤掉符合回调函数所实现条件的值。它是一个迭代方法,它会对数组中的每个元素调用作为参数传入的回调函数,并返回一个输出数组,其中包含回调函数返回真值的元素。
示例
在下面的示例中,我们有一个数字列表,我们希望从中过滤掉偶数。为了实现这一点,我们需要使用 filter() 函数并传递一个回调函数,如果数字为偶数,则该函数返回 true。
numbers=[10, 11, 12, 14, 15]
even=numbers.filter(iseven)
function iseven(n){
return(n%2===0)
}
console.log(even)
输出
[ 10, 12, 14 ]
使用 reduce() 函数
与 map 和 foreach 类似,reduce 方法 也会对数组中的每个元素执行一个回调函数(reducer 函数),从而生成单个输出。简单来说,reduce 方法将数组缩减为单个值。reducer 函数的参数是一个回调函数,该回调函数包含两个参数:累加器 (accumulator) 和当前值 (current value)。其中,当前值是数组的当前迭代值。累加器 (accumulator) 会累加回调函数的输出。最终返回值存储在累加器中。
示例
在下面的示例中,我们有一个数字列表,我们想要计算列表中所有数字的和。为此,我们需要使用 reduce() 函数并传递一个返回两个数字和的回调函数。
numbers=[10,11,12,13]
total =numbers.reduce(function(acc,el){
return acc+el
},0)
console.log(total)
输出
46
使用 forEach() 函数
forEach 方法类似于 map 函数,它会对数组中的每个元素执行回调函数。forEach() 和 map() 之间的唯一区别在于,map 函数返回一个数组输出,而 forEach 返回 undefined,它只是迭代数组。
示例
以下代码展示了 forEach 方法的工作原理
const numbers = [10, 20, 30, 40];
sum=0
numbers.forEach(add)
function add(n){
sum=sum+n
}
console.log(sum)
输出
100
结论
高阶函数可以对其他函数进行操作,要么将其作为参数,要么返回它们。JavaScript 作为一种函数式编程语言,支持高阶函数。高阶函数用于提高代码的可读性和可维护性。它们有助于精简代码,使其更加简洁。JavaScript 提供了内置的高阶函数,例如 map()、filter()、reduce() 和 forEach()。

