JavaScript for循环、in、of 用法详解——有效云开发平台开发技巧

欢迎大家来到IT世界,在知识的湖畔探索吧!

我们知道在java script中 for 用来实现循环结构，而for…in 用来实现遍历，for…of用来对象迭代遍历。

1、for循环

与其他开发语言相同，JS中for用来实现循环结构之一，

1.1、基本语法：

for ([initialization]; [condition]; [final-expression]) { statement }

欢迎大家来到IT世界,在知识的湖畔探索吧!

1.2、实例：

欢迎大家来到IT世界,在知识的湖畔探索吧!for(let i=1;i<=10;i++){ console.log("i=",i); }

执行结果：

1.3、break关键词

break关键词用户终止循环

for(let i=1;i<=10;i++){ if(i>5) break; console.log("i=",i); }

循环到第5次终止循环。

执行结果：

欢迎大家来到IT世界,在知识的湖畔探索吧!i=1 i=2 i=3 i=4 i=5

1.4、conitue关键词

continue关键词用户跳过本次循环，继续下一次

for(let i=1;i<=10;i++){ if(i % 2 === 0 ) continue; console.log("i=",i); }

如果i是偶数跳过，执行下一次循环，输出i为奇数

i=1 i=3 i=5 i=7 i=9

for循环是js中基础的循环结构，适用于任何情况，而for…in和for…of则更适合于不同的应用场景。

2、for…in

for…in循环遍历对象的所有可枚举属性。什么是可枚举呢？你可以理解为可枚举就是可表现为键值对的对象，for…in枚举得到的是键值对的键值。

 objs={mp_v:"可视化",mp_a:"低代码",mp_name:"有效云"}; for(let objk in objs){ console.log("key：",objk,"值：",objs[objk]); } //执行结果： key： mp_v 值： 可视化 key： mp_a 值： 低代码 key： mp_name 值： 有效云

从上例中可以看到，for…in 循环枚举得到了键值对 key-value中的key属性值，检索适用键值对的值，将键视为数组中的索引并将其放在方括号 ->objs[key]中，如上面代码中的：objs[objk]。

注意：一维数组也可以理解为键值对，key即为数组的索引，但是for…in枚举是无序的，无法保证枚举得到的顺序，所以不建议使用for…in用来枚举数组，应该使用for，for…of 或for each 来遍历数组。

3、for..of

ES6引入for…of之后，它已经成为广大开发者们常用以迭代枚举对象的方法。

 pmname="有效云开发平台" for(letter of pmname){ console.log(letter); } //执行结果： 有 效 云 开 发 平 台

上例使用for…of枚举了字符串中的每个字符，我们注意到，for…of是有序的，这与for…in不同。

for…of可以用来迭代枚举任何，除字符串外还可以是数组、对象等。

 const arrA = [1,2,3,4,5,6]; for( let v of arrA ){ console.log(v); } //执行结果： 1 2 3 4 5 6

上面代码使用 for…of 遍历了数组arrA，接下来使用for..of迭代对象。

 objs={mp_v:"可视化",mp_a:"低代码",mp_name:"有效云"}; for(const [k,v] of Object.entries(objs)){ console.log("key：",k,"val：",v); } // key： mp_v val： 可视化 // key： mp_a val： 低代码 // key： mp_name val： 有效云

通过这个示例，我们看到在遍历对象时，通过[v,k]，同时获得键值对的键和值。

感谢阅读，欢迎关注有效云开发平台。