TL; DR

• 不要用 for-in 除非你将它与保护措施一起使用，或者至少知道它为什么会咬你。

• 你最好的赌注通常是

  • 一个 for-of 循环（仅限ES2015 +），
  • Array#forEach （spec | MDN）（或其亲属 some 等（仅限ES5 +），
  • 一个简单的老式 for 循环，
  • 要么 for-in 有保障措施。

但是有 地段 更多探索，继续阅读......

JavaScript具有强大的语义，可以循环遍历数组和类似数组的对象。我把答案分成两部分：正版数组的选项，以及只是数组的选项 - 喜欢， 如那个 arguments 对象，其他可迭代对象（ES2015 +），DOM集合等。

我很快就会注意到您可以使用ES2015选项 现在，甚至在ES5引擎上，通过 transpiling ES2015到ES5。搜索“ES2015 transpiling”/“ES6 transpiling”了解更多...

好的，让我们来看看我们的选择：

对于实际数组

你有三个选择 ECMAScript的5 （“ES5”），目前最广泛支持的版本，还有两个版本 2015年的ECMAScript （“ES2015”，“ES6”）：

1. 使用 forEach 和相关（ES5 +）
2. 用一个简单的 for 循环
3. 使用 for-in  正确地
4. 使用 for-of （隐式使用迭代器）（ES2015 +）
5. 明确使用迭代器（ES2015 +）

细节：

1.使用 forEach 和相关的

在任何模糊的现代环境（所以，不是IE8），你可以访问 Array 由ES5添加的功能（直接或使用polyfills），您可以使用 forEach （spec | MDN）：

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

forEach 接受回调函数，并且可选地接受要用作的值 this 调用该回调时（上面没有使用）。为数组中的每个条目调用回调，按顺序跳过稀疏数组中不存在的条目。虽然我上面只使用了一个参数，但回调是用三个来调用的：每个条目的值，该条目的索引，以及对你要迭代的数组的引用（如果你的函数还没有方便的话） ）。

除非您支持IE8等过时的浏览器（截至2016年9月，NetApps的市场份额仅超过4％），您可以愉快地使用 forEach 在没有垫片的通用网页中。如果您确实需要支持过时的浏览器，则填充/填充 forEach 很容易完成（为几个选项搜索“es5 shim”）。

forEach 有一个好处是你不必在包含作用域中声明索引和值变量，因为它们作为参数提供给迭代函数，因此很好地限定了该迭代。

如果您担心为每个数组条目调用函数的运行时成本，请不要这样做; 细节。

另外， forEach 是“循环通过它们”的功能，但ES5定义了其他一些有用的“按照你的方式通过数组并做事”的功能，包括：

• every （第一次回调返回时停止循环 false 或者是虚假的东西）
• some （第一次回调返回时停止循环 true 或者某事真相）
• filter （创建一个新数组，包括过滤函数返回的元素 true 并省略它返回的那些 false）
• map （根据回调返回的值创建一个新数组）
• reduce （通过重复调用回调来构建一个值，传入以前的值;查看详细信息的规范;对于汇总数组的内容和许多其他内容很有用）
• reduceRight （喜欢 reduce，但按降序而不是按升序排列）

2.用一个简单的 for 循环

有时旧的方式是最好的：

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

如果数组的长度在循环期间不会改变，并且它在性能敏感的代码中（不太可能），那么在前面抓取长度的稍微复杂的版本可能是 小 更快一点：

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

和/或向后计数：

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

但是使用现代JavaScript引擎，你很少需要榨取最后一点果汁。

在ES2015及更高版本中，您可以将索引和值变量置于本地 for 循环：

let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
}
//console.log(index); // Would cause "ReferenceError: index is not defined"
//console.log(value); // Would cause "ReferenceError: value is not defined"

当你这样做时，不仅仅是 value 但也 index 为每个循环迭代重新创建，这意味着在循环体中创建的闭包保持对该循环的引用 index （和 value）为特定迭代创建：

let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        alert("Index is: " + index);
    });
}

如果您有五个div，如果单击第一个，则“索引为：0”，如果单击最后一个，则“索引为：4”。这样做 不 如果你使用，工作 var 代替 let。

3.使用 for-in  正确地

你会让别人告诉你使用 for-in但是 那不是什么 for-in 是为了。 for-in 循环通过 对象的可枚举属性，而不是数组的索引。 订单无法保证，甚至在ES2015（ES6）中也没有。 ES2015确实定义了对象属性的顺序（通过 [[OwnPropertyKeys]]， [[Enumerate]]，以及使用它们的东西 Object.getOwnPropertyKeys）， 但它 才不是 定义那个 for-in 将按照该顺序。 （详情请见 这个答案。）

不过，它 能够 有用，特别是对 疏 阵列，如果您使用适当的保障措施：

// `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
    if (a.hasOwnProperty(key)  &&        // These are explained
        /^0$|^[1-9]\d*$/.test(key) &&    // and then hidden
        key <= 4294967294                // away below
        ) {
        console.log(a[key]);
    }
}

请注意两个检查：

1. 对象有它的 拥有 该名称的属性（不是它从原型继承的那个），和

2. 密钥是普通字符串形式的基数为10的数字字符串，其值为<= 2 ^ 32 - 2（即4,294,967,294）。这个数字来自哪里？它是数组索引定义的一部分 在规范中。其他数字（非整数，负数，大于2 ^ 32 - 2的数字）不是数组索引。它的原因是2 ^ 32 - 2 是使得最大指数值低于2 ^ 32 - 1，这是数组的最大值 length 可以有。 （例如，数组的长度适合32位无符号整数。） （道具指向RobG在评论中指出 在我的博客文章中 我之前的测试不太正确。）

对于大多数阵列来说，这只是每次循环迭代的一小部分额外开销，但如果你有一个 疏 数组，它可以是一种更有效的循环方式，因为它只循环实际存在的条目。例如，对于上面的数组，我们总共循环三次（对于键 "0"， "10"，和 "10000" - 记住，他们是字符串），而不是10,001次。

现在，您不希望每次都写这个，所以您可以将它放在您的工具箱中：

function arrayHasOwnIndex(array, prop) {
    return array.hasOwnProperty(prop) && /^0$|^[1-9]\d*$/.test(prop) && prop <= 4294967294; // 2^32 - 2
}

然后我们就像这样使用它：

for (key in a) {
    if (arrayHasOwnIndex(a, key)) {
        console.log(a[key]);
    }
}

或者如果你只对“大多数情况下足够好”的测试感兴趣，你可以使用它，但是当它接近时，它并不完全正确：

for (key in a) {
    // "Good enough" for most cases
    if (String(parseInt(key, 10)) === key && a.hasOwnProperty(key)) {
        console.log(a[key]);
    }
}

4.使用 for-of （隐式使用迭代器）（ES2015 +）

ES2015补充道 迭代器 到JavaScript。使用迭代器的最简单方法是使用新方法 for-of 声明。它看起来像这样：

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

输出：

一个
b
C

在封面下，这得到了 迭代器 从数组中循环遍历它，从中获取值。这没有使用的问题 for-in has，因为它使用由对象（数组）定义的迭代器，并且数组定义它们的迭代器遍历它们 项 （不是他们的财产）。不像 for-in 在ES5中，访问条目的顺序是其索引的数字顺序。

5.明确使用迭代器（ES2015 +）

有时，您可能希望使用迭代器 明确地。你也可以做到这一点，虽然它比笨笨更多 for-of。它看起来像这样：

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

迭代器是与规范中的Iterator定义匹配的对象。它的 next 方法返回一个新的 结果对象 每次你打电话。结果对象有一个属性， done告诉我们它是否已经完成，以及财产 value 使用该迭代的值。 （done 是可选的，如果是的话 false， value 是可选的，如果是的话 undefined。）

的意思 value 取决于迭代器;数组支持（至少）三个返回迭代器的函数：

• values()：这是我上面使用的那个。它返回一个迭代器，每个迭代器 value 是该迭代的数组条目（"a"， "b"，和 "c" 在前面的例子中）。
• keys()：返回每个迭代器 value 是那次迭代的关键（所以我们的 a 以上，那就是 "0"， 然后 "1"， 然后 "2"）。
• entries()：返回每个迭代器 value 是表单中的数组 [key, value] 对于那次迭代。

对于类似数组的对象

除了真正的数组，还有 阵列状 有一个的对象 length 具有数字名称的属性和属性： NodeList 实例， arguments 对象等。我们如何循环其内容？

使用上面的任何数组选项

上面的阵列方法中的至少一些，可能是大多数甚至全部，经常同样适用于类似数组的对象：

1. 使用 forEach 和相关（ES5 +）

   各种功能 Array.prototype 是“故意通用的”，通常可以用于类似数组的对象 Function#call 要么 Function#apply。 （见 警告主机提供的对象 在这个答案的最后，但这是一个罕见的问题。）

   假设你想使用 forEach 在...上 Node的 childNodes 属性。你这样做：

   Array.prototype.forEach.call(node.childNodes, function(child) {
       // Do something with `child`
   });
   

   如果你要做很多事情，你可能想把一个函数引用的副本放到一个变量中以便重用，例如：

   // (This is all presumably in some scoping function)
   var forEach = Array.prototype.forEach;
   
   // Then later...
   forEach.call(node.childNodes, function(child) {
       // Do something with `child`
   });
   

2. 用一个简单的 for 循环

   显然，简单 for loop适用于类似数组的对象。

3. 使用 for-in  正确地

   for-in 使用与数组相同的安全措施也应该使用类似数组的对象;上面＃1上主机提供的对象的警告可能适用。

4. 使用 for-of （隐式使用迭代器）（ES2015 +）

   for-of 将使用对象提供的迭代器（如果有的话）;我们将不得不看到它如何与各种类似数组的对象一起使用，特别是主机提供的对象。例如，规范 NodeList 从 querySelectorAll 已更新以支持迭代。该规范 HTMLCollection 从 getElementsByTagName 不是。

5. 明确使用迭代器（ES2015 +）

   看到＃4，我们必须看看迭代器是如何发挥作用的。

创建一个真正的数组

其他时候，您可能希望将类似数组的对象转换为真正的数组。这样做非常简单：

1. 使用 slice 数组方法

   我们可以使用 slice 数组的方法，与上面提到的其他方法一样，是“故意通用的”，因此可以与类似数组的对象一起使用，如下所示：

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

   所以，例如，如果我们想转换一个 NodeList 进入一个真正的数组，我们可以做到这一点：

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

   见 警告主机提供的对象 下面。特别要注意的是，这将在IE8及更早版本中失败，因为它不允许您使用主机提供的对象 this 像那样。

2. 使用 传播语法（...）

   也可以使用ES2015 传播语法 使用支持此功能的JavaScript引擎：

   var trueArray = [...iterableObject];
   

   所以，例如，如果我们想转换一个 NodeList 进入一个真正的数组，使用扩展语法，这变得非常简洁：

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

3. 使用 Array.from  （SPEC） | （MDN）

   Array.from （ES2015 +，但容易polyfilled）从类似数组的对象创建一个数组，可选择首先通过映射函数传递条目。所以：

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

   或者，如果您想获得具有给定类的元素的标记名称数组，则可以使用映射函数：

   // Arrow function (ES2015):
   var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);
   
   // Standard function (since `Array.from` can be shimmed):
   var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
       return element.tagName;
   });
   

警告主机提供的对象

如果你使用 Array.prototype 功能 主机提供的 类似于数组的对象（DOM列表和浏览器提供的其他内容而不是JavaScript引擎），您需要确保在目标环境中进行测试，以确保主机提供的对象行为正常。 大多数人表现得很好 （现在），但测试很重要。原因是大部分的 Array.prototype 您可能想要使用的方法依赖于主机提供的对象，为抽象提供诚实的答案 [[HasProperty]] 操作。在撰写本文时，浏览器在这方面做得很好，但5.1规范确实允许主机提供的对象可能不诚实。在里面 §8.6.2，在该部分开头附近的大表下方的几个段落），其中说：

除非另有说明，否则Host对象可以以任何方式实现这些内部方法;例如，一种可能性是 [[Get]] 和 [[Put]] 对于特定的宿主对象确实获取和存储属性值但是 [[HasProperty]] 永远生成 假。

（我无法在ES2015规范中找到相同的措辞，但它仍然是这样的。）同样，在撰写本文时，现代浏览器中常见的主机提供的类似数组的对象[NodeList 实例，例如] 做 处理 [[HasProperty]] 正确，但测试很重要。）