while 循环抛出错误 javascript

Question

我正在使用 while 循环在元素中附加一个事件。但是事件已成功添加，但该函数还在控制台上抛出错误。如果我使用预增量那么它工作正常。我只想知道 post 增量有什么问题。 fiddle

var elements= document.getElementsByTagName('*'), i;
i=0;

while(elements[i++]){
    if(elements[i].className=='c') {
        elements[i].addEventListener('click',function() {
            alert(this.className)
        })
    }
}

Answer 1

循环头中的 i++ 意味着 i 的值比进行测试时的值大。您将跳过元素 0 并尝试处理超出列表末尾的元素。

所以当它运行时：

while (elements[i++])

测试的元素索引将是0到最后一个元素，该点之后i的值将比它多一个。那是因为 i++ 意味着 "use the value of i but increment it afterwards".

当你使用预递增（++i）时它仍然是错误的，除非你将i初始化为-1。

真的，这就是我们有 for 循环的原因：

for (i = 0; elements[i]; i++) {
  // ...
}

这样 i 的值从循环测试到循环体结束保持不变。

Answer 2

试试这个

var elements = document.getElementsByTagName('*'),
    i = 0;

while (elements[i]) {    
    if (elements[i].className == 'c') {
        elements[i].addEventListener('click', function (e) {
            alert(this.className)
        })
    }

    i++;
}

演示：http://jsfiddle.net/r19r7djb/3/

Answer 3

不要使用 ++ 运算符。您应该改用聚合操作。它们是针对循环的有用抽象层。它们允许您考虑迭代而不用担心像递增这样的副作用操作的复杂性。

var elements = document.getElementsByTagName('*');

function toArray(list) {
    return Array.prototype.slice.call(list);
}

toArray(elements).forEach(function (element) {
    if (element.className === 'c') {
        element.addEventListener('click', function () {
            alert(this.className);
        });
    }
});

while 循环抛出错误 javascript

while loop throwing error javascript

javascript