javascript - 如何正确退出javascript中的循环并防止它进一步迭代？

Question

我写了一个非常简单的循环来查找点“.”的位置。和字符串中的空格，然后将其切片并将它们插入数组。循环必须在找到最后一个点时结束。我认为我犯了一个错误，因为循环没有正确地退出引号，而且我得到了双重输出。

代码如下:

var str = '.boom .style #foo .media';
var p = 0;
var className = [];
searchLoop: for(i = 0; i < str.length; i ++) {
    var n = str.indexOf('.', p);
    var o = str.indexOf('#');
    var p = str.indexOf(' ', n) ;
    if(str.indexOf('#') >= 0)
        var idName = str.slice(o + 1, n);
    if(str.lastIndexOf('.') !== n)
        className.push(str.slice(n + 1, p));
    console.log(className);
    console.log(idName);
    if(str.lastIndexOf('.') === n) {
        className.push(str.slice(n + 1, p) + str[str.length - 1]);
        break searchLoop;
    }
}

这是输出:

["boom", "style", "media"]
["boom", "style", "media"]
["boom", "style", "media"]
foo 

我稍微编辑了代码，让它也可以选择“#”，这次我得到了三重结果。

Answer 1

我无法重现你的结果这是您的代码的 JSFiddle http://jsfiddle.net/q34gt/

这是我在 Chrome

中得到的输出

["boom"]
["boom", "style"] 
["boom", "style"] 
foo 

根据您的编码逻辑，这是正确的。

如果在执行代码后打开控制台，您将获得以下输出

["boom", "style", "media"]
["boom", "style", "media"]
["boom", "style", "media"]
foo 

与您得到的相同，因为控制台在所有三个项目都已添加到数组后读取类名。

我刚刚尝试使用 mozilla，得到的输出与您的输出相同，但请放心，您的代码正在按预期执行并且也打破了循环。我刚刚用警报替换了您的控制台日志，您得到了预期的结果，如下所述，这是 fiddle http://jsfiddle.net/q34gt/1/

在执行这个特定的 if 语句之后，每次迭代都会在控制台上显示您的 className 数组

if(str.lastIndexOf('.') !== n)
        className.push(str.slice(n + 1, p));

• 在上述 if 执行后的第一次迭代中，className 数组包含 [boom]
• 在上述 if 执行后的第二次迭代中，className 数组包含 [boom, style]
• 在上述 if 执行后的第三次迭代中，className 数组包含 [boom, style] 因为 str.lastIndexOf('.') !== n 条件失败并且 className.push(str.slice(n + 1, p));不执行