Javascript 循环语句汇总

1.应用场景

主要用于数组array， 对象{}/map, set进行循环流程处理.

2.学习/操作

1.while循环 function testBreak(x) {   var i = 0;   while (i < 6) {     if (i == 3) {       break; //跳出循环，执行return语句     }     i += 1;   }   return i * x; } var ret = testBreak(6); console.log(ret);   结果：     2.普通for循环 自行指定循环次数     3.for..in循环 属历史遗留，用于遍历对象的属性(数组的索引值也算属性)。 但有一个缺点：如果手动向数组添加成员属性，则： 虽然数组的length不变，但用for..in遍历数组会遍历到那些新定义的属性     4.for..of循环(ES6) for..of循环修复了for..in存在的问题，他只遍历属于对象本身的属性值。 且这个对象必须是iterable可被迭代的。如Array, Map, Set.   for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等） 上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句 ---- MDN   5.forEach(callbackFn, ?thisArg)方法(ES5.1) iterable可被迭代的对象都有forEach(callbackFn, ?thisArg)。 而Array, Map, Set对象都是可被迭代的。 forEach()接收一个回调函数callbackFn，每次迭代都回调该函数。 回调函数的参数列表为(value, key, iterable)，依次是(值, 键, 可迭代的对象本身).   如为数组时 const array1 = ['a', 'b', 'c']; array1.forEach(element => console.log(element));  //使用了箭头函数，低版本浏览器或不支持 //等价于[ES3写法]：array1.forEach(function(ele){console.log(ele);}) // expected output: "a" // expected output: "b" // expected output: "c" 截图： 为对象时，出现报错 补充：//forEach方法无法中断执行，总是会将所有成员遍历完。如果希望符合某种条件时，就中断遍历，要使用for循环.       总结： while可用array. iterable可被迭代的对象类型有Array, Map, Set。 普通for循环可用于遍历数组。 for..in可遍历Array, Object对象，且会遍历到新添加的成员属性。 for..of可遍历iterable可被迭代的对象(不包括Object)。且只遍历属于对象本身的属性。 iterable可被迭代的对象有成员方法forEach()，也只遍历属于对象本身的属性。   更多见： https://developer.mozilla.org/zh-CN/search?q=for     关于内外两层嵌套循环：//结合 continue， break ， label的使用    20200506  https://wangdoc.com/javascript/basic/grammar.html     后续补充 ...

3.问题/补充

1.angular.forEach怎么跳出循环？//在公司项目维护的过程中遇到  20200429 forEach是不能跳出循环的。 在绝大多数编程语言中，foreach不仅仅是语法糖，通过编译优化它可以提供更好的性能，比如直接略去边界检查。 为了能更好地做到这些优化，foreach在设计上也给出了制约。 例如在C#中，迭代过程不允许更改容器本身（增删元素），不允许break（我们知道，所有的条件语句都会降低指令缓存和流水线的性能）。 Angular包装了一系列的原生JS方法，为的是能够更好地监听模型变化。 这些JS方法的使用方式和原来基本没有区别。 forEach就是一个，还有$timeout等等。 关于Angular的数据绑定方式可以看这个： http://harttle.com/2015/06/06/angular-data-binding-and-digest.html   解决办法：//即定义一个判断标识 var keepGoing = true; angular.forEach([0,1,2], function(count){   if(keepGoing) {     if(count == 1){       keepGoing = false;     }   } }); 参见： http://stackoverflow.com/a/13844508/2586541   或者 使用Js原生的forEach/jquery.  //实践TBD Js原生的forEach和jquery的each是这样的， return true, 中断后面的操作，继续遍历到下一个操作，类似continue；//效果如此 return false，结束整个遍历，类似break  //错误的说法,  return false/true或者直接return; 都是一样的, 不同的是在函数中,返回的值不同.   实践得知: arr.forEach(function(ele){     if(ele == 3){         return true;// return/return false/return true; 效果都是一样的,跳过本次循环         // continue; //报错         // break; //报错     }     console.log(ele); }); console.log('forEach之后的语句'); Angular使用return是没有效果的， 而且使用break会出现报错.

4.参考

https://blog.csdn.net/wuyujin1997/article/details/88743955  //JS中的4种for循环 https://developer.mozilla.org/zh-CN/search?q=for  //查找for https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements   //语句和声明 https://segmentfault.com/q/1010000003030603  //angular.forEach怎么跳出循环 http://stackoverflow.com/a/13844508/2586541 https://wangdoc.com/javascript/basic/grammar.html   //JavaScript 的基本语法

后续补充

...