专业编程基础技术教程

网站首页 > 基础教程 正文

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

ccvgpt 2024-07-28 12:04:55 基础教程 7 ℃

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

1、for循环

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

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

1.1、基本语法:

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

1.2、实例:

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次终止循环。

执行结果:

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],同时获得键值对的键和值。

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

Tags:

最近发表
标签列表