js 函數(shù)式編程：不要再使用 for 循環(huán)啦，試試 map 吧

楔子

在 JavaScript 中，由于 Function 本質(zhì)也是對(duì)象（這與 Haskell 中【函數(shù)的本質(zhì)是值】思路一致），所以我們可以把 Function 作為參數(shù)來(lái)進(jìn)行傳遞！

例 ：

function sayHi() {   console.log("Hi");}function sayBye() {   console.log("Bye");}function greet(type, sayHi, sayBye) {     type === 1 ? sayHi() : sayBye()}greet(1, sayHi, sayBye); // Hi

又得講這個(gè)老生常談的定義：如果一個(gè)函數(shù)“接收函數(shù)作為參數(shù)”或“返回函數(shù)作為輸出”，那么這個(gè)函數(shù)被稱作“高階函數(shù)”；

本篇要談的是：高階函數(shù)中的 map 、filter 、reduce 是【如何實(shí)踐】的，我愿稱之為：高階映射！！

先別覺(jué)得這東西陌生
，其實(shí)咱們天天都見(jiàn)
！！

例：

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

實(shí)踐

Talk is cheap. Show me the code.

以下有 4 組代碼 ，每組的 2 個(gè)代碼片段實(shí)現(xiàn)目標(biāo)一致 ，但實(shí)現(xiàn)方式有異 ，感受感受 ，你更喜歡哪個(gè)？

第 1 組：

1

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

2

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

第 2 組 ：

1

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

2

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

第 3 組：

1

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

2

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

第 4 組 ：

1

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

2

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

更喜歡哪個(gè) ？有答案了嗎？

每組的代碼片段 2 就是map/filter/reduce高階函數(shù)的應(yīng)用，沒(méi)有別的說(shuō)的 ，就是更加簡(jiǎn)潔易讀！

手寫(xiě)

實(shí)際上，map/filter/reduce 也是基于 for 循環(huán)封裝來(lái)的 ，所以我們也能自己實(shí)現(xiàn)一套相同的 高階映射；

• map1

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

• filter1

Array.prototype.filter1 = function (fn) {   let newArr=[];  for(let i=0;iitem>2)) // [3]

• reduce1

Array.prototype.reduce1 = function (reducer,initVal) {     for(let i=0;ia+b,0)) // 6

如果你不想直接掛在原型鏈上：

• mapForEach

function mapForEach(arr, fn) {   const newArray = [];  for(let i = 0; i < arr.length; i++) {     newArray.push(      fn(arr[i])    );  }  return newArray;}mapForEach([1,2,3],item=>item*2) // [2,4,6]

• filterForEach

function filterForEach(arr, fn) {   const newArray = [];  for(let i = 0; i < arr.length; i++) {      fn(arr[i]) && newArray.push(arr[i]);  }  return newArray;}filterForEach([1,2,3],item=>item>2) // [3]

• reduceForEach

function reduceForEach(arr,reducer,initVal) {   const newArray = [];  for(let i = 0; i < arr.length; i++) {       initVal =reducer(initVal,arr[i],i,arr);  }  return initVal;}reduceForEach([1,2,3],(a,b)=>a+b,0) // 6

這里本瓜有個(gè)小疑惑，在 ES6 之前 ，有沒(méi)有一個(gè)庫(kù)做過(guò)這樣的封裝

小結(jié)

本篇雖基礎(chǔ)
，但很重要
！

對(duì)一些慣用寫(xiě)法的審視、改變
，會(huì)產(chǎn)生一些奇妙的思路~ 稀松平常的 map 映射能做的比想象中的要多得多！

for 循環(huán)遍歷只是操作性的手段，不是目的 ！而封裝過(guò)后的 map 映射有了更易讀的意義，映射關(guān)系（輸入
、輸出）也是函數(shù)式編程之核心！

YY一下：既然 map 這類函數(shù)都是從 for 循環(huán)封裝來(lái)的