在JavaScript中循环使用一组元素的最佳方法是什么？

Question

在过去和大多数我目前的项目中,我倾向于使用这样的for循环:

var elements = document.getElementsByTagName('div');
for (var i=0; i<elements.length; i++) {
    doSomething(elements[i]);
}

我听说使用"反向"循环更快但我没有真正的方法来证实这一点:

var elements = document.getElementsByTagName('div'), 
    length = elements.length;

while(length--) {
    doSomething(elements[length]);
}

什么被认为是循环JavaScript中的元素或任何数组的最佳实践？

Answer 1

这是我经常使用的一个很好的循环形式.您可以从for语句创建迭代变量,而不需要检查length属性,这在迭代NodeList时特别昂贵.但是,您必须小心,如果数组中的任何值可能是"虚假",则无法使用它.在实践中,我只在迭代不包含空值的对象数组(如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...of给你的名字,但不是索引,自ES6以来可用

for (let item of list) {
    console.log("Looping: index ", "Sorry!!!", "item" + item);
}

Answer 2

请注意,在某些情况下,您需要以相反的顺序循环(但是您也可以使用i--).

例如,有人想使用new 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个初始项目!

Answer 3

我喜欢这样做:

 
var menu = document.getElementsByTagName('div');
for (var i = 0; menu[i]; i++) {
     ...
}

每次迭代都没有调用数组的长度.

Answer 4

冒着被大吼大叫的风险,我会得到一个像jquery或者原型这样的javascript助手库,它们将逻辑封装在漂亮的方法中 - 两者都有一个.each方法/迭代器来做 - 并且他们都努力使它跨浏览器兼容

编辑:这个答案发布于2008年.今天存在更好的结构.这种特殊情况可以用a来解决.forEach.

Answer 5

我认为使用第一种形式可能是要走的路,因为它可能是迄今为止已知宇宙中最常见的循环结构,并且因为我不相信反向循环可以在实际中节省你的任何时间(仍在增加/递减和每次迭代的比较).

其他人可识别和可读的代码绝对是件好事.

Answer 6

我之前遇到过与document.getElementsByClassName()类似的问题.我当时不知道节点列表是什么.

var elements = document.getElementsByTagName('div');
for (var i=0; i<elements.length; i++) {
    doSomething(elements[i]);
}

我的问题是我希望元素是一个数组,但事实并非如此.nodelist Document.getElementsByTagName()返回是可迭代的,但你不能在其上调用array.prototype方法.

但是,您可以使用nodelist元素填充数组,如下所示:

var myElements = [];
for (var i=0; i<myNodeList.length; i++) {                               
    var element = myNodeList[i];
    myElements.push(element);
};

之后,您可以随意调用.innerHTML或.style或类似元素的内容.

Answer 7

我也建议使用简单的方法（KISS！-）

-但是可以找到一些优化，即不要多次测试数组的长度：

var elements = document.getElementsByTagName('div');
for (var i=0, im=elements.length; im>i; i++) {
    doSomething(elements[i]);
}