javascript - 在 if 语句中循环遍历数组以检查是否所有值都通过

Question

我有一个等于 5(我拥有的字段数)的变量“fieldCount”。如何在不具体说明每个索引的情况下写出以下内容:

if (
   fields[0].checkValidity() && fields[1].checkValidity() && fields[2].checkValidity()
   && fields[3].checkValidity() && fields[4].checkValidity()
) {
    fieldsPass = true;
}

Answer 1

您可以使用循环或一些相当标准的内置浏览器函数。

循环

下面是如何使用循环来完成它。这应该是最快的代码，但您可能不需要最快的代码，除非您要检查大量项目的大量字段。我推荐 "correct, clear, concise, fast"优先事项，因此认为您应该从内置的浏览器功能开始。但这里仅供引用:

var fieldsPass = true;
var i, l = fields.length;
for (i = 0; i < l; i += 1) {
   if (fields[i].checkValidity()) continue;
   fieldsPass = false;
   break;
}

注意声明 i循环外的变量和捕获循环外的字段长度是可选的。

我做的第一个是因为很多人不知道提升，事实上 for (var i ...不会创建仅在 for 中可用的变量循环，它与声明 var i 相同在函数的顶部，这种行为可能会导致错误。

第二个是出于习惯，不过正如我所说，您可以将其放入循环检查中。 See this discussion .如果您确实使用循环方法，您可能正在寻找更好的性能，因此可能希望使用捕获长度方式以获得最佳性能。 (如果它真的那么重要，你可以使用 var i = fields.length; while (i--) { } 方法。)

浏览器函数 Array.Every

您可以使用 Array.prototype.every() (来自 ECMAScript 2015 第 6 版):

Mozilla Developer Network

The every() method tests whether all elements in the array pass the test implemented by the provided function.

fieldsPass = fields.every(function(field) {
   return field.checkValidity();
});

它返回 true当传入函数在数组中的每个项目上运行时，返回 true对于他们所有人。如果有人返回 false , 它停止并返回 false .在某些语言中，他们将相同的概念称为所有，如果您熟悉的话。

或者，声明您的 checkValidity 可能会更好函数一次，而不是将它放在每个字段上。这可能是不可能的，具体取决于您如何实现它(也许它可以访问私有(private)变量？)。请注意，您提供的回调函数的第一个参数(请参阅上面链接中的文档)是 currentValue在迭代中，您要检查的字段。如果您的函数看起来像这样，它将起作用:

function checkValidity(field) { /* check validity */ }

fieldsPass = fields.every(checkValidity);

浏览器函数数组.Some

您也可以使用 Array.prototype.some() (来自 ECMAScript 2015 第 6 版):

Mozilla Developer Network

The some() method tests whether some element in the array passes the test implemented by the provided function.

fieldsPass = !fields.some(function(field) {
   return !field.checkValidity();
});

请注意，它基本上只是 every 的倒数，因为“ALL VALID”与“NOT(ANY INVALID)”相同。这只是意味着它检查传递函数的数组中的任何一项，如果是，则返回 true .在某些语言中，他们将相同的概念称为 any，如果您熟悉的话。

一般浏览器兼容性说明

请注意，对于这两个功能，浏览器兼容性非常好。如果您不关心版本 9 以下的 IE，那么您就很安全了。如果你这样做，那么你会想要使用一个 polyfill，它在上面链接的 MDN 页面上可用。您可以将该代码包含在您的 javascript 文件的全局范围内，然后就可以在 IE 8 及以下版本中正常使用它。 (我说的是这样开头的代码块:)

if (!Array.prototype.every) {
   Array.prototype.every = function(callbackfn, thisArg) {
   ...
}