--- theme: channing-cyan --- ## 楔子在 JavaScript 中，由于 Function 本质也是对象（这与 Haskell 中【函数的本质是值】思路一致），所以我们可以**把 Function 作为参数来进行传递**！例🌰： ``` function sayHi() { console.log("Hi"); } function sayBye() { console.log("Bye"); } function greet(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️⃣ ``` 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 ``` 更喜欢哪个？有答案了吗？ ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/816c6d415047468f83f9e8389ea02a87~tplv-k3u1fbpfcp-watermark.image) 每组的代码片段 2️⃣ 就是map/filter/reduce高阶函数的应用，没有别的说的，就是更加**简洁易读**！ ## 手写实际上，map/filter/reduce 也是基于 for 循环封装来的，所以我们也能自己实现一套相同的 **高阶映射** 🚀； * 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;i item>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 ``` 这里本瓜有个小疑惑，在 ES6 之前，有没有一个库做过这样的封装❓ ## 小结本篇虽基础，但**很重要**！对一些惯用写法的审视、改变，会产生一些奇妙的思路~ 稀松平常的 map 映射能做的比想象中的要多得多！ for 循环遍历只是操作性的手段，不是目的！而封装过后的 map 映射有了**更易读**的意义，映射关系（输入、输出）也是函数式编程之核心！ YY一下：既然 map 这类函数都是从 for 循环封装来的，如果你能封装一个基于 for 循环的另一种特别实用的高阶映射或者其它高阶函数，是不是意味着：有朝一日有可能被纳入 JS 版本标准 API 中？🐶🐶🐶 或许：先意识到我们每天都在使用的高阶函数，刻意的去使用、训练，然后能举一反三，才能做上面的想象吧~~~ 以上。您的点赞、评论、关注是本瓜最大的鼓励 O(∩_∩)O👍👍👍 >我是掘金安东尼，公众号同名，输出暴露输入，技术洞见生活，再会~