用一个数组来体验函数式编程

Posted 2021-04-09 小郑搞码事

最近项目中频繁用到一些数组的方法，如map，filter等。有时为了处理一些特殊的数据，还得自己封装一些通用的方法。这些我们其实可以把它归纳成一个"专业"的知识点，那就是JS的函数式编程。另外，我们会发现，在写JS的过程中，用到数组的地方特别多，无论是JSON返回字段，还是页面的列表，都跟数组紧密相关。所以我们今天就用一个数组来体验函数式编程。

函数总体来说就两种情况：1、现成的方法，2、自己根据具体需求封装的方法。

一、数据遍历-map

假如有这么一个数组（如下所示），我们需要投影出字段name和sex。

通常我们会想到用forEach方法，大概的做法是定义一个新数组，然后遍历原数组，把每个元素的所需键值对插入新数组。

为什么不把它抽象成一个方法？避免中间变量，形式更优雅。

像上面这样，通过使用map方法，我们把想要的映射效果应用到了数组上。与此同时隐藏了操作细节。

效果图如下：

二、数据过滤-filter

同样是上面map的那个例子，我们需要过滤出sex=“男”的信息。通常的做法是for或者选择更优雅点的forEach方法。基本上也就是两个步骤：

1、遍历原数组

2、把通过备件判断的元素插入新数组

为什么不把它抽象成一个方法？清晰且代码少。

对的，就是这么简单，且以上map和filter都是现成的方法，拿来即用。

三、数据比较-reduce

假如我们要从这个数组（如下）中，width和height剩面积最大的一组数据。

先来看一下通常的做，使用forEach。这次我把forEach使用的代码给写出来了，这样大家更容易看出对比时的差别。如下所示：

为什么不把它抽象成一个方法？

这样一对比，是不是代码简洁多了。运行后的结果就是：

{width:3,height:4}

四、数据压缩-zip

有时候我们需要将两个数组中的数据合成一个键值对存入一个新的数组，比如下面这个数组：

我们需要将arr1的id和arr2的time合成一个新数组。我们先来实现这么一个合成的函数，如下图

我们已经把它抽象成了一个方法来调用，所以直接使用：

效果图如下：

总结：

从上面的几个例子来看，我们简略的总结一下函数式编程的几个特点：

1、程序=Function（input），函数求值过程无副作用。

2、避免了中间状态和变量。

3、没有if/while/switch/for等控制流。

等等

也许这正是函数式编程的精髓！让你的代码更简短，更有描述性，更耐用。