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

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

代码如下：

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

我对代码进行了一些编辑，这样它也可以选择“#”，这次我得到了三个结果。

var temp=str.split（“.”）
var temp = str.split('.')

for(var i = 1; i < temp.length; i++){
  className.push(temp[i].trim())
}

对于（变量i=1；i

退出循环是通过一个简单的

中断来完成的

或者，您可以将代码移动到函数中，并通过执行

返回className退出循环它将与函数一起跳出循环

但是，我提供了一种不需要提前退出的替代解决方案
我无法重现您的结果
下面是代码的JSFIDLE

这是我在Chrome中得到的输出

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

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

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

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

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

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

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

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


在执行上述if之后的第一次迭代中，className数组包含[boom]
在执行上述if之后的第二次迭代中，类名数组包含[boom，style]
在执行上述if之后的第三次迭代中，className数组包含[boom，style]，因为str.lastIndexOf（'.'）！==n条件失败，className.push（str.slice（n+1，p））；没有被执行
正如MathSquared11235所说，没有必要重新发明轮子，但是答案并不像只使用一个简单的拆分方法那么简单

下面是如何按照elclanrs的建议使用RegExp区分“.”和“#”：

var str = '.boom .style #foo .media';
var className = str.match(/[.]\w+/g); // match for words that begin with '.'
var idName = str.match(/[#]\w+/g); // match for words that being with '#'
className = className.join(''); // join all items so we have a string to play with
className = className.replace(/[.]/g,' '); // replace all '.' with ' '
className = className.replace(' ', ''); // remove the first ' '
className = className.split(' '); // split the className using ' ' separator so we have an array again. 
idName = idName.toString(); // make it a string
idName = idName.replace('#',''); // just remove the '#'
console.log(className);
console.log(idName);

结束这将是输出：

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

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

另一种方法是：

var str = '.boom .style #foo .media';
var cssSelectors = str.split(' ');
var className = [];
searchLoop: for(i = 0; i < cssSelectors.length; i ++) {
if(cssSelectors[i].indexOf('#') > -1 && cssSelectors[i] && cssSelectors[i] !== '#')
    var idName = cssSelectors[i].replace('#', ''); // just to make it foolproof and make sure no empty string and stand alone '#' pass through
if(cssSelectors[i].indexOf('.') > -1 && cssSelectors[i] && cssSelectors[i] !== '.')
    className.push(cssSelectors[i].replace('.', '')); // no '' and no stand alone '.' can pass through
console.log(className);
console.log(idName);
}

你自己实施这项计划有什么原因吗？不要在生产代码中重新发明轮子！使用！重新实现使代码容易出错；使用行之有效的方法。不要依赖新的实现；可能有一个边缘案例会破坏您的代码，标准版本针对性能进行了优化，并由专业程序员编写。在JS这样的解释语言中，直接访问解释器是最好的。内置的
.split（）
方法可以做到这一点。您可以将regex与split
str.split（/[.#]/）
一起使用。您的循环正在正确退出。只是一些古怪的控制台行为延迟了对数组的求值。将其更改为
console.log（className.slice（））
，您将看到不同之处。如果您登录
i
，也会很有帮助。您将看到有三次迭代。看起来您正在尝试解析CSS。。。在任何情况下，我仍然建议使用正则表达式，因为您正在使用模式，它是一个完美的工具。你可以匹配
/（[.#]）（\w+）/
并将捕获组分成一个对象数组，比如
[{type:'.'，text:'boom'}，{type:'.#'，text:'foo'}，…]
@CrazyTrain你是对的，这只是一个时髦的控制台行为，它只会迭代三次。是的，但这并不能解决重复结果的问题。@TGH我能看出为什么不应该使用标签来
中断
，或者只是因为这是一个简单的循环，所以没有必要吗？我重写了解决方案，所以不再需要中断。希望这就是OPwants@igaar这是否回答了你的问题，如果没有，请告诉我你有什么问题吗questions@igaar我很高兴我能帮忙，如果它回答了你的问题，你能通过点击勾号接受它作为答案吗。
["boom", "style", "media"]
foo
["boom", "style", "media"]
foo
["boom", "style", "media"]
foo
["boom", "style", "media"]
foo