这段代码使用 [].filter.call 做什么？答案

【问题标题】：What does this code using [].filter.call do?这段代码使用 [].filter.call 做什么？
【发布时间】：2019-10-29 00:30:07
【问题描述】：

我正在学习 javascript，并尝试编写对列表进行排序的代码，如果元素满足特定条件则删除它们。

我发现这个 sn-p 看起来很有希望，但不知道它是如何工作的，所以我可以根据自己的需要调整它：

list = document.getElementById("raffles-list").children; // Get a list of all open raffles on page
list = [].filter.call(list, function(j) {
    if (j.getAttribute("style") === "") {
        return true;
    } else {
        return false;
    }
});

你们能帮我解释一下这个代码块的作用吗？

【问题讨论】：

你从哪里复制的？它有什么作用，它为您解决了什么问题？到底哪一部分不清楚，你肯定明白一点吗？

标签： javascript arrays

【解决方案1】：

它获取“raffles-list”元素的所有子元素，然后返回包含空“style”属性的过滤列表。

第一行是不言而喻的——它只是从 id 为“raffles-list”的元素中检索子元素。

第二行稍微复杂一点；它利用了两件事：[]，它是一个空数组，实际上只是一个具有各种方法/属性的对象，并且等号右侧的逻辑需要在“列表”之前进行评估" 获取新值。

使用空白数组来调用“过滤器”方法
告诉filter使用list作为数组进行过滤，并使用function(j)进行过滤，其中j为正在测试的列表中的项目
如果项目的样式属性为空，即未应用样式，则返回 true。

编辑：根据 OP 评论， [].filter 是一个原型，因此本质上是一个具有各种属性的对象，就像其他所有东西一样。在这种情况下，过滤器是一种方法 - 请参阅 here。通常你只需要指定一个匿名函数/方法来进行测试，但是这里的作者使用了 .call 来指定一个任意对象来进行测试。看来这已经内置在标准 filter 方法中了，所以我不知道他们为什么这样做。

【讨论】：

我大概收集到了这一点，我想知道您是否可以帮助解决 [].filter.call 等的作用，例如在单独的位中，以便我可以将部分用于未来的代码和学习跨度>
所以我可以通过删除“不需要”的 .call 部分来进一步改进此代码？
@Taazar 它并没有出现 - 看起来你有两个选择 - 要么说 list.filter(function(j) { ...})，要么说作者的方式。如果您取出 .call，它将根据空数组进行评估。
list.filter 将不起作用，因为list 是HTMLCollection，而不是Array。因此它没有filter 原型方法。这就是为什么需要创建空数组才能从Array 原型中获取filter 方法的原因。你不能去掉call 部分，除非你之前将list 转换为Array（例如Array.from(list) — 并非所有浏览器都支持）。这个答案中带有“[].filter 是原型”的部分不是很清楚。 filter 是来自Array.prototype 的原型方法。 .call 并不特定于 filter。

【解决方案2】：

类似数组的对象是一些类似于数组但有区别的javascript对象，例如它们不实现数组原型。如果您想获得数组优于它们的好处（例如，像一个元素的问题过滤器子项），您可以这样做：

Array.prototype.functionName.call(arrayLikeObject, [arg1, [arg2 ...]]);

这里有问题的数组就像是html元素集合；它需要没有任何样式的项目。

【讨论】：

【解决方案3】：

list 被分配了一个集合，这些元素是raffles-list 元素的子元素
list 然后通过过滤其元素重新分配，如下所示
1. 一个空数组是filtered by calling 它带有参数list 和一个回调函数。 call 的形式参数是 this（即 list）和可选的其他对象（在本例中为回调函数）
2. 回调函数接收一个形参j并为每个元素调用
3. 如果style 属性的元素值为空，则该元素将保留在数组中。否则将被丢弃。
最后list 应该包含所有没有style 属性值的元素

【讨论】：