如何停止JavaScript for循环?


127

我正在使用此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。有一个更好的方法吗?

Answers:


193

for在JavaScript中尽早停止循环,请使用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(aka 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如果回调从不返回truthy值。Array#find当它找到您要查找的内容时也会停止,但是它返回条目,而不是它的索引(或者undefined如果回调函数从不返回真实值)。

如果使用的是与ES5兼容的环境(或ES5填充程序),则可以在数组上使用新some函数,该函数将调用回调,直到回调返回真实值:

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

1
使用return语句是一种好方法。感谢@TJ Crowder
techloris_109 17/09/13

@TJ Crowder哪个语句是一个好方法:返回false还是break?
伊利亚斯·卡里姆

3
@Ilyaskarim:您可以使用一种与您正在使用的结构相对应的方法(breakfor循环中,return false在中jQuery.eachreturn truesome...中)。
TJ Crowder

13

使用for循环代替,这是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,我认为这是最好的答案之一
Emad Salah

的确,我会说这是最好的答案-这是最简洁的方式(“最简洁,直接的语法可遍历数组元素”,如Mozilla Hacks在答案链接中所说)。我们应该尽可能地利用ES6的新功能来偿还ES6的所有辛苦工作(并在此过程中使自己受益)。
Velojet

10

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

remIndex = -1;

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

0

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

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

<array>是要查找的数组,<element>是要查找的值,[fromIndex]是要从其开始的索引(默认为0)。

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


1
这不会回答标题问题:How to stop a JavaScript for loop?回答是否有更好的方法返回match / -1的索引(如果没有)
灰胡子
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.