2024年前端最新JavaScript 中的高阶函数_javadcript 高阶函数，前端中为什么需要Handler

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包

• 从另一个函数返回一个函数

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

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

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

该函数将如下所示：

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 ]



### 最后

**前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/305f67b95f3799450f69a4271c5fe4f7.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/9c5b62f617390f63a808ae06a3c363eb.webp?x-oss-process=image/format,png)



端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中...(img-eHo0uTfJ-1715008226285)]

[外链图片转存中...(img-4vBtvA1R-1715008226286)]