Array.prototype.filter.call(forms, function(form) 这是干什么的？答案

【问题标题】：Array.prototype.filter.call(forms, function(form) What is this doing?Array.prototype.filter.call(forms, function(form) 这是干什么的？
【发布时间】：2019-12-16 13:25:21
【问题描述】：

我很难完全理解这段代码的工作原理。这只是从引导程序复制和粘贴的表单验证代码。

我的问题从这一行开始 var 验证 = Array.prototype.filter.call(forms, function(form)

在我看来，它正在创建一个名为验证的数组，其中包含任何类名为“needs-validation”的元素。然后是调用匿名函数并传入整个表单并运行后续代码行

 form.addEventListener('submit', function(event) {
     if (form.checkValidity() === false) {
     event.preventDefault();
     event.stopPropagation();
     }

在每个包含类名“needs-validation”的元素上？

<script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

此代码成功验证表单上的输入。我只是不明白它是如何工作的。

【问题讨论】：

不清楚为什么选择filter()，也不清楚validation 的意义是什么（如果这真的是代码，那么validation 将只是一个空数组）。这段代码实际上来自哪里？如果这是您声称的引导源中的某个地方，我会感到非常惊讶（除非我误解了您）。
回调没有返回任何东西。所以，它最终是这样的：for (const form of forms ) { if (form.checkValidity() === false)......} 这是一种在类数组对象What does this code using [].filter.call do? 和Who can help to explain this JavaScript algorithm [].filter.call() 上使用数组方法的方式@
@adiga 你知道他们为什么选择过滤器而不是 forEach 吗？这似乎是一个奇怪的选择。
@IceMetalPunk 不确定。在这种情况下，它的行为就像 forEach。
@adiga 除了它还有创建新数组的开销，然后......从不使用它。 forEach 不会有这个问题。

标签： javascript html bootstrap-4

【解决方案1】：

方法document.getElementsByClassName返回一个HTMLCollection，乍一看它类似于Array，但HTMLCollection没有方法.filter、.map、reduce等。

所以为了使用这些方法，我们需要将HTMLCollection 转换为一个数组。

或者我们可以使用特定的 javascript：Array.prototype.filter 对对象进行迭代，如果您在 HTMLCollection 上查看详细信息，document.getElementsByClassName 返回它有键，它是 iterable。所以我们可以调用方法Array.prototype.filter.call( 并作为上下文（第一个参数）传递我们的HTMLCollection，第二个参数将是一个函数，它将为集合中的每个元素调用。

【讨论】：

@Jacqueline 是明确的答案还是需要更多细节？