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) {
  // 你的代码
});