Javascript具有用於遍歷陣列和類似陣列的物件的強大語義。經過自我學習研究，本文將從兩種型別來解說：陣列、類陣列的東西（例如arguments物件，其他可迭代物件（ES2015 +），DOM集合等）。

原生陣列

ES5有三個選項 ForEach、For、For-In

ES2015+之後添加了兩個選項for-of（隱式使用迭代器）、明確使用迭代器。

1.ForEach

var a = ["a", "b", "c"];a.forEach(function(entry) {    console.log(entry);});

forEach 這樣做的好處是您不必在包含範圍中宣告索引和值變數，因為它們是作為迭代函式的引數提供的，因此可以很好地將作用域限定為該迭代。

forEach它是“遍歷所有物件”功能，但是ES5定義了其他幾個有用的“遍歷陣列並做事”功能，包括：

every（在第一次返回回撥false或出現錯誤時停止迴圈）some（在第一次返回回撥時停止迴圈true或發生錯誤）filter（建立一個新陣列包含filter函式返回的元素）map （根據回撥返回的值建立一個新陣列）reduce （透過重複呼叫回撥並傳入先前的值來建立值）reduceRight（如reduce，按降序）

2.簡單的for迴圈

var index;var a = ["a", "b", "c"];for (index = 0; index < a.length; ++index) {    console.log(a[index]);}

在ES2015及更高版本中，可以使索引和值變數在for迴圈本地

let a = ["a", "b", "c"];for (let index = 0; index < a.length; ++index) {    let value = a[index];    console.log(index, value);}

3.for-in

for-in遍歷物件的可列舉屬性，而不是陣列的索引。注意：在ES2015（ES6）中不保證順序（ES2020做到了）

var key;var a = [];a[0] = "a";a[10] = "b";a[10000] = "c";for (key in a) {    if (a.hasOwnProperty(key)  &&                 /^0$|^[1-9]\d*$/.test(key) &&             key <= 4294967294                        ) {        console.log(a[key]);    }}

需要注意：

遍歷的物件具有自身的屬性，而不是原型繼承來的屬性key是十進位制數字key <= 2 ^ 32-2（即4,294,967,294）

4.for-of（隱式使用迭代器）(ES2015+)

const a = ["a", "b", "c"];for (const val of a) {    console.log(val);}

原理上，它是從陣列中獲取一個迭代器並迴圈遍歷該陣列。因為他使用了物件/陣列的迭代器，所以不存在has的問題。與for-inES5不同，訪問條目的順序是其索引的數字順序

5.顯式使用迭代器(ES2015+)

const a = ["a", "b", "c"];const it = a.values();let entry;while (!(entry = it.next()).done) {    console.log(entry.value);}

支援三個返回迭代器的函式：keys()、values()、entries（）

類陣列物件

除了真正的陣列之外，還有一些類陣列物件，它們具有一個length或多個具有數字名稱的屬性，如NodeList例項，arguments物件等。我們如何遍歷它們？

除了原生陣列以上5種方法之外。

6.使用slice陣列的方法

我們可以使用slice陣列的方法，如下所示：

 var trueArray = Array.prototype.slice.call(arrayLikeObject);

我們要將NodeList轉換為真實陣列，則可以執行以下操作：

 var divs = Array.prototype.slice.call(document.querySelectorAll("div"));

7.使用擴充套件Spread語法（...）

可以使用ES2015的擴充套件語法，像一樣for-of，它使用物件提供的迭代器

 var trueArray = [...iterableObject];

我們想將NodeList轉換為真正的陣列，使用擴充套件語法，這將變得非常容易：

 var divs = [...document.querySelectorAll("div")];

8.使用 Array.from

Array.from 由類似陣列的物件建立陣列，如：

 var divs = Array.from(document.querySelectorAll("div"));

您想獲取具有給定類的元素的標籤名稱的陣列，則可以使用函式：

 // 箭頭函式 var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName); // 標準函式 var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {     return element.tagName; });

補充

如果您使用的是jQuery庫，則可以使用jQuery.each：

$.each(yourArray, function(index, value) {  // 你的程式碼});