js数组遍历和对象遍历
针对js各种遍历作一个总结分析,从类型用处,分析数组和对象各种遍历使用场景,优缺点等
JS数组遍历:
1,普通for循环,经常用的数组遍历
1var arr = [1,2,0,3,9,10,20,30]; 2 for ( var i = 0; i <arr.length; i++){ 3 console.log(arr[i]); 4}
2,优化版for循环:使用变量,将长度缓存起来,避免重复获取长度,数组不多的时候和普通for循环一样,数组很大时优化效果明显
1var arr=[1,2,3,4,5,10,20,30]; 2 for(var i=0,len=arr.length;i<len;i++){ 3 console.log(arr[i]); 4 5 }
3, 使用for in方法 进行遍历数组
1 var arr = [1,2,3,10,15]; 2 for(var index in arr){ 3 // console.log(index); 4 console.log(index,arr[index]); }//所以数组的遍历中千万不要用for in,我们一般对对象的遍历使用。同时上面的i变量是string,并不是number
4, 使用for of 方法进行遍历数组,常用for of 性能比较好
1var arr=[1,2,6,5,8];for(var value of arr){ 2 3//console.log(value);//打印出来是值 4 console.log(arr); //打出来是一个数组 5 }
5, 使用forEach方法 ES5推出来的 数组自带循环,主要功能遍历数组,性能不好
1 var arr=[1,2,6,5,8]; 2 var forEach= arr.forEach(function(value,index){ // 第一参数是值,第二个参数是索引 3 console.log('forEach数组:'+index+"--"+value); 4 }); console.log(forEach); // undefined// forEach循环的缺点就是,你不能使用break语句中断循环,也不能使用retrun返回到外层函数
6, 使用map方法遍历数组,和forEach使用方式以及语法一样,但是性能比forEach好很多,推荐使用
1 var arr=[1,2,6,5,8]; var arr=[1,2,6,5,8];var dd= arr.map(function(value,index){// 第一参数是值,第二个参数是索引 2 3 console.log('map数组:'+index+"--"+value); retrun value*2; });console.log(dd); 注意:map遍历数组方式支持retrun,并且返回一个新的数组。
JS对象遍历:
1.for in 来遍历对象
1 var object={ 2 name:"张三", 3 age:18, 4 sex:"男", 5 sing:function(){ 6 console.log(this.name+":"+"八九不离十"); 7 } 8 }; 9 for(var key in object ){ 10 console.log(key); //打印出来是属性名字 11 console.log(object);// 打印出来是对象 12 //console.log(key,object.sing()); 13 } 14 15
jQuery遍历数组和对象:
1.each遍历数组
1 var arr=["a","b","c","d","e"]; 2 $.each(arr,function(key,item){ 3 console.log(item[0]);//是值 4 console.log(key);//是索引 5 console.log("arr:"+key+"--"+item); 6 });
2.each遍历对象
1var obj = { one:1, two:2, three:3, four:4}; 2 $.each(obj,function(key,value){ 3 console.log("obj:"+key+"--"+value); 4 });//结果:
obj:one--1
obj:two--2
obj:three--3
obj:four--4