什么是高阶函数

简介: 什么是高阶函数

名称:什么是高阶函数


目录:

一、介绍

二、高阶函数的本质

二、高阶函数的本质

字数:大约600字

一、介绍


高阶函数:看上去很高大上的样子,其实也很简单,只需要满足以下两个条件中任何一个即可。


第一个条件:函数作为函数的参数。


第二个条件:返回一个函数。


听上去,这个高阶函数离我们很远很远,其实不是,你其实每天都在用高阶函数,甚至可以说,你每个js文件都用到高阶函数。


例如以函数作为参数:


const arr = [1,2,3,4,5];
arr.map(item => item + 10)
arr.filter(item => item % 2 === 0)
numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
setTimeout(() => {

}, timeout);

dom.addEventListener('click', () => {

})

例如以函数作为返回值:


function a(){
  

}
const b = a.bind({})

那为什么js要有高阶函数,其实如果js没有高阶函数,那真是不知道该怎么写了,上面的方法都不能那样写。


二、高阶函数的本质


那到底js高阶函数有什么用呢。这个问题其实涉及到高阶函数的本质。在函数式编程里面,他把每一个函数看作是一个运算,它认为函数的本质就是运算,给我一些就给你算出一些东西,而高阶函数表达是什么呢,表达的是运算的缺失和延续,怎么理解,我们先来看缺失。


我们来看看这个map,当你自己去写一个map函数的时候,你会怎么写呢,我的目标是返回一个数组,遍历原数组,经过一套规矩,转换成新的值,把新的值,放到新的数组里,它的基本逻辑就是这样。


function map() {
  
const result = [];
for (let i = 0; i < 愿数组.length; i++) {
愿数组[i] --> 新的值
result.push(新的值)
}
}

但是你仔细想想,在上面代码,是不是有个拼图是缺失的,什么拼图,就是


愿数组[i] --> 新的值

这里需要一个运算,把原数组里面的值通过一定的运算,转换成新的值,我在写这个函数的时候,缺失了一个运算,而这个运算,本质上就是一个函数,你需要给我传进来,把这个拼图补上,


function map(fn) {
  
const result = [];
for (let i = 0; i < 愿数组.length; i++) {
const 新的值 = fn(愿数组[i])
result.push(新的值)
}
}

所以,如果函数作为参数进来,那么就意味着这个方法有个运算的缺失,需要用高阶函数来表达。


而另一方面,你写一个bind函数。


function bind(thisArg) {
  
const fn = 绑定了this的函数,
return fn;
}

这个bind函数,只负责生成这个函数,但是这个函数在什么时候运行,我不知道,也可以现在调用,也可以将来某个时候运行,都不清楚,那怎么办呢,那就把这个函数返回.


用的人,拿到这个返回值,就拿到这个函数,将来他在任何时候都可以调用这个函数,实际上调用的是bind函数里面的功能。也就是,虽然bind执行完啦,但是没有结束,他的功能会延续到外层,在将来的某个时候发挥作用,这个就是运算的延续。


三、总结


我们在运算缺失的时候,需要函数作为参数,我们需要对运算作为延续的时候,需要函数作为返回值。


虽然在js里面可以看见各种高阶函数,但是底层逻辑都是一样的。


学习了高阶函数,很多时候你可以又用不到,为什么这么说呢,因为一般代码都是出现在公共代码里面,都是中高级开发者封装好的方法。


相关文章
报错The above error occurred in the <InnerPicker> component:解决方法和Ant Design form表单setFieldValue修改input
报错The above error occurred in the <InnerPicker> component:解决方法和Ant Design form表单setFieldValue修改input
560 0
|
JavaScript
Vue中 Vue.use() 原理及使用
Vue中 Vue.use() 原理及使用
396 0
Vue中 Vue.use() 原理及使用
|
JavaScript 搜索推荐 API
【Ant Design Vue V3版本填坑记录一】Table 组件 column.slots 报错
【Ant Design Vue V3版本填坑记录一】Table 组件 column.slots 报错
1648 0
|
设计模式 JavaScript 前端开发
javascript设计模式(四)----高阶函数
javascript设计模式(四)----高阶函数
173 0
|
2天前
|
数据采集 人工智能 安全
|
11天前
|
云安全 监控 安全
|
3天前
|
自然语言处理 API
万相 Wan2.6 全新升级发布!人人都能当导演的时代来了
通义万相2.6全新升级,支持文生图、图生视频、文生视频,打造电影级创作体验。智能分镜、角色扮演、音画同步,让创意一键成片,大众也能轻松制作高质量短视频。
999 151
|
3天前
|
编解码 人工智能 机器人
通义万相2.6,模型使用指南
智能分镜 | 多镜头叙事 | 支持15秒视频生成 | 高品质声音生成 | 多人稳定对话
|
16天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
1695 9