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