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