解释 JavaScript 中的高阶函数


什么是 JavaScript 中的高阶函数?

JavaScript 作为一种多范式语言,它支持过程式编程、函数式编程和面向对象编程。由于它也是一种函数式编程语言,JavaScript 将函数视为一等实体,其中函数可以分配给变量、将其设置为对象的属性,并可以将其作为参数传递给另一个函数。JavaScript 中的这种特性有助于实现高阶函数,这些函数可以通过将其他函数作为参数或返回其他函数来对其他函数进行操作。

让我们举个例子,并在不使用任何高阶函数的情况下实现它。

示例

在下面的代码中,我们有一个数字列表,我们希望将每个元素加 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)

输出

[ 10, 11, 12, 13, 14 ]

现在,让我们看看使用 .map() 函数(这是一种高阶函数)实现相同的功能。

在这里,我们不用使用 for 循环遍历整个数组,而是使用了一个高阶函数 .map(),它遍历数组并将每个元素传递给作为参数传递的函数 (add())。

示例

const numbers = [1, 2, 3, 4, 5];

function add(num){
   return(num+10)
}
const incrementedNumbers = numbers.map(add);

console.log(incrementedNumbers);

输出

[ 11, 12, 13, 14, 15 ]

这就是 map 函数的工作原理。它迭代一个数组,并对每个数组元素执行提供的函数一次,并将输出作为数组返回。Map() 函数不会更改原始数组,也不会对空数组执行操作。

以下 JavaScript 函数是一些内置的高阶函数:

  • map()

  • forEach()

  • filter()

  • reduce()

让我们看看其他方法:

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
在上面的代码中,我们取了一个包含 4 个元素的数组,使用 .forEach() 遍历它,并使用回调函数 add() 找到其中存在的元素的总和。

filter() 方法

.filter() 方法浅复制数组并过滤掉通过提供的回调函数实现的条件的值。它是一种迭代方法,它对数组中的每个元素调用作为参数给出的回调函数,并返回一个输出数组,其中包含回调函数返回真值结果的元素。

示例

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 函数的参数是一个回调函数,该回调函数进一步有两个参数,累加器和当前值。其中当前值是数组的当前迭代值。累加器累积回调函数的输出。最终返回值存储在累加器中。

示例

numbers=[10,11,12,13]

total =numbers.reduce(function(acc,el){
   return acc+el
},0)

console.log(total)

输出

46

在上面的代码中,给定一个数字数组,我们希望找到该数组的总和。我们使用 reduce 方法,该方法将回调函数作为其参数。如上所述,此回调函数有两个参数:acc(累加器)和 el(当前元素)。

此回调函数应用于数组中的每个元素。使用 acc,我们可以在遍历数组时累积结果。在这种情况下,回调函数只是将当前元素 (el) 添加到累加器 (acc)。作为第二个参数传递的 0 是累加器。

map() 方法

如上一节所述,map() 函数迭代数组并对数组中的每个元素应用回调函数。让我们考虑另一个示例并了解一下。在下面的示例中,map 函数迭代给定的数字数组并将它们传递给 sqrt 函数,从而生成根值的输出。

示例

numbers=[4,9,16,25,36]

root= numbers.map(Math.sqrt)
console.log(root)

输出

[ 2, 3, 4, 5, 6 ]
(node:328974) [DEP0016] DeprecationWarning: 'root' is deprecated, use 'global'

更新于: 2024-04-23

361 次浏览

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告