for 循环不是目的,map 映射更有意义!【FP探究】

简介: 在 JavaScript 中,由于 Function 本质也是对象(这与 Haskell 中【函数的本质是值】思路一致),所以我们可以把 Function 作为参数来进行传递!

image.png

楔子



在 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


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


本篇要谈的是:高阶函数中的 mapfilterreduce 是【如何实践】的,我愿称之为:高阶映射!!


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

例🌰:

[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


每组的代码片段 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<this.length;i++){
      fn(this[i]) && newArr.push(this[i]);
  }
  return newArr;
};
console.log([1,2,3].filter1(item => item>2)) // [3]


  • reduce1
Array.prototype.reduce1 = function (reducer,initVal) {
    for(let i=0;i<this.length;i++){
        initVal =reducer(initVal,this[i],i,this);
    }
    return initVal
};
console.log([1,2,3].reduce1((a,b)=>a+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👍👍👍


相关文章
|
1月前
如何实现数组和 List 之间的转换?
如何实现数组和 List 之间的转换?
|
1月前
|
Java 图计算
图计算中的图遍历是什么?请解释其作用和常用方法。
图计算中的图遍历是什么?请解释其作用和常用方法。
41 0
利用map和cod文件定位崩溃位置的例子和习题
利用map和cod文件定位崩溃位置的例子和习题
|
8月前
|
存储 Java
每日一道面试题之如何实现数组和 List 之间的转换?
每日一道面试题之如何实现数组和 List 之间的转换?
|
存储 C++ 容器
C++ 第九节——map/set(用法+底层原理+模拟实现)
们需要知道的是,Map和Set的底层都是红黑树。
614 1
C++ 第九节——map/set(用法+底层原理+模拟实现)
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十八天-什么是对象结构 set map之13
前端学习笔记202305学习笔记第二十八天-什么是对象结构 set map之13
30 0
前端学习笔记202305学习笔记第二十八天-什么是对象结构 set map之13
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十八天-什么是对象结构 set map之14
前端学习笔记202305学习笔记第二十八天-什么是对象结构 set map之14
33 0
|
11月前
|
JSON JavaScript 数据格式
查找一组数据中一组或多组数据(filter和find的区别)
查找一组数据中一组或多组数据(filter和find的区别)
61 0
|
存储 JavaScript Scala
从map函数引发的讨论
从map函数引发的讨论
从map函数引发的讨论
|
存储 算法 前端开发
嵌套遍历同一个数组的时候,试试Map优化
嵌套遍历同一个数组的时候,试试Map优化
120 0

热门文章

最新文章