JS循環數組詳解

一、for循環遍曆數組

JS中使用for循環結構可以很方便地遍曆數組。for循環語句需要三個參數，第一個是變量聲明（一般用i），第二個是停止循環的條件，第三個是每次循環的步進值。

var arr = ['apple','banana','orange','grape'];
for (var i = 0; i < arr.length; i++){
   console.log(arr[i]);
}

上述代碼中，變量i的初值設置為0，每次循環加1，最終達到停止循環的條件——i < arr.length，即i小於數組長度。在每次循環中，使用數組的下標訪問數組元素。

二、foreach()方法遍曆數組

JS中，數組對象提供了一個forEach()方法，該方法可以循環遍曆數組中的每一個元素。但是需要注意的是，該方法不能直接使用break或者continue控制循環。

var arr = ['apple','banana','orange','grape'];
arr.forEach(function(item,index,array){
  console.log(item);
});

上述代碼中，forEach()方法傳遞了三個參數：當前元素的值，當前元素的索引，循環遍歷的整個數組。通過回調函數，將每個元素的值輸出。可以看出，forEach()方法的循環過程比for循環簡便，但在循環控制方面比較受限制。

三、map()方法遍曆數組

JS中，數組對象提供了一個map()方法，可以遍曆數組並返回一個新的數組，新數組的長度和原數組一致，而每個元素的值由原數組的元素經過回調函數計算得出。

var arr = [1,2,3];
var newArr = arr.map(function(item,index,array){
  return item * 2;
});
console.log(newArr); //輸出[2,4,6]

上述代碼中，原數組為[1,2,3]，使用map()方法返回新數組[2,4,6]，其中每個元素都是原數組的元素乘以2。

四、filter()方法遍曆數組

JS中，數組對象提供了一個filter()方法，可以遍曆數組並根據回調函數的返回值，將符合條件的元素組成新的數組返回。

var arr = [1,2,3,4,5];
var newArr = arr.filter(function(item,index,array){
  return item % 2 === 0;
});
console.log(newArr); //輸出[2,4]

上述代碼中，原數組為[1,2,3,4,5]，使用filter()方法返回新數組[2,4]，其中每個元素都是原數組中的偶數。

五、reduce()方法遍曆數組

JS中，數組對象提供了一個reduce()方法，可以使用回調函數對數組元素進行計算，並返回一個計算結果。

var arr = [1,2,3];
var sum = arr.reduce(function(pre,cur,index,array){
  return pre + cur;
});
console.log(sum); //輸出6

上述代碼中，原數組為[1,2,3]，使用reduce()方法進行元素相加計算，最終返回結果為6。

六、some()和every()方法遍曆數組

JS中，數組對象提供了兩個方法some()和every()，可以遍曆數組並根據回調函數的返回值，判斷數組中是否存在符合條件的元素或者數組中的每個元素是否都符合條件。

var arr = [1,2,3,4,5];
var isExist = arr.some(function(item,index,array){
  return item % 2 === 0;
});
var isAllEven = arr.every(function(item,index,array){
  return item % 2 === 0;
});
console.log(isExist); //輸出true
console.log(isAllEven); //輸出false

上述代碼中，arr.some()方法返回true，表示存在數組的元素為偶數，arr.every()方法返回false，表示數組中不是所有的元素都為偶數。