javascript - 在 Javascript 中让一个函数与另一个函数配合

Question

我有两个过滤字符串数组的函数。第一个函数根据长度对其进行过滤，另一个函数根据它包含的字符进行过滤。

字符串数组在页面加载时加载。

如何使这个函数一起工作，所以当我根据数组包含的字符过滤数组并且我有适当的字符串时，稍后我应该按最小值，它应该向我显示数组中的剩余字符串上一个过滤器。我不想再次加载数组。

这里我有第一个函数http://jsfiddle.net/arunpjohny/03avr1vh/2/

如何添加其他并让它们一起工作。

我的脚本:

function filter() {
    var a = document.getElementById('A').checked,
        e = document.getElementById('E').checked,
        o = document.getElementById('O').checked,
        result2; //make a copy

    result2 = animals.filter(function (value) {
        value = value.toLowerCase();
        return (!a || value.indexOf('a') == -1) && (!e || value.indexOf('e') == -1) && (!o || value.indexOf('o') == -1);
    })
    document.getElementById("demo").innerHTML = result2;
}
filter();

Answer 1

jsfiddle demo

在为自己构建了一个小型 FP 库后，您可以以声明式方式编写过滤器

var animals = ["Bear", "Mouse", "Cat", "Tiger", "Lion"];

var letters = ["A", "E", "O"];

function showAnimals() {

    var getSwitches = compose([
        map(prop("value")),
        filter(prop("checked")),
        map(getElementById)
    ]);

    var switches = getSwitches(letters);

    var _filter = compose([
        map(join("")),
        filter(compose([
            not,
            any(flip(elem)(switches)),
            map(toUpperCase)
        ])),
        map(split(""))
    ]);

    var result = _filter(animals);
    getElementById("demo").innerHTML = join(", ")(result);
};

您的两个主要行动是:

1. 获取检查的输入，将其转换为字符串数组。
2. 根据检查的输入过滤动物

每个读起来都像一个小故事:(注意反向阅读撰写 block )。

获取开关

1. 对每个字母调用getElementById
2. 过滤掉未经检查的输入
3. 获取每个输入的值
4. 将结果数组存储为开关

_过滤器

1. 将每个动物名称拆分为字母数组
2. 按以下条件过滤每种动物
   • 将动物转换为大写
   • 动物不应与任何开关匹配
3. 将每个动物名称重新连接到字符串
4. 将结果数组存储为结果

<小时/>

好的，这就是我们使用的很多函数。我不会详细讨论每一个，但大多数 FP 库都会为您提供这些基础知识。我在 this post about function composition 中详细介绍了从头开始构建其中一些的细节。 .

Before we go further!

“性能好吗？”

是的，但是与什么相比呢？如果您编写一个 map 或 filter lambda，您可能能够更快地处理相同的信息。

“那么这很慢吗？”

不，但只有你可以对此做出判断。它仍然会在不到一秒的时间内得出答案，所以对我来说已经足够快了。

“为什么这样更好？”

首先，它更具声明性。也就是说，我们告诉计算机我们想要什么，而不一定告诉它如何给我们答案。后者是一种更加命令式风格。

诸如设置变量、调用 for 循环等之类的事情正在告诉计算机如何完成其工作。命令式风格并不坏，只是当它变得过于冗长时可能会很糟糕。

请注意，我们可以通过定义两个变量来解决问题:switches 和 result。其他一切都只是一个函数。

有关更多信息，我鼓励您阅读我上面链接的其他答案。

For those of you interested, here's the functions I used to make the above solution work

var id = function(x) {
    return x;
};

var getElementById = function(x) {
    return document.getElementById(x);
};

var neq = function(y) {
    return function(x) {
        return x !== y;
    };
};

var not = function(x) { return !x; };

var prop = function(x) {
    return function(elem) {
        return elem[x];
    };
};

var indexOf = function(y) {
    return function(x) {
        return x.indexOf(y);
    };
};

var elem = function(y) {
    return compose([neq(-1), indexOf(y)]);
};

var map = function(f) {
    return function(xs) {
        return xs.map(f);
    };
};

var filter = function(f) {
    return function(xs) {
        return xs.filter(f);
    };
};

var any = function(f) {
    return function(xs) {
        return xs.some(f);
    }
};

var reduceRight = function(f) {
    return function(i) {
        return function(xs) {
            return xs.reduceRight(uncurry(f), i);
        };
    };
};

var toUpperCase = function(s) {
    return s.toUpperCase();
};

var split = function(y) {
    return function(x) {
        return x.split(y);
    };
};

var join = function(y) {
    return function(x) {
        return x.join(y);
    };
};

var flip = function(f) {
    return function(y) {
        return function(x) {
            return f(x)(y);
        };
    };
};

var uncurry = function(f) {
    return function(x, y) {
        return f(x)(y);
    };
};

var compose = flip(reduceRight(flip(id)));

这就是全部，伙计们!