JS中循環遍歷數組的幾種常用方式總結

第一種：for循環，也是最常見的

最簡單的一種，也是使用頻率最高的一種，雖然性能不弱，但仍有優化空間

const arr = [11, 22, 33, 44, 55, 66, 77, 88];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

打印結果：

第二種：優化版for循環

const arr = [11, 22, 33, 44, 55, 66, 77, 88];
for (let i = 0; len < arr.length; i < len; i++) {
      console.log(arr[i]);
    }

簡要說明：使用臨時變量，將長度緩存起來，避免重複計算數組長度，當數組較大時優化效果纔會比較明顯
這種方法基本上是所有循環遍歷方法中性能最高的一種

第三種：forEach（）

對於forEach方法除非使用try/catch，否則無法中途停止循環，break或者return都無法使循環中途停止。而for…of循環可以與break，continue和return配合使用，中途停止循環：

1.）forEach() 遍歷普通數組

const arr = [11, 22, 33, 44, 55, 66, 77, 88];
arr.forEach(item => {
      //forEach循環
      console.log(item);
    });

打印結果：

2.）forEach() 遍歷對象類型數組

const arrObj = [
      {
        id: 1,
        name: "張三"
      },
      {
        id: 2,
        name: "李四"
      },
      {
        id: 3,
        name: "王五"
      }
    ];
arrObj.forEach(item => {
   console.log(item.id + "-------" + item.name);
});

打印結果：

簡要說明: 數組自帶的foreach循環，使用頻率較高，實際上性能比普通for循環弱

第四種：map（）

定義和用法

1. map即是 “映射”的意思 ，原數組被“映射”成對應新數組
2. map() 方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。
3. map() 不會改變原始數組。
4. map() 不會對空數組進行檢測。
5. map支持return

 const arr = [11, 22, 33, 44, 55, 66, 77, 88];
 var newArr = arr.map((value, index) => {
      console.log(value + "----" + index);
      return value * 10;
    });
 console.log(newArr);

打印結果：

簡要說明: 這種方式也是用的比較廣泛的，雖然用起來比較優雅，但實際效率還比不上foreach

forEach（）和map（）區別：

1. forEach()和map()方法通常用於遍歷Array元素
2. forEach：返回undefined；用來遍歷數組中的每一項，不影響原數組
3. map：返回一個包含已轉換元素的新數組；支持return，相當於與原數組克隆了一份，把克隆的每項改變了，也不影響原數組

第五種：filter遍歷

定義和用法

filter用於對數組進行過濾。
filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。
filter() 不會對空數組進行檢測；不會改變原始數組

語法

array.filter(function(currentValue,index,arr), thisValue)

let arr = [56, 15, 48, 3, 7];

let newArr = arr.filter(function (value, index, array) {
    return value % 2 === 0;
});

console.log(newArr)
// [56, 48]

第六種：for…of 方法

作爲ES6新增的循環方法，個人覺得相當好用，而且方便。這個方法避開了for-in循環的所有缺陷。而且，它可以正確響應break、continue和return語句。

//循環數組
let arr = ['123','qwewq','sfds'];
for(let item of arr){
    console.log(item);    //item指的的就是數組每一項的值。不是索引。
}
//輸出
//'123'
//'qwewq'
//'sfds'

for-of循環不僅支持數組，還支持大多數類數組對象，例如DOM NodeList對象。但是for of也有一個致命傷，就像例子看到的，沒有索引。對，這是優點也是缺點。遍歷數組對象，直接就是item.屬性(或者item[屬性]),而不用像for循環那樣arr[index].屬性(arrindex)。但是你有的時候真的就得用到index。不好意思，只能把數組轉成Map()。但我覺得真的需要用到index，還是換成forEach吧。

簡要說明: 這種方式是es6裏面用到的，性能要好於forin，但仍然比不上普通for循環

第七種：for…in 方法

for in循環是用來遍歷對象的。要知道JavaScript對象的所有屬性都是字符串，不過屬性對應的值可以是任意數據類型。（注意：遍歷時不僅能讀取對象自身上面的成員屬性，也能遍歷出對象的原型屬性）

語法

let obj = {a:1, b:2, c:3};
for (let prop in obj) {    //prop指對象的屬性名
console.log(prop, obj[prop]);
}
// 輸出:
// a,1
// b,2
// c,3

for in同樣可以用來循環數組,但是不推薦這麼做。由於Array也是對象，而它的每個元素的索引被視爲對象的屬性，因此，for in循環可以直接循環出Array的索引，但得到的是String而不是Number，所以一旦你想用這個index去進行計算，就會出錯。而且因爲會遍歷原型屬性，所以可能得出的結果不會是你想要的(具體細節不多說，需要了解的自己查詢，反正很多坑)。雖然可以用hasOwnProperty()方法避免這個缺陷，但是何必呢，循環方法那麼多，換一個就是了

for (var index in myArray) { // 不推薦這樣
console.log(myArray[index]);
}

爲什麼用for … in?

簡要說明: 這個循環很多人愛用，但實際上，經分析測試，在衆多的循環遍歷方式中
它的效率是最低的

關於for …of和for …in區別
https://blog.csdn.net/weixin_42695446/article/details/84531600

第八種：find方法

• 遍歷數組，找到第一個符合條件的項，並返回該項；不會繼續遍歷數組；否則返回undefined
• 不會改變數組

[1,4,-5,10].find((n) => n < 0 )
//-5

上面代碼找出數組中第一個小於0的成員

[1,5,10,15].find(function(value,index,arr){
 return value > 9
})
//10

上面代碼中，find方法的回調函數可以接受三個參數，依次爲當前的值、當前的位置和原數組

第九種：findIndex方法

• 遍歷數組找到第一個符合條件的項，並返回該項的索引值；不會繼續遍歷數組；否則返回-1。
• 不會改變數組

[1,5,10,15].findIndex(function(value,index,arr){
 return value > 9
})
//2

findIndex() 當中的回調函數也是接收三個參數，與find() 相同。

第十種：Array.some() 方法

1）如果有一個元素滿足條件，則表達式返回true，剩餘的元素不會再執行檢測。
2）如果沒有滿足條件的元素，則返回false。
3）返回值是布爾值

注意：

1) some() 不會對空數組進行檢測。
2) some() 不會改變原始數組。

 var ages = [3, 18, 17, 16]
 var checkoutVal = function checkout (age) {
   console.log(age >= 18) // false true  有一個滿足條件的會停止檢測剩餘的元素
   return age >= 18
 }
 console.log(ages.some(checkoutVal)) // true

let someArr = [2,3,4];
let someResult = someArr.some((item, index)=>{
  return item > 3
});
console.log(someResult);
// 結果爲: true

第十一種：Array.every() 方法 （所有的，每一個）

1）如果數組中有一個元素不滿足，則整個表達式返回false；且剩餘的元素不會再進行檢測
2）如果所有元素都滿足條件，則返回true。
3）返回值是布爾值

注意：

1) some() 不會對空數組進行檢測。
2) some() 不會改變原始數組。

  var ages = [3, 18, 17, 16]
  const fn = (currentValue) => currentValue < 40
  console.log(ages.every(fn)) // true  值全都符合函數條件

let everyArr = [2,3,4];
let everyResult = everyArr.every((item, index)=>{
  return item > 0
});
console.log(everyResult);
// 結果爲: true

Array.some() 和Array.every() 的區別？？？

第十二種：reduce() 方法

1）接收一個函數作爲累加器（accumulator），數組中的每個值（從左到右）開始縮減，最終爲一個值。
2）第二個參數作爲第一次調用的a的值

// reducer
let reduceArr = [0,1,2,3,4]
let reduceResult = reduceArr.reduce((a, b)=>{
  return a + b;
});
console.log(reduceResult);
// 結果: 10

上述列舉了幾種方式都有一一做過對比分析，基本上可以得出的結論是:
普通for循環纔是最優雅的，優化後的for循環最快

注意：
數組方法無法中途停止循環，所以都不可以使用break和continue；
for循環之類的不可以return，但是能正常使用break和continue；

 

https://blog.csdn.net/weixin_45811256/article/details/115719416

 https://blog.csdn.net/ycj1091001986/article/details/123053827