JS高阶函数原理与用法实例分析

所属分类：网络编程 / JavaScript 阅读数： 1315

收藏 0赞 0分享

如果您正在学习JavaScript，那么您必须遇到高阶函数这个术语。这听起来复杂，其实不然。

使JavaScript适合函数式编程的原因是它接受高阶函数。

高阶函数在JavaScript中广泛使用。如果你已经用JavaScript编程了一段时间，你可能已经使用它们甚至不知道。

要完全理解这个概念，首先必须了解函数式编程是什么一等函数(first-Class Function)以及的概念。

函数式编程

在大多数简单的术语中，函数编程是一种编程形式，您可以将函数作为参数传递给其他函数，并将它们作为值返回。在函数式编程中，我们根据函数思考和编码。

JavaScript，Haskell，Clojure，Scala和Erlang是实现函数式编程的一些语言。

一等函数

如果您一直在学习JavaScript，您可能听说过JavaScript将函数视为一等公民。那是因为在JavaScript或任何其他函数式编程语言中，函数是对象。

在JavaScript中，函数是一种特殊类型的对象。他们是Function对象。

在JavaScript中，您可以使用其他类型（如对象，字符串或数字）执行的所有操作函数都可以执行。您可以将它们作为参数传递给其他函数（回调函数），将它们分配给变量并传递它们等等。这就是JavaScript中的函数被称为First-Class函数(一等函数)的原因。

高阶函数

高阶函数是对其他函数进行操作的函数，可以将它们作为参数或通过返回它们。简单来说，高阶函数是一个函数，它接收函数作为参数或将函数作为输出返回。

例如Array.prototype.map，Array.prototype.filter并且Array.prototype.reduce是一些高阶功能，内置的语言。

运行高阶函数

让我们看一下内置高阶函数的一些例子，看看它与我们不使用高阶函数的解决方案的比较。

Array.prototype.map

该map()方法通过调用作为输入数组中每个元素的参数提供的回调函数来创建一个新数组。该map()方法将从回调函数中获取每个返回值，并使用这些值创建一个新数组。

传递给回调函数map()方法接受3个参数：element，index，和array。

假设我们有一个数组，我们想要创建一个新数组，其中包含第一个数组的每个值的两倍。让我们看看如何使用和不使用高阶函数来解决问题。

不用高阶函数

const arr1 = [1,2,3]; 
const arr2 = [];
for（let i = 0; i <arr1.length; i ++）{ 
 arr2.push（arr1 [i] * 2）; 
}
//打印[2,4,6] 
console.log（arr2）;

使用高阶函数

const arr1 = [1,2,3];
const arr2 = arr1.map (function (item) { 
 return item * 2; 
}
console.log(arr2)

我们可以使用箭头函数语法使其更短

const arr1 = [1, 2, 3];
const arr2 = arr1.map(item => item * 2);
console.log(arr2);

创建我们自己的高阶函数

到目前为止，我们看到了语言中内置的各种高阶函数。现在让我们创建自己的高阶函数。

我们假设JavaScript没有原生map方法。我们可以自己构建它，从而创建我们自己的高阶函数。

假设我们有一个字符串数组，我们希望将此数组转换为整数数组，其中每个元素表示原始数组中字符串的长度。

const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C'];
function mapForEach(arr, fn) {
 const newArray = [];
 for(let i = 0; i < arr.length; i++) {
 newArray.push(
  fn(arr[i])
 );
 }
 return newArray;
}
const lenArray = mapForEach(strArray, function(item) {
 return item.length;
});
// prints [ 10, 6, 3, 4, 1 ]
console.log(lenArray);

在上面的例子中，我们创建了一个高阶函数mapForEach，它接受一个数组和一个回调函数fn。此函数循环遍历提供的数组，并在每次迭代时调用函数调用fn内的回调函数newArray.push。

回调函数fn接收数组的当前元素并返回该元素的长度，该元素存储在newArray。for循环完成后，newArray返回并分配给lenArray。