时间戳

首页 > 解决方案 > Array.prototype.filter.call(forms, function(form) 这是干什么的？

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

问题描述

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

我的问题从这一行开始 var validation = 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);
})();

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

标签： javascripthtmlbootstrap-4

解决方案

该方法document.getElementsByClassName返回 a 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/

推荐阅读