javascript - Array.prototype.filter.call(forms, function(form) 这是在做什么？

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

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

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

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

在包含类名“需要验证”的每个元素上？

<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);
})();

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

最佳答案

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

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

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

关于 call() 方法的更多信息 https://gomakethings.com/what-the-hell-is-the-call-method-and-when-should-you-use-it/

关于javascript - Array.prototype.filter.call(forms, function(form) 这是在做什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57419277/