JavaScript中遍历数组和对象的方法

Stella981
• 阅读 388

js数组遍历和对象遍历

针对js各种遍历作一个总结分析,从类型用处,分析数组和对象各种遍历使用场景,优缺点等

JS数组遍历:

1,普通for循环,经常用的数组遍历

var arr = [1,2,0,3,9,10,20,30];
 for ( var i = 0; i <arr.length; i++){
    console.log(arr[i]);
}

2,优化版for循环:使用变量,将长度缓存起来,避免重复获取长度,数组不多的时候和普通for循环一样,数组很大时优化效果明显

var arr=[1,2,3,4,5,10,20,30];
    for(var i=0,len=arr.length;i<len;i++){
    console.log(arr[i]);

    }

3, 使用for in方法 进行遍历数组

  var arr = [1,2,3,10,15];
    for(var index in arr){
       // console.log(index);
        console.log(index,arr[index]);   }//所以数组的遍历中千万不要用for in,我们一般对对象的遍历使用。同时上面的i变量是string,并不是number

4, 使用for of 方法进行遍历数组,常用for of  性能比较好

var arr=[1,2,6,5,8];for(var value of arr){

//console.log(value);//打印出来是值
        console.log(arr); //打出来是一个数组
    }

5, 使用forEach方法 ES5推出来的 数组自带循环,主要功能遍历数组,性能不好

   var arr=[1,2,6,5,8];
      var forEach=  arr.forEach(function(value,index){ // 第一参数是值,第二个参数是索引
            console.log('forEach数组:'+index+"--"+value);
        });    console.log(forEach); // undefined// forEach循环的缺点就是,你不能使用break语句中断循环,也不能使用retrun返回到外层函数

6, 使用map方法遍历数组,和forEach使用方式以及语法一样,但是性能比forEach好很多,推荐使用

 var arr=[1,2,6,5,8]; var arr=[1,2,6,5,8];var dd= arr.map(function(value,index){// 第一参数是值,第二个参数是索引

      console.log('map数组:'+index+"--"+value);      retrun value*2; });console.log(dd); 注意:map遍历数组方式支持retrun,并且返回一个新的数组。

JS对象遍历:

1.for in 来遍历对象

  var object={
             name:"张三",
             age:18,
             sex:"男",
             sing:function(){
                 console.log(this.name+":"+"八九不离十");
             }
         };
         for(var key in object ){
                console.log(key); //打印出来是属性名字
                console.log(object);// 打印出来是对象
            //console.log(key,object.sing());
        }

           

 jQuery遍历数组和对象:

1.each遍历数组

 var arr=["a","b","c","d","e"];
             $.each(arr,function(key,item){
             console.log(item[0]);//是值
            console.log(key);//是索引
             console.log("arr:"+key+"--"+item);
        });

2.each遍历对象

var obj = { one:1, two:2, three:3, four:4};
        $.each(obj,function(key,value){
            console.log("obj:"+key+"--"+value);
        });//结果:

    obj:one--1
obj:two--2
obj:three--3
obj:four--4

点赞
收藏
评论区
推荐文章
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
技术小男生 技术小男生
5个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
刚刚好 刚刚好
5个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
翼
2年前
js 数组 转为树形结构
需要转换为树形的数组vardata{"orderById":null,"platformCommissionProportion":1,"name":"添加剂","pid":13,"id":26
小森森 小森森
5个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
Karen110 Karen110
1年前
盘点JavaScript中数组遍历的全部方式(上篇)
前言JavaScript想必大家都不陌生了,其中的字符串和数组大家经常都会用到,今天就让我们来说说这里面的数组对象的遍历吧,因为遍历经常使用的缘故,所以小编带着大家来解锁遍历的所有方法,以便大家能够更深入的了解数组遍历,并在实际项目中灵活运用。一、Entries这个是ES6中提供的用于遍历数组的方法,它会返回一个遍历器对象,Entries是对键值对的遍历。
晴空闲云 晴空闲云
5个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
5个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
helloworld_28799839 helloworld_28799839
5个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue