前端 - Javascript 数组/对象 - 循环语句汇总

最新推荐文章于 2024-09-06 16:15:43 发布

宁小法

最新推荐文章于 2024-09-06 16:15:43 发布

阅读量3.8k

点赞数

分类专栏： JavaScript 文章标签： JS 循环 for forEach

本文链接：https://blog.csdn.net/william_n/article/details/105841347

版权

JavaScript 专栏收录该内容

49 篇文章 2 订阅

订阅专栏

本文详细解析JavaScript中的五种循环方式：while、for、for..in、for..of及forEach方法，对比其适用场景与优缺点，特别关注ES6新特性及Angular的forEach使用技巧。

摘要由CSDN通过智能技术生成

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()，也只遍历属于对象本身的属性。

关于内外两层嵌套循环：//结合 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 的基本语法

后续补充

...