首页> JAVASCRIPT教程

JS中for,for...in,for...of和forEach的区别和用法实例

withpy 2021-11-05

简介JS遍历数组(循环数组)的方式有多种,可以使用传统的for循环,也可以使用升级版的for in循环,还可以使用Array类型的forEach() 方法,这篇文章主要给大家介绍了关于JS中for、for...in、for...of和forEach的区别和用法的相关资料,需要的朋友可以参考下

for循环

基本语法格式:

 for(初始化变量;条件表达式;操作表达式){              循环体语句;     }

普通for循环在Array和Object中都可以使用。for循环中可以使用return、break等来中断循环。

//遍历数组
        var arr = [1,2,3,4,5];
        for(var i=0;i<arr.length;i++){
            console.log(arr[i]);
        }
//遍历对象
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k=0;k<3;k++){
            console.log(obj['x'+k]);
        }

在遍历对象时,显然存在着很大的限制,对属性的命名和k的值都存在限制。

forEach循环

基本语法格式:

   arr.forEach(function(k){          console.log(k);        })

依次从数组中取出元素放在k中,然后将k作为参数传递给函数

.forEach()是Array原型的一种方法,它允许您遍历数组的元素, .forEach()不能遍历对象。forEach 方法没办法使用 break 语句跳出循环,或者使用return从函数体内返回。

//遍历数组
        var arr = [3,2,3,9,5];
         arr.forEach(function(value,arr){
            console.log(value);
         })

for…in循环

基本语法格式:

for(var 变量  in  数组名或集合名)    {       数组名[变量]    }

变量中存放的数组或集合的索引。

 //遍历数组
        var arr = [1,2,3,4,5];
        for(var i in arr){
            console.log(arr[i]);
        }
//遍历对象
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k in obj){
            console.log(obj[k]);
        }

1.下标的值可能会是字符串(String)类型

2.循环不仅会遍历数组元素,还会遍历任意其他自定义添加的属性,如,obj上面包含自定义属性,obj.name,那这次循环中也会出现此name属性

3.某些情况下,上述代码会以随机顺序循环数组

for-in循环设计之初,是给普通以字符串的值为key的对象使用的。而非数组。

for…of循环

基本语法格式:

 for(var 变量 of 数组名或集合名)    {        console.log(变量);    }

变量中存放的是数组或集合中的元素。

 //遍历数组
         var arr = [3,2,3,9,5];
         for(var value of arr){
            console.log(value);
         }
//遍历对象
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k of Object.entries(obj)){
            console.log(k);
        }

entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。

迭代对象中数组的索引值作为 key, 数组元素作为 value。

1.可以避免所有 for-in 循环的陷阱

2.不同于 forEach(),可以使用 break, continue 和 return

3.for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象

4.它也支持字符串的遍历

5.for-of 并不适用于处理原有的原生对象

总结

1.'for…in'用于迭代对象的所有'可枚举'属性,包括继承的可枚举属性, 该迭代语句可用于数组字符串或普通对象,但不能用于Map或Set对象

2.'for…of'用于'可迭代'对象,迭代其值而不是其属性,该迭代语句可以与数组,字符串Map或Set对象一起使用,但不能与普通对象一起使用。

到此这篇关于JS中for,for...in,for...of和forEach的区别和用法的文章就介绍到这了,更多相关JS中for,for...in,for...of,forEach区别内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

相关文章

  • 项目依赖Springboot jar失败解决方案

    这篇文章主要介绍了项目依赖Springboot jar失败解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

  • python程序输出无内容的解决方式

    这篇文章主要介绍了python程序输出无内容的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  • 使用prometheus统计MySQL自增主键的剩余可用百分比

    这篇文章主要介绍了使用prometheus统计MySQL自增主键的剩余可用百分比,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  • 计算pytorch标准化(Normalize)所需要数据集的均值和方差实例

    今天小编就为大家分享一篇计算pytorch标准化(Normalize)所需要数据集的均值和方差实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  • Linux常见英文报错中文翻译(菜鸟必知)

    这篇文章主要介绍了Linux常见英文报错中文翻译,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  • Android编程实现wifi扫描及连接的方法

    这篇文章主要介绍了Android编程实现wifi扫描及连接的方法,涉及Android网络操作扫描、查找、连接、线程等相关操作技巧,需要的朋友可以参考下