将 for 循环重写为 filter() javascript

Question

我有以下 JavaScript 代码：

var selectEnabledGenerators = function(generators) {
    //List of generator indexes to show
    var list = generators;
    var allGenerators = $(".generatorContainer");
    //Hide all generators
    allGenerators.hide();
    //maybe use filter here?
    for (var i = 0, max = list.length; i < max; i++) {
        $(".generatorContainer[data-generator=" + list[i] + "]").show();
    }
};

有没有办法使用filter() 重写for 循环？ 我知道我可以使用for each 循环，但我想通过使用过滤器来做到这一点。

Answer 1

这里不需要使用filter。由于您没有返回任何内容，forEach 将是更合适的功能。

应该这样做：

list.forEach(item => $(".generatorContainer[data-generator=" + item + "]").show());

或

list.forEach(function(item){
    $(".generatorContainer[data-generator=" + item + "]").show();
});

如果你不喜欢/不能使用 lambdas

---

我可以使用过滤器吗

是的。但确实没有理由这样做。如果我看到你以这种方式使用过滤器，我会拒绝你的代码审查。

过滤器的用例是通过传入一个谓词函数（一个回答“这个是否停留在”的函数）来快速减少项目列表。 Array<T> 的此函数类型将是 T => boolean。此过滤器函数将对每个项目执行谓词函数的代码块，然后检查该谓词函数的返回值。如果该返回值是真值，它将标记传递给谓词函数的那个​​对象，然后将所有产生真值的对象作为一个新数组返回。 forEach 还将对每个参数执行一个函数，而无需执行返回值和管理新列表的额外工作。

如果不使用过滤器返回的结果，使用过滤器是没有意义的。不仅没用，还会让以后阅读你代码的人困惑，他们会试图理解你为什么在这里使用过滤器。

最终代码是一样的：

list.filter(item => $(".generatorContainer[data-generator=" + item + "]").show());

.show() 被视为副作用（过滤器功能真的不应该有）。

Answer 2

你可以像这样使用.filter()：

allGenerators.filter(function () {
    return list.indexOf(+$(this).attr('data-generator')) > -1
}).show();

简化演示：

$('div').hide().filter(function (i) {
  return [1,3].indexOf(+$(this).attr('data-generator')) > -1
}).show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-generator=1>test1</div>
<div data-generator=2>test2</div>
<div data-generator=3>test3</div>
<div data-generator=4>test4</div>