来讲一讲如何理解 JavaScript 中 Array 的 map/filter 函数

打算每周写一篇文章，这是本周的文章，发出来大家一起分享一下。原文地址：

http://www.jianshu.com/p/c4a77e5b8313

前两周的文章：

《什么是 MVVM 模式？》， http://www.jianshu.com/p/a898ef83f38c

《做 JavaScript 开发的同学，快来加入 TypeScript 大家庭吧！》， http://www.jianshu.com/p/f035cb4b9a40

最近一直想写一系列文章，好好介绍一下 JavaScript 下的函数编程，以及 ReactiveX 这个神器。拖延症犯了，连提纲都没规划出来。不过真心想聊这个话题，今天就先聊一聊一些简单的小技巧。

如何理解 Array 的 map 函数？

我们先来看一个简单的例子，假设有一个数组 [1,2,3,4]，如果想对里面所有的数全部加上 10 ，那么最普通的做法就是：

var input = [1,2,3,4];
var output = [];
for(var i = 0; i < input.length; i++ ) {
    var newData = input[i] + 10 ;
    output.push(newData);
}
console.log(output);

再来看另外一个稍微复杂一点的例子，假如我们从网路读取到一批数据，然后把他们渲染到页面上：

var dataList = getJsonFromRemote();
var output = [];
for(var i = 0; i < dataList.length; i++ ) {
    var el = '<li>' + dataList[i] + '</li>'
    output.push(el);
}
console.log(output);

我们来观察一下这两个例子有什么样的共性？他们都是从一个数组中循环读出每一个数据，然后通过计算后得到一个新数据，然后放入到一个数组中，那我们来对代码进行一些优化：

function add(data) {
    return data + 10;
}

var input = [1,2,3,4];
var output = [];
for(var i = 0; i < input.length; i++ ) {
    var newData = add(input[i]);
    output.push(newData);
}
console.log(output);

function renderLi(data) {
    return '<li>' + dataList[i] + '</li>';
}

var input = getJsonFromRemote();
var output = [];
for(var i = 0; i < input.length; i++ ) {
    var newData = renderLi(input[i]);
    output.push(el);
}
console.log(output);

我们把这两个代码片段中的循环逻辑修改成了一个小函数，大家再对比一下这两个 for 循环内部，几乎只有那个“小函数”的名字不一样，其他部分一模一样，我们给这个“小函数”一个好听的名字——算法。

对，我们在对一个数组进行循环处理时，大部分情况下，如果他们的输入是一个合法的数组，输出也是一个合法的数组，唯一不同的只是他们的“算法”不一样而已。于是，我们再来优化一下代码：

function map(array, func) {
    var output = [];
    for(var i = 0; i < array.length; i++ ) {
        output.push(func(array[i]));
    }
    return output;
}

function add(data) {
    return data + 10;
}

function renderLi(data) {
    return '<li>' + data[i] + '</li>';
}

var input1 = [1,2,3,4];
var output1 = map(input1, add);

var input2 = getJsonFromRemote();
var output2 = map(input2, renderLi);

我们把一个 for 循环实现成了一个 map 函数，它接受两个参数：一个是数组，一个是算法函数。于是在我们下面的调用中，就再也看不到 for 循环的代码了。

目前的 map 函数接受两个参数，跟我们最开始提到的 Array 对象的 map 函数还稍微有一点点差异，我们再调整一次：

class Array {
    constructor() {
        this._list = [];
    }

    map(func) {
        var output = [];
        for(var i = 0; i < this._list.length; i++ ) {
            output.push(func(array[i]));
        }
        return output;
    }
}

我们把一个普通的 map 函数放到 Array 类上，那么它也只需要接受一个参数了，就是“算法”。所以我们的逻辑代码也相应调整为：

[1,2,3,4].map(function(item) {
    return item + 10;
});

getJsonFromRemote().map(function(item) {
    return '<li>' + item[i] + '</li>';
});

如何理解 Array 的 filter 函数？

如果 for 循环以后都变成了 map 函数调用的话，那么大家一定会有一个疑问：如果并不是想对一个数组进行“算法变化”，而只是想获取原数组中“符合规格”的那部分数据，该怎么做呢？

这是就该 filter 出场了，看名字就可以知道，它就是一个过滤器。假设有一个 number 数组，我们只想获取它的偶数。我们先还是来看看传统的“笨办法”：

var input = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var output = [];
for(var i = 0; i < input.length; i++ ) {
    if(input[i] % 2 == 0) {
        output.push(input[i]);
    }
}
console.log(output);

然后我们在用学习 map 时的办法，来对他进行一下优化：

function filter(input, func) {
    var output = [];
    for(var i = 0; i < input.length; i++ ) {
        if(func(input[i])) {
            output.push(input[i]);
        }
    }
    return output;
}

function even(data) {
    return input[i] % 2 == 0;
}

var input = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var output = filter(input, even);
console.log(output);

可以看到 filter 函数和 map 函数的实现很相似，主体依然是 for 循环，不过循环体的内部是先调用算法计算数据，然后依据计算结果来选择是否把当前数据复制到 output 中，结果为 true 则保留，为 false 则过滤掉。 even 函数的作用就是对传入的数据进行判断，如果是偶数，则返回 true 。最终的版本如下：

[1, 2, 3, 4, 5, 6, 7, 8, 9].filter(function(item) {
    return item[i] % 2 == 0;
});

综合范例

我们接下来来实现一个非常真实的业务逻辑：我们用 nodejs 读取一个文件夹下所有的第一层子文件夹的名字，然后转化为绝对路径(以下代码暂时不考虑错误逻辑)。

var fs = require('fs');
var path = require('path');

var dirPath = '...';
var contentList = fs.readdirSync(dirPath);  //读取文件夹下的所有内容
var output = [];
for(var i = 0; i < contentList.length; i++) {
    var name = contentList[i];
    var subDirPath = path.resolve(dirPath, name); // 获取绝对路径
    if(fs.statSync(subDirPath).isDirectory()) {  // 判断是否为文件夹，排除掉文件
        output.push(fullPath);
    }
}

再来看看优化实现：

var fs = require('fs');
var path = require('path');

var dirPath = '...';
var output = fs.readdirSync(dirPath).map(function(item){
    return path.resolve(dirPath, item);
}).filter(function(item) {
    return fs.statSync(item).isDirectory();
});

再换成 lambda 版本看看？

var fs = require('fs');
var path = require('path');

function getSubDirList(dirPath) {
    return fs.readdirSync(dirPath)
        .map(item => path.resolve(dirPath, item))
        .filter(item => fs.statSync(item).isDirectory());
}

var dirPath = '...';
var output = getSubDirList(dirPath);

怎么样？有没有很清爽的感觉？不过我更喜欢下面这种美妙的写法：

var R = require('ramda');
var fs = require('fs');
var path = require('path');

var getSubDirList = R.compose(
    R.filter(item => fs.statSync(item).isDirectory()),
    R.map(item => path.resolve(dirPath, item)),
    fs.readdirSync
);

var dirPath = '...';
var output = getSubDirList(dirPath);

最后这段代码有人能看明白么？卖个关子，下次再讲。

来讲一讲如何理解 JavaScript 中 Array 的 map/filter 函数

如何理解 Array 的 map 函数 ？

如何理解 Array 的 filter 函数 ？

综合范例

如何理解 Array 的 map 函数？

如何理解 Array 的 filter 函数？