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区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript中三种for循环语句的使用总结（for、for...in、for...of）

    前言 每个接触JS的开发人员都不可避免的与for循环打交道,毕竟这是遍历必不可少的工具之一.JavaScript 中的 for 循环语句相信大家都已经快用厌了,现在有好多文章都在讲怎么减少代码中的 for 循环语句,但是,你又不得不承认它们真的很有用.今天,我来总结一下前端 JavaScript 中三种 for 循环语句. for 这大概是应用最广的循环语句了吧,简单实用,且大多数时候性能还是在线的,唯一的缺点大概就是太普通,没有特色,导致很多人现在不愿用它. const array = [4,

  • js遍历详解(forEach, map, for, for...in, for...of)

    forEach es5出来的方法,这是我在react中用的最多的遍历方法之一,用法如下: models.forEach(model => app.model(model)); dva里面经常这么写. 写法很简单,经常用于通过这个数组内的数据创造新的结构,但是forEach的问题在于它不能跳出循环. map 也是用的最多的方法之一,用法如下 {data.map(d => ( <div className="balance-row"> <div classNa

  • javascript数组遍历for与for in区别详解

    js中遍历数组的有两种方式 复制代码 代码如下: var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){     alert(array[i]) } //foreach循环 for(var i in array){     alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key

  • javascript 循环语句 while、do-while、for-in、for用法区别

    前两个唯一的差别就是循环和判断的顺序不同,do-while比while多循环一次,我就不举例了. for循环相信大家也熟的不能再熟了,我们就看for-in这一句. 这个其实是针对数组的,js中数组的初始化也挺奇特的比如我们在script结点里写:(另外注意下数组的初始化,用的是中括号) "); var a=[3,4,5,7]; for(var test in a){ document.write(test+": "+a[test]+""); } -->

  • 详谈js中标准for循环与foreach(for in)的区别

    js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){ alert(array[i]) } //foreach循环 for(var i in array){ alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为

  • JS数组的遍历方式for循环与for...in

    JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } 输出的结果:fitst,second,third 第一种:用for...in 这种遍历的方式,例如: var arr = new Array(&

  • 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(va

  • JS中dom0级事件和dom2级事件的区别介绍

    dom0级事件 <a href="#" id="hash" onclick="fn();fn();"> <button type="button">返回上面进行开通</button> </a> var btn=$('#hash').get(); btn.onclick=function(){ alert(''); }; btn.onclick=function(){ alert(

  • js中apply和Math.max()函数的问题及区别介绍

    下面给大家介绍js中apply和Math.max()函数的问题,具体内容如下所示: var arr=[1,3,6,3,7,9,2]; console.log(Math.max.apply(null,arr)); 一直搞不懂为什么这样可以算出一个数组的最大值?一直想不明白,请js高手指教一下. 答案1 Function.apply()是JS的一个OOP特性,一般用来模拟继承和扩展this的用途,对于上面这段代码,可以这样去理解: XXX.apply是一个调用函数的方法,其参数为:apply(Fun

  • 浅谈js中Object.create()与new的具体实现与区别

    浅谈js中Object.create()与new的具体实现与区别

    目录 Object.create与new区别 Object.create()原理 new原理 继承 比较组合继承与寄生组合继承 组合继承 寄生组合继承 Object.create与new区别 function A() { this.name = 'abc'; } A.prototype.a = 'a'; A.prototype.showName = function () { return this.name; } var a1 = new A(); var a2 = Object.create

  • JS中的算法与数据结构之二叉查找树（Binary Sort Tree）实例详解

    本文实例讲述了JS中的算法与数据结构之二叉查找树(Binary Sort Tree).分享给大家供大家参考,具体如下: 二叉查找树(Binary Sort Tree) 我们之前所学到的列表,栈等都是一种线性的数据结构,今天我们将学习计算机中经常用到的一种非线性的数据结构--树(Tree),由于其存储的所有元素之间具有明显的层次特性,因此常被用来存储具有层级关系的数据,比如文件系统中的文件:也会被用来存储有序列表等. 在树结构中,每一个结点只有一个前件,称为父结点,没有前件的结点只有一个,称为树的

  • js中apply()和call()的区别与用法实例分析

    js中apply()和call()的区别与用法实例分析

    本文实例讲述了js中apply()和call()的区别与用法.分享给大家供大家参考,具体如下: 每个函数都包括两个非继承而来的方法:apply()和call().两者用途都是在特定的作用域中调用函数,等于重新设置了函数体内this对象的值. 两者区别仅在于接收参数方式不同,apply()第一个参数是调用apply的函数运行的作用域,的第二个参数可以是Array的实例(数组),也可以是arguments对象,call()第一个参数是this的值没有变化,而其余参数都直接传递给函数(也就是逐个列举出

  • 详解Node.js中path模块的resolve()和join()方法的区别

    关于Node.js中path模块的resolve()和join()方法的比较,对照着总结看例子差不多以后在写模块的时候思路就能很清晰了 resolve 作用:path.resolve() 该方法将一些的 路径/路径段 解析为绝对路径. 语法:path.resolve([...paths]) 说明: ...paths <string> 一个路径或路径片段的序列 如果没有传入 path 片段,或者path 片段长度为零(空字符),则 path.resolve() 会返回当前工作目录的绝对路径(相当

  • JS中类的静态方法，静态变量，实例方法，实例变量区别与用法实例分析

    本文实例讲述了JS中类的静态方法,静态变量,实例方法,实例变量区别与用法.分享给大家供大家参考,具体如下: 1.类的静态方法 先来段代码之后分析 // JS类静态函数 function BaseClass() { } // 类添加add函数 BaseClass.add = function() { console.log("BaseClass add()方法被调用"); }; // 类方法(类的静态函数)直接调用 // 类名.类方法名 BaseClass.add(); //BaseCl

  • JavaScript中callee和caller的区别与用法实例分析

    JavaScript中callee和caller的区别与用法实例分析

    本文实例讲述了JavaScript中callee和caller的区别与用法.分享给大家供大家参考,具体如下: 1.callee 在函数的内部,有两个特殊的对象:arguments和this.其中arguments是一个类似数组的对象,包含着传入函数的所有参数. 虽然arguments的主要用途是保存函数参数,但这个对象有一个属性--callee,该属性是一个指针,指向拥有这个arguments对象的函数 所以callee的作用就是来指向当前对象 看一个阶层函数的例子就会明白他的用途了: /* *

  • Mysql数据库中数据表的优化、外键与三范式用法实例分析

    Mysql数据库中数据表的优化、外键与三范式用法实例分析

    本文实例讲述了Mysql数据库中数据表的优化.外键与三范式用法.分享给大家供大家参考,具体如下: 数据表优化 将商品信息表进行优化 1.创建商品种类表: create table if not exists goods_cates( id int unsigned primary key auto_increment, name varchar(40) not null ); 2.将商品种类写入商品种类表中: 注意:插入另一个表的查询结果不需要加values insert into goods_

随机推荐