JavaScript中遍歷陣列和物件的方法
阿新 • • 發佈:2018-11-23
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+"--"+value);
});
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