每个在JavaScript中的数组？

如何使用JavaScript循环访问数组中的所有条目？

我认为这是这样的：

forEach(instance in theArray)

凡theArray是我的阵列，但是这似乎是不正确的。

TL; DR

但还有很多东西需要探索，请继续阅读......

JavaScript具有强大的语义来循环数组和类似数组的对象。 我将答案分为两部分：真正数组的选项，以及类似数组的事物选项，如arguments对象，其他可迭代对象（ES2015 +），DOM集合等等。

我会很快注意到，通过将ES2015转换为ES5，即使在ES5引擎上，您现在也可以使用ES2015选件。 搜索“ES2015 transpiling”/“ES6 transpiling”了解更多...

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

对于实际数组

在ECMAScript 5（“ES5”）中有三个选项，这是目前最广泛支持的版本，并且即将在ECMAScript 2015（“ES2015”，“ES6”）中提供两个选项，即供应商正在开发的最新版JavaScript在支持：

细节：

1.使用forEach和相关的

如果您使用的环境支持ES5的Array功能（直接或使用垫片），则可以使用新的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填充”）。

forEach具有的优点是，您不必在包含范围中声明索引和值变量，因为它们作为迭代函数的参数提供，因此恰好适用于该迭代。

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

另外， forEach是“通过它们全部循环”的功能，但是ES5定义了其他一些有用的“通过数组和功能工作”功能，其中包括：

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，如果你点击第一个，你会得到“Index is：0”，如果你点击了最后一个，你会得到“Index is：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]);
    }
}

注意两个检查：

在大多数数组上，每循环迭代会增加一点额外开销，但是如果您有一个稀疏数组，它可能是一种更有效的循环方式，因为它只循环实际存在的条目。 例如，对于上面的数组，我们总共循环三次（对于键"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);
}

输出：

a
b
c

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

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

有时候，你可能想明确使用迭代器。 你也可以做到这一点，虽然它比原因for-of笨得多。 它看起来像这样：

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

迭代器是一个函数（特别是一个生成器），每当你next一次调用时都会返回一个新对象。 迭代器返回的对象具有一个属性done ，告诉我们它是否完成，并且具有该迭代值的属性value 。

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

（在撰写本文时，Firefox 29支持entries和keys但不支持values 。）

对于类似于数组的对象

除了真正的数组之外，还有类似数组的对象，它们具有length属性和带有数字名称的属性： NodeList实例， arguments对象等。我们如何遍历它们的内容？

使用上面的任何选项作为数组

至少有一些，也可能是大部分甚至全部的数组方法经常适用于类似数组的对象：

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`
});

创建一个真正的数组

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

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

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

var trueArray = [...iterableObject];

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

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]]操作的一个诚实的答案。 在撰写本文时，浏览器在这方面做得很好，但ES5规范确实允许主机提供的对象可能不诚实; 它在§8.6.2中（在该部分开头附近的大表格下面几段），其中说：

主机对象可以以任何方式实现这些内部方法，除非另有规定; 例如，一种可能性是特定主机对象的[[Get]]和[[Put]]确实获取并存储属性值，但[[HasProperty]]总是生成false 。

（我找不到在ES2015规格相当于空话，但它势必仍是如此。）此外，由于这一在现代浏览器编写常见的主机提供阵列状物体（ NodeList的情况下，例如） 做正确处理[[HasProperty]] ，但测试很重要。

编辑 ：这个答案是绝望的过时。 对于更现代的方法，请查看数组上可用的方法。 感兴趣的方法可能是：

在JavaScript中迭代一个数组的标准方法是一个for -loop的vanilla：

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element i.
}

但是，请注意，如果您有一个密集的数组，并且每个索引都被一个元素占据，那么这种方法才是有效的。 如果数组很稀疏，那么你可以用这种方法来解决性能问题，因为你会迭代很多在数组中并不存在的索引。 在这种情况下， for .. in -loop可能是一个更好的主意。 但是 ，您必须使用适当的安全措施以确保只对数组（即数组元素）所需的属性起作用，因为for..in -loop也将在旧版浏览器中枚举，或者如果额外属性被定义为enumerable 。

在ECMAScript 5中，数组原型上会有一个forEach方法，但在传统浏览器中不支持。 因此，为了能够始终如一地使用它，您必须拥有一个支持它的环境（例如，用于服务器端JavaScript的Node.js），或者使用“Polyfill”。 然而，这种功能的填充是微不足道的，因为它使代码更易于阅读，所以它是一个很好的填充。

如果您使用jQuery库，则可以使用jQuery.each ：

$.each(yourArray, function(index, value) {
  // do your stuff here
});

编辑：

按照每个问题，用户想在JavaScript代码而不是jQuery，所以编辑是

var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}

上一篇: each over an array in JavaScript?

下一篇: Why don't self