1.最傳統方法 for迴圈

 var arr = ["first","second","third","fourth",3,5,8];
 for(var i = 0; i < arr.length;i++){
        console.log(arr[i]);
    }
    //輸出：
     first
     second
     third
     fourth
     3
     5
     8

for… in

var arr = ["first","second",'third' ,"fourth",3,5,8];
for(var i in arr){
     console.log(arr[i] +'/' + i);
 }
 //輸出結果為：
     first/0
     second/1
     third/2
     fourth/3
     3/4
     5/5
     8/6
 

for…of

 var arr = ["first","second",'third' ,"fourth",3,5,8];
 for(var item of arr){
     console.log(item);
 }
 //輸出結果：
     first
     second
     third
     fourth
     3
     5
     8

雖然for… in 、 for… of 都能夠變歷數組，但是兩者還是有很大區別的，先說結論：

• 兩者的主要區別在於他們的迭代方式 
  • 推薦在迴圈物件屬性的時候，使用for in，在遍歷陣列的時候推薦使用for of
  • for…in 迴圈出來的是key, for…of迴圈出來的是value
  • for…in 是ES5 標準，for …of 是ES6標準，相容性可能存在些問題，請注意使用
  • for…of 不能遍歷普通的物件，需要和Object.keys() 搭配使用

var arr = ["first","second",'third' ,"fourth",3,5,8];
    //給陣列新增新屬性
    arr.name = 'zhangsan';
    for(var item of arr){
        console.log(item);
    }
    //輸出：
        first 
        second
        third
        fourth
        3
        5
        8
    console.log('--------------分隔符----------------');
    for(var item in arr){
        console.log(arr[item] + '/' + item);
    }
    //輸出：
     first/0
     second/1
     third/2
     fourth/3
     3/4
     5/5
     8/6 
     zhangsan/name
 

從上述程式碼可知：for...in 迴圈除了遍歷陣列元素外，還會遍歷自定義屬性，for...of只可以迴圈可迭代的可迭代屬性，不可迭代屬性在迴圈中被忽略了

2.foreach方法：被傳遞給foreach的函式會在陣列的每個元素上執行一次，元素作為引數傳遞給該函式

    var arr = ["first","second","third","fourth",3,5,8];
    //element 表示arr的單元項，index 表示arr單元項對應的索引值
    arr.forEach(function(element,index){
        console.log(element + '/' + index);

    })
    //輸出結果：
      first/0
      second/1
      third/2
      fourth/3
      3/4
      5/5
      8/6

注意：未賦值的值是不會在foreach迴圈迭代的，但是手動賦值為undefined的元素是會被列出的

 var arr1 = ["first","second", ,"fourth",3,5,8];
 arr1.forEach(function(element,index){
     console.log(element + '/' + index);

  })
  //輸出結果
     first/0
     second/1
     fourth/3
     3/4
     5/5
     8/6

3.map 遍歷陣列，並通過callback對陣列元素進行操作，並將所有操作結果放入陣列中並返回該陣列

 var arr = ["first","second",'third' ,"fourth"];
 var arr2 = arr.map(function(item){
    return item.toUpperCase();
 })
 console.log(arr2);
 //輸出：
 [FIRST,SECOND,THIRD, FOURTH]

4.filter( )返回一個包含所有在回撥函式上返回為true的元素新陣列，回撥函式在此擔任的是過濾器的角色，當元素符和條件，過濾器就返回true,而filter則會返回所有符合過濾條件的元素

var arr = ["first","second",'third' ,"fourth",3,5,8];
    var arr3 = arr.filter(function(item){
        if(typeof item == 'number'){
            return item;
        }
    })
    console.log(arr3);
    //輸出結果： 
    [3,5,8]         

5. every() 當陣列中的每一個元素在callback上被返回true時就返回true(注意：要求每一個單元項都返回true時才為true)

every()與filter()的區別是：後者會返回所有符合過濾條件的元素；前者會判斷是不是陣列中的所有元素都符合條件，並且返回的是布林值

var arr = ["first","second",'third' ,"fourth",3,5,8];
var bol = arr.every(function(element){
    if(typeof element == 'string'){
        return element;
    }
 })
 console.log(bol); //false

6.some()只要陣列中有一項在callback上就返回true

every()與some()的區別是：前者要求所有元素都符合條件才返回true,後者要求只要有符合條件的就返回true

var arr = ["first","second",'third' ,"fourth",3,5,8];
    var bol = arr.some(function(element){
        if(typeof element == 'string'){
            return element;
        }
    })
    console.log(bol); //true