Question

我正在使用while循环在元素中附加事件。但是事件成功添加但该函数也在控制台上抛出错误。如果我使用预增量，那么它的工作正常。我只是想知道后增量有什么问题。 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++表示“使用i的值，但之后会增加它。”

当您使用预增量（++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

3 个答案: