JavaScript數組的循環和叠代

循環

for循環

普通版for循環

var arr = ["a","b","c","d"];

for (let i = 0; i < arr.length; i++){
      console.log(arr[i]);    .//a b c d
}

優化版for循環

var arr = ["a","b","c","d"];

for (let i = 0; len =  arr.length;i < len;  i++){
      console.log(arr[i]);    .//a b c d
}

for in 循環

var arr = ["
 
a","b","c","d"];

for (let i in arr ){
      console.log(arr[i]);    .//a b c d
}

for of 循環

var arr = ["a","b","c","d"];

for (let item of arr){
      console.log(item);    .//a b c d
}

說明

1. for-in 是遍歷集合對象的鍵名， for-of 是直接遍歷集合對象的鍵值。
2. for-of 的遍歷方式性能要高於 for-in ，但仍比不不上普通的 for 循環。
3. for-of 不僅支持數組的遍歷，還支持大多數類數組對象。同時也支持 ES6 裏新增的 Map 和 Set 對象

數組叠代

forEach()

描述：按順序讓數組中每一項依次執行某種相同的操作。

var arr = [10, 11, 12,13, 14];

arr.forEach(function(item, index){
      console.log( item);           //10 11 12 13 14 
      console.log( index);         //0 1 2 3 4    
})    

說明：

1. 數組自帶的 forEach 循環，使用頻率較高，但實際上性能比普通 for 循環弱。

forEach 不能使用 continue 和 break 語句句中斷循環，也不能使用 return 語句句返回到外層函 數。

map()

描述：按順序讓數組中每一項依次執行某種相同的操作，然後返回一個新數組

var arr = [10, 11, 12,13, 14];

var newArr = arr.map(function(item, index){
      return item * 2; 
})    
console.log( newArr);           //[20, 22, 24, 26,28]

filter()

描述：按順序讓數組中每一項依次執行某種相同的操作，然後篩選出符合條件的元素，組成新數組並返回。

var arr = [10, 11, 12,13, 14];

var newArr = arr.filter(function(item, index){
      return item % 2 == 0; 
})    
console.log( newArr);           //[10, 12, 14]

feduce()

描述：按順序讓數組中的前項和後項做某種計算，並累計返回最終值。

var arr = [10, 11, 12,13, 14];

var result = arr.reduce(function(prev, next){
      return prev + next; 
})    
console.log( result);           //  60

every()

描述：按順序讓數組中每一項依次執行某種相同的操作，用來檢測數組中每一項是否都符合條件。

var arr = [10, 11, 12,13, 14];

var result = arr.every(function(item, index){
      return item % 2 == 0; 
})    
console.log( result);           //  false

說明：檢測的元素中，如果全部都滿足條件，返回 true ，只要有一項不滿足條件，則返回 false 。即 一假必假。

some()

描述：按順序讓數組中每一項依次執行某種相同的操作，用來檢測數組中某一項是否都符合條件。

var arr = [10, 11, 12,13, 14];

var result = arr.some(function(item, index){
      return item % 2 == 0; 
})    
console.log( result);           //  true

說明：檢測的元素中，只要有一項符合條件，就返回結果 true ，如果全部都不滿足條件，則返回結 果 false 。即一真必真。

JavaScript數組的循環和叠代