以实现一个filter过滤器为引子，浅谈前端代码设计之美

    首先呢，Array对象下的方法——filter，map啊等等我们用得很爽，那偶尔有木有问下自己？能否也自己来实现一个？当然啦，实现这个其实很简单，我们一起来实现一下吧。

    我们先看下filter是什么，有什么用？

    在实际业务场景中，可能会遇到这样的情况：

    假设随便 一个数组是这样的：[1,2,3,4,5,6,9,-2,312]，我想拿到数组中所有大于0的数，该怎么办？

    你说，这个很简单啊，一个for循环搞定。是的没有错，比如下面这样：

    假设说，现在又有一个需求来了，要取小于0的所有数...你是不是又写一个简单的函数？大于100的呢？假设数组里面的成员不是数字，而是字符串，要你输出某些长度等于多少的成员呢？按照原来的方式，你是不是得一个个的去写，去实现？很累，疲于奔波对吧？程序员都是懒癌患者，肯定是不愿意看到这样的。那怎么办呢？

    过滤器就这样应运而生。

    我们看看过滤器是怎么做的？实际上原生是有实现的，就是new Array对象下的filter。

    它非常简单，接收一个回调，并返回一个数组。

    那我们得怎么做呢？

    其实跟上面的逻辑很像，我们稍微改造一下。把重要的那个if判断分离开来。看看：

    怎么理解这个呢？其实我们上面不是有一个if(arr[i] > 0)判断吗？因为if里面其实就是布尔值，假设说我用一个回调函数的返回值做判断，把想要的功能作为返回值输出，满足我们设定的条件就返回true（你喜欢false也行），是不是就很cool的实现了更进一步的抽象化？代码更加的低耦合？

    说到这，你可能还是很疑惑，这跟代码设计之美有啥关系？不，这是一个引子。我们还有进一步设计，进一步改造。

    虽说这样能实现要求，但是你有木有发现？你得很别扭的arrFilter(callback，arr)去调用？既然操作的是数组，我为何不在数组中拓展这样的一个filter函数呢？

    很简单对吧？

     但这样还是不够，要设计代码，不能只看眼前，最好是要很方便的拓展。

    如果是这样，假设我要在Array.prototype新增一个map呢？是不是又是Array.prototype.map = 什么什么？

    不，潜意识的提醒，我不能这样。

    那怎么做？加一个配置啊！

    把要写进prototype的所有拓展方法写成一个配置对象，以后有新的代码，新的方法进来，在配置项加一条就OK啦。这样不是更好？

    但是我们的代码就要稍微改一改了，变成这样：

    但是这只是数组的？如果后面有字符串的呢？object的呢？

    需要再进一步的分类，这样每一种数据类型的新增方法，都仅仅是一条初始化。

    我们试着拓展一个map函数：

    函数写完，只需要在配置项中加一条配置，OK。我们试着调用看看。

    再看页面上的输出结果：

    是OK的。

    这样我们完成了一个简单的代码设计。

    其实，这个虽说很简单，但是呢？设计的思想尤在。vue的构思各种技术都很cool，jQuery的各种构思，值与值，引用于引用之间的相互传递，函数与函数相互调用上，通用内部方法的设计上，都很巧妙，很值得学习。前端总被认为没有技术含量，其实不是的，好的设计不仅仅在于后台架构，当代更在于前端。

    最后，我们一起总览一下这个代码吧：