程序员的面试题库 web前端面试题库 VS java后端面试题库大全

在 JavaScript 中，函数被视为一等公民。我们可以将函数视为值并将它们分配给另一个变量，将它们作为参数传递给另一个函数，甚至从另一个函数返回它们。

函数作为一等函数的这种能力是 JavaScript 中高阶函数的动力。

基本上，将另一个函数作为参数或返回函数的函数称为高阶函数。

让我们深入了解一下这两种类型的实现，即：

• 将函数作为参数传递给另一个函数
• 从另一个函数返回一个函数

如何将函数作为参数传递给另一个函数

在本节中，我们将了解如何将函数作为参数发送，以及它最终如何帮助我们编写更简洁的代码。

考虑下面的代码，我们要在其中创建一个接受数组作为参数的函数。它从中过滤掉所有奇数并返回所有过滤后的数字。

该函数将如下所示：

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 
function filterOdd(arr) {
  const filteredArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 !== 0) {
      filteredArr.push(arr[i]);
    }
  }
  return filteredArr;
}
console.log(filterOdd(arr));
 
// Output:
// [ 1, 3, 5, 7, 9, 11 ]

上面的函数返回过滤后的数组[ 1, 3, 5, 7, 9, 11 ]，其中我们有所有奇数，正如预期的那样。

现在假设我们还想创建一个函数来过滤并返回所有偶数。我们可以很好地继续创建以下函数来实现这一点：

function filterEven(arr) {
  const filteredArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 == 0) {
      filteredArr.push(arr[i]);
    }
  }
  return filteredArr;
}
console.log(filterEven(arr));
 
// Output:
// [ 2, 4, 6, 8, 10 ]

同样，正如预期的那样，我们将得到一个包含所有偶数的数组的所需输出 - [ 2, 4, 6, 8, 10 ]。

但是请注意，我们在这种方法中编写了很多重复的代码。以上两个函数都做了很多共同的事情，比如接受原始数组，创建一个新数组来存储过滤后的数组，循环整个主数组，最后返回过滤后的数组。

这两个函数之间的唯一区别是它们用于过滤掉原始数组的逻辑。

对于函数filterOdd，我们使用逻辑，arr[i] % 2 !== 0而在filterEven函数中，我们使用逻辑arr[i] % 2 == 0过滤掉原始数组。

这是我们可以从使用高阶函数中受益的地方。主要目的是创建一个函数来完成我们在上述两个函数中所做的所有常见事情，并将逻辑部分作为参数单独传递给该函数。让我们看看如何实现这一点。

让我们创建一个函数来完成我们在filterOddandfilterEven函数中执行的所有常见操作。这将是这样的：

function filterFunction(arr, callback) {
  const filteredArr = [];
  for (let i = 0; i < arr.length; i++) {
    callback(arr[i]) ? filteredArr.push(arr[i]) : null;
  }
  return filteredArr;
}

暂时忽略这个callback参数。请注意，在 new 中filterFuntion我们如何保留所有常见步骤，即接受原始数组，创建一个新数组来存储过滤后的数组，循环整个主数组，最后返回我们在filterOddandfilterEven函数中执行的过滤后的数组.

现在callback参数基本上接受了逻辑，它只不过是另一个包含过滤逻辑的函数。为了分别过滤奇数和偶数，下面是我们需要编写的逻辑函数：

// Function containing logic for filtering out odd numbers
 
function isOdd(x) {
  return x % 2 != 0;
}
 
// Function containing logic for filtering out even numbers
 
function isEven(x) {
  return x % 2 === 0;
}

而已！我们现在只需要将主数组以及逻辑函数传递给我们filterFunction，如下所示：

// For filtering out odd numbers
 
filterFunction(arr, isOdd)
// Output of console.log(filterFunction(arr, isOdd)):
// [ 1, 3, 5, 7, 9, 11 ]
 
// For filtering out even numbers
 
filterFunction(arr, isEven)
// Output of console.log(filterFunction(arr, isEven)):
// [ 2, 4, 6, 8, 10 ]

通过这种方式，我们将逻辑函数（如isOdd或isEven作为参数）传递给另一个函数filterFunction。 我们基本上是从 main 函数中抽象出主要的过滤逻辑。我们现在可以根据需要传递任何其他过滤逻辑，filterFunction而无需更改它。

例如，如果我们想过滤掉一个大于 5 的数字，那么我们只需要编写如下过滤逻辑：

function isGreaterThanFive(x) {
  return x > 5;
}

并将其作为参数传递给filterFunction：

filterFunction(arr, isGreaterThanFive)
 
// Output of console.log(filterFunction(arr, isGreaterThanFive)):
// [ 6, 7, 8, 9, 10, 11 ]

我们还可以将逻辑函数作为箭头函数传递并得到相同的结果——也就是说，(x) => x > 5)代替传递isGreaterThanFive将给我们相同的结果。

filterFunction(arr, (x) => x > 5)
 
// Output of console.log(filterFunction(arr, (x) => x > 5)):
// [ 6, 7, 8, 9, 10, 11 ]

 程序员的面试题库 web前端面试题库 VS java后端面试题库大全