楔子

在 JavaScript 中，由于 Function 本质也是对象（这与 Haskell 中【函数的本质是值】思路一致），所以我们可以把 Function 作为参数来进行传递！

例：

functionsayHi(){console.log("Hi");
}functionsayBye(){console.log("Bye");
}functiongreet(type, sayHi, sayBye){
    type ===1? sayHi() : sayBye()
}

greet(1, sayHi, sayBye);// Hi

又得讲这个老生常谈的定义：如果一个函数接收函数作为参数或返回函数作为输出，那么这个函数被称作高阶函数；

本篇要谈的是：高阶函数中的map、filter、reduce是【如何实践】的，我愿称之为：高阶映射！！

先别觉得这东西陌生，其实咱们天天都见！！

例：

[1,2,3].map(item=>item*2)

实践

Talk is cheap. Show me the code.

以下有 4 组代码，每组的 2 个代码片段实现目标一致，但实现方式有异，感受感受，你更喜欢哪个？

第 1 组：

1️⃣

constarr1=[1,2,3];constarr2=[];for(leti=0;i<arr1.length;i++){arr2.push(arr1[i]*2);}console.log(arr2);//[2,4,6]

2️⃣

constarr1 = [1,2,3];constarr2 = arr1.map(item=>item *2);console.log(arr2);// [ 2, 4, 6 ]

第 2 组：

1️⃣

constbirthYear=[1975,1997,2002,1995,1985];constages=[];for(leti=0;i<birthYear.length;i++){letage=2018-birthYear[i];ages.push(age);}console.log(ages);//[43,21,16,23,33]

2️⃣

constbirthYear=[1975,1997,2002,1995,1985];constages=birthYear.map(year=>2018-year);console.log(ages);//[43,21,16,23,33]

第 3 组：

1️⃣

constpersons=[{name:Peter,age:16},{name:Mark,age:18},{name:John,age:27},{name:Jane,age:14},{name:Tony,age:24},];constfullAge=[];for(leti=0;i<persons.length;i++){if(persons[i].age>=18){fullAge.push(persons[i]);}}console.log(fullAge);

2️⃣

constpersons=[{name:Peter,age:16},{name:Mark,age:18},{name:John,age:27},{name:Jane,age:14},{name:Tony,age:24},];constfullAge=persons.filter(person=>person.age>=18);console.log(fullAge);

第 4 组：

1️⃣

constarr=[5,7,1,8,4];letsum=0;for(leti=0;i<arr.length;i++){sum=sum+arr[i];}console.log(sum);//25

2️⃣

constarr = [5,7,1,8,4];constsum = arr.reduce(function(accumulator, currentValue){returnaccumulator + currentValue;
});console.log(sum);// 25

更喜欢哪个？有答案了吗？

每组的代码片段 2️⃣ 就是map/filter/reduce高阶函数的应用，没有别的说的，就是更加简洁易读！

手写

实际上，map/filter/reduce也是基于 for 循环封装来的，所以我们也能自己实现一套相同的高阶映射；

map1

Array.prototype.map1 =function(fn){letnewArr = [];for(leti =0; i <this.length; i++) {
        newArr.push(fn(this[i]))
    };returnnewArr;
}console.log([1,2,3].map1(item=>item*2))// [2,4,6]

filter1

Array.prototype.filter1 =function(fn){letnewArr=[];for(leti=0;i<this.length;i++){
      fn(this[i]) && newArr.push(this[i]);
  }returnnewArr;
};console.log([1,2,3].filter1(item=>item>2))// [3]

reduce1

Array.prototype.reduce1 =function(reducer,initVal){for(leti=0;i<this.length;i++){
        initVal =reducer(initVal,this[i],i,this);
    }returninitVal
};console.log([1,2,3].reduce1((a,b)=>a+b,0))// 6

如果你不想直接挂在原型链上：

mapForEach

functionmapForEach(arr, fn){constnewArray = [];for(leti =0; i < arr.length; i++) {
    newArray.push(
      fn(arr[i])
    );
  }returnnewArray;
}

mapForEach([1,2,3],item=>item*2)// [2,4,6]

filterForEach

functionfilterForEach(arr, fn){constnewArray = [];for(leti =0; i < arr.length; i++) {
     fn(arr[i]) && newArray.push(arr[i]);
  }returnnewArray;
}

filterForEach([1,2,3],item=>item>2)// [3]

reduceForEach

functionreduceForEach(arr,reducer,initVal){constnewArray = [];for(leti =0; i < arr.length; i++) {
      initVal =reducer(initVal,arr[i],i,arr);
  }returninitVal;
}

reduceForEach([1,2,3],(a,b)=>a+b,0)// 6