在过去和我目前的大多数项目中，我倾向于使用这样的 for 循环：
var elements = document.getElementsByTagName('div');
for (var i=0; i<elements.length; i++) {
doSomething(elements[i]);
}
我听说使用“反向 while”循环更快，但我没有真正的方法来确认这一点：
var elements = document.getElementsByTagName('div'),
length = elements.length;
while(length--) {
doSomething(elements[length]);
}
在 JavaScript 中循环元素或任何数组时，什么被认为是最佳实践？
这是我经常使用的一种很好的循环形式。您从 for 语句创建迭代变量，并且不需要检查 length 属性，这在遍历 NodeList 时特别昂贵。但是，您必须小心，如果数组中的任何值可能是 "falsy"，则不能使用它。在实践中，我只在迭代不包含空值的对象数组（如 NodeList）时使用它。但我喜欢它的语法糖。
var list = [{a:1,b:2}, {a:3,b:5}, {a:8,b:2}, {a:4,b:1}, {a:0,b:8}];
for (var i=0, item; item = list[i]; i++) {
// Look no need to do list[i] in the body of the loop
console.log("Looping: index ", i, "item" + item);
}
请注意，这也可用于向后循环（只要您的列表没有['-1']属性）
var list = [{a:1,b:2}, {a:3,b:5}, {a:8,b:2}, {a:4,b:1}, {a:0,b:8}];
for (var i = list.length - 1, item; item = list[i]; i--) {
console.log("Looping: index ", i, "item", item);
}
ES6 更新
for (const item of list) {
console.log("Looping: index ", "Sorry!!!", "item" + item);
}
请注意，在某些情况下，您需要以相反的顺序循环（但您也可以使用 i--）。
例如，有人想使用新getElementsByClassName函数在给定类的元素上循环并更改此类。他发现只有二分之一的元素发生了变化（在 FF3 中）。
那是因为该函数返回一个活动的 NodeList，从而反映了 Dom 树中的变化。以相反的顺序遍历列表避免了这个问题。
var menus = document.getElementsByClassName("style2");
for (var i = menus.length - 1; i >= 0; i--)
{
menus[i].className = "style1";
}
在递增索引进程中，当我们询问索引 1 时，FF 检查 Dom 并跳过带有 style2 的第一个项目，它是原始 Dom 的第 2 个项目，因此它返回第 3 个初始项目！
我喜欢做：
var menu = document.getElementsByTagName('div');
for (var i = 0; menu[i]; i++) {
...
}
每次迭代都不会调用数组的长度。
我之前在 document.getElementsByClassName() 中遇到了一个非常相似的问题。我当时不知道节点列表是什么。
var elements = document.getElementsByTagName('div');
for (var i=0; i<elements.length; i++) {
doSomething(elements[i]);
}
我的问题是我希望元素是一个数组，但它不是。节点列表 Document.getElementsByTagName() 返回的是可迭代的，但您不能对其调用 array.prototype 方法。
但是，您可以使用节点列表元素填充数组，如下所示：
var myElements = [];
for (var i=0; i<myNodeList.length; i++) {
var element = myNodeList[i];
myElements.push(element);
};
之后，您可以随意调用 .innerHTML 或 .style 或数组元素上的其他内容。