Web前端最新JavaScript 中的高阶函数_javadcript 高阶函数，2024年最新腾讯Web前端面经

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

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

函数作为一等函数的这种能力是 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;
}



**web浏览器中的javascript**

*   客户端javascript
*   在html里嵌入javascript
*   javascript程序的执行
*   兼容性和互用性
*   可访问性
*   安全性
*   客户端框架
*   **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/ed2c4f9602fb053965a21c047d1291e6.png)  

**window对象**

*   计时器

*   浏览器定位和导航

*   浏览历史

*   浏览器和屏幕信息

*   对话框

*   错误处理

*   作为window对象属性的文档元素

![](https://img-blog.csdnimg.cn/img_convert/81adbbfdefca6b401d7dc4e6acd9207d.png)