什么是高阶函数?
一个函数中有参数是函数,或者返回值是函数,这样的函数就是高阶函数。
下面这个例子中的fn就是高阶函数
const callback = ()=>{
console.log('我是fn的参数');
}
const fn = (callback)=>{
callback();
}
fn(callback);
我们平常使用的高阶函数有哪些呢?
其实有很多高阶函数,比如数组中的方法forEach,map,every,some等等都是高阶函数,还有react-redux中的connect函数也是高阶函数,其使用形式:connect()(Component)。
我们自己来写一下这几个数组方法的实现。
因为每一个数组都可以调用这些方法,所以这些方法写在原型上是最好的。
forEach的实现
Array.prototype.myForEach = function (callback) {
if (!Array.isArray(this)) {
throw new Error(`${array} is not a Array`);
}
if (typeof callback!== 'function') {
throw new Error(`${callback} is not a Function`);
}
let that = this;
for (let i = 0; i < that.length; i++) {
callback(that[i]);//return 或者 break或者continue 没有用是应为每次的循环都是在一个函数内部进行的
}
}
const arr = [1, 2];
arr.myForEach((item)=>{
console.log(item);
});
map的实现
Array.prototype.myMap = function(fn){
if(!Array.isArray(this)){
throw new Error(`${this} is not a Array`);
}
if(typeof fn !== 'function'){
throw new Error(`${fn} is not a Function`);
}
let newArr = [];
for(const value of this){
newArr.push(fn(value));
}
return newArr;
}
const result = [1,2,3];
console.log(result.myMap(item=>item*item));
every的实现
Array.prototype.myEvery = function(callback){
if(!Array.isArray(this)){
throw new Error(`${this} is not a Array`);
}
if(typeof callback!== 'function'){
throw new Error(`${callback} is not a Function`);
}
let flag = true;
for(const value of this){
flag = callback(value);
if(!flag){
break;
}
}
return flag;
}
const arr = [1,2,3];
const result1 = arr.myEvery((item)=>item>0);
const result2 = arr.myEvery((item)=>item>1);
console.log(result1);
console.log(result2);
some的实现
Array.prototype.some = function(fn){
if(!Array.isArray(this)){
throw new Error(`${this} is not a Array`);
}
if(typeof fn !== 'function'){
throw new Error(`${fn} is not a Function`);
}
let flag = false;
for(const value of this){
flag = fn(value);
if(flag){
break;
}
}
return flag;
}
const arr = [1,2,3];
console.log(arr.some((item)=>item>-1));
console.log(arr.some((item)=>item>4));
数组中有很多方法的原理都是如此,把每一个元素通过用传入的回调函数进行处理,这样可以让函数变得更加灵活。