如何停止 JavaScript for 循环？

Posted 2023-02-24

【中文标题】如何停止 JavaScript for 循环？

【英文标题】：How to stop a JavaScript for loop?

【发布时间】：2012-04-07 12:12:03

【问题描述】：

我正在使用这个 javascript 来遍历一个数组并找到一个匹配的数组元素：

var remSize = [], 
    szString, remData, remIndex, i;

for (i = 0; i < remSize.length; i++)       
    // I'm looking for the index i, when the condition is true
    remSize[i].size == remData.size ? remIndex = i : remIndex = -1;     

数组包含这些“大小”：["34", "36", "38"...]。

remData.size 是我正在寻找的“大小”（例如“36”）。

如果我要搜索的大小在索引中，我需要返回索引i。否则我需要返回-1。有没有更好的方法来做到这一点？

【问题讨论】：

最好使用findIndex方法

【参考方案1】：

要在 JavaScript 中尽早停止 for 循环，请使用 break：

var remSize = [], 
    szString,
    remData,
    remIndex,
    i;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remIndex = -1; // Set a default if we don't find it
for (i = 0; i < remSize.length; i++)       
     // I'm looking for the index i, when the condition is true
     if (remSize[i].size === remData.size) 
          remIndex = i;
          break;       // <=== breaks out of the loop early
     

如果您在 ES2015（又名 ES6）环境中，对于这个特定用例，您可以使用Array#findIndex（查找条目的索引）或Array#find（查找条目本身），两者都可以填充/填充：

var remSize = [], 
    szString,
    remData,
    remIndex;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remIndex = remSize.findIndex(function(entry) 
     return entry.size === remData.size;
);

Array#find:

var remSize = [], 
    szString,
    remData,
    remEntry;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remEntry = remSize.find(function(entry) 
     return entry.size === remData.size;
);

Array#findIndex 在回调第一次返回真值时停止，将调用的索引返回给回调；如果回调从不返回真实值，则返回-1。 Array#find 在找到您要查找的内容时也会停止，但它会返回条目，而不是其索引（如果回调从未返回真值，则返回 undefined）。

如果您使用的是与 ES5 兼容的环境（或 ES5 shim），则可以在数组上使用新的 some function，它会调用回调，直到回调返回真实值：

var remSize = [], 
    szString,
    remData,
    remIndex;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remIndex = -1; // <== Set a default if we don't find it
remSize.some(function(entry, index) 
    if (entry.size === remData.size) 
        remIndex = index;
        return true; // <== Equivalent of break for `Array#some`
    
);

如果你使用 jQuery，你可以使用jQuery.each 循环遍历一个数组；看起来像这样：

var remSize = [], 
    szString,
    remData,
    remIndex;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remIndex = -1; // <== Set a default if we don't find it
jQuery.each(remSize, function(index, entry) 
    if (entry.size === remData.size) 
        remIndex = index;
        return false; // <== Equivalent of break for jQuery.each
    
);

【讨论】：

使用 return 语句是一个好方法。谢谢@T.J。克劳德

@T.J. Crowder 哪个语句是一个好方法：return false 还是 break？

@Ilyaskarim：您使用适合您正在使用的结构的那个（break 在for 循环中，return false 在jQuery.each 中，return true 在some 中， ...)。

【参考方案2】：

使用 for of 循环代替它是 ES2015 版本的一部分。与 forEach 不同，我们可以使用 return、break 和 continue。见https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/

let arr = [1,2,3,4,5];
for (let ele of arr) 
  if (ele > 3) break;
  console.log(ele);

【讨论】：

善用 es6，我认为这是这里最好的答案之一

确实，我想说这是这里最好的答案——这是最简洁的方法（“最简洁、最直接的语法，用于循环遍历数组元素”，正如 Mozilla Hacks 在答案中的链接）。我们应该尽可能地利用 ES6 的新特性来回报我们为 ES6 付出的所有辛勤工作（并在此过程中受益）。

【参考方案3】：

逻辑不正确。它总是返回数组中最后一个元素的结果。

remIndex = -1;

for (i = 0; i < remSize.length; i++)       
    if (remSize[i].size == remData.size) 
        remIndex = i
        break;
    

【参考方案4】：

我知道这有点老了，但不是用 for 循环遍历数组，而是使用方法 <array>.indexOf(<element>[, fromIndex]) 会容易得多

它遍历一个数组，查找并返回一个值的第一个索引。如果该值不包含在数组中，则返回-1。

<array> 是要查看的数组，<element> 是您要查找的值，[fromIndex] 是开始的索引（默认为 0）。

我希望这有助于减少您的代码大小！

【讨论】：

这不回答标题问题：How to stop a JavaScript for loop?它确实回答有没有更好的方法来返回匹配的索引/-1 如果没有.

@greybeard 你是对的。它不回答 title。然而，在正文中，OP 逐字询问：“有没有更好的方法来做到这一点？”我在这里提供的方法完全实现了 OP 试图做的事情，避免了 XY 问题（要求解决问题 Y 以解决问题 X），并生成更短且更易于阅读的代码。虽然标题中的问题可能会导致问题的功能解决方案，但它并不能直接解决问题。当问题与问题无关时，您通常应该解决问题，而不是回答问题。

【参考方案5】：

也可以使用 Javascript 的every 方法。当条件不成立时，它会停止执行。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every

remIndex = -1;

remSize.every((rem, index) => 
  if (rem.size == remData.size) 
        remIndex = i
        return false
  
  return true
)