遍曆數組的常用方法

1.最傳統方法 for迴圈

 1  var arr = ["first","second","third","fourth",3,5,8];
 2  for(var i = 0; i < arr.length;i++){
 3         console.log(arr[i]);
 4     }
 5     //輸出：
 6      first
 7      second
 8      third
 9      fourth
10      3
11      5
12      8

for… in

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

for…of

 1  var arr = ["first","second",'third' ,"fourth",3,5,8];
 2  for(var item of arr){
 3      console.log(item);
 4  }
 5  //輸出結果：
 6      first
 7      second
 8      third
 9      fourth
10      3
11      5
12      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() 搭配使用

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

 1     var arr = ["first","second","third","fourth",3,5,8];
 2     //element 表示arr的單元項，index 表示arr單元項對應的索引值
 3     arr.forEach(function(element,index){
 4         console.log(element + '/' + index);
 5 
 6     })
 7     //輸出結果：
 8       first/0
 9       second/1
10       third/2
11       fourth/3
12       3/4
13       5/5
14       8/6

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

 1  var arr1 = ["first","second", ,"fourth",3,5,8];
 2  arr1.forEach(function(element,index){
 3      console.log(element + '/' + index);
 4 
 5   })
 6   //輸出結果
 7      first/0
 8      second/1
 9      fourth/3
10      3/4
11      5/5
12      8/6

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

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

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

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

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

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

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

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

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

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

7.findindex() ES6數組新API,找到符合條件的索引並返回

1 var ages = [3, 10, 18, 20];
2  
3 function checkAdult(age) {
4     return age >= 18;
5 }

function(currentValue, index,arr)

參數currentValue:必需。當前元素

index:可選。當前元素的索引

arr:可選.當前元素所屬的數組對象