一.什么是高阶函数
高阶函数是接受函数作为参数并且(或者)返回函数作为输出的函数
所以,高阶函数至少满足下列条件之一:
- 函数可以作为参数被传递
- 函数作为返回值输出
01. 函数可以作为参数被传递
1. 基本格式
<script>
function fn(callback){ // 函数可以作为参数被传递
callback && callback()
}
fn(
function(){console.log('higher-order function')}
)
</script>
2. 举例 - 回调函数
$(".box").click(function () {
$(".item").animate({ height: "200px" });
});
02. 函数作为返回值输出
1. 基本格式
<script>
function fn() {// 函数可以作为返回值输出
return function () {
console.log('higher-order function')
}
}
fn()()
</script>
2. 举例 - 判断是否为数组(字符串或数字)
<script>
var isString = function(obj) {
return Object.prototype.toString.call(obj) === '[object String]'
}
var isArray = function(obj) {
return Object.prototype.toString.call(obj) === '[object Array]'
}
var isNumber = function(obj) {
return Object.prototype.toString.call(obj) === '[object Number]'
}
console.log(isString('string')) // true
console.log(isArray([1,2,3]))// true
console.log(isNumber(123))// true
</script>
二. 高阶函数与抽象
1. 什么是抽象
《JavaScript ES6函数式编程入门经典》中给出描述:一个编写涉及数值操作代码的程序员可能不会对底层硬件中的数字表现方式感兴趣,(不在乎它们是16位还是32位整数),色括这些细节在哪里被屏蔽。可以说,它们被抽象出来了,只留下简单的数字给程序员处理,这样的思想就是抽象思想。
而高阶函数就是定义抽象的过程
2. 高阶函数就是定义抽象
如下:是一个myforEach 的函数,函数接收array和fn两个参数
<script>
const myforEach = (arrary,fn) => {
for(var i = 0; i< arrary.length;i++){
fn(arrary[i])
}
}
</script>
myforEach 所做的工作就是实现对数组遍历,对于调用者,只需要按照函数定义的规则去传递参数就能实现功能。
所以,抽象关注思想,而不是具体细节。
<script>
myforEach([1,2,3],(data)=>{
console.log(data) // 1 2 3
})
</script>
三. 编写一个高阶函数
JavaScript 内置了很多函数,比如toFixed()、toString()等内置函数,但是在实际开发中必须要自己编写一些函数来解决项目需求。
数组中很多方法类似Array.map、Array.every、Array.some中都可以将一个函数作为参数,因此他们都是高阶函数。
数组方法都存在于Array.prototype中,我们可以在Array.prototype上扩展自己的方法。
1. map
<script>
Array.prototype.myMap = function (func) {
let results = [];
for (let i = 0; i < this.length; i++) {
results.push(func(this[i]));
}
return results;
}
const array = [1, 2, 3, 4];
const myMap1 = array.myMap(x => x * 2);
console.log(myMap1); // [2, 4, 6, 8]
</script>
与Array.map检验
<script>
const array = [1, 2, 3, 4];
const myMap2 = array.map(x => x * 2);
console.log(myMap2); // [2, 4, 6, 8]
</script>
下一篇:一篇秒懂正则表达式https://mp.weixin.qq.com/s/voNtxibjDRDZIuSAtRHaiQ
网友评论