使用for循环更高效吗？

下面是我在我的网站上的一些代码示例...这实际上继续进行了12次迭代。是否有可能使用for循环来做到这一点？有没有更高效的方法？谢谢！使用for循环更高效吗？

document.getElementById("1").onclick=function(){ 
    lyre[0]=Number(!lyre[0]); 
    document.getElementById("1").innerHTML=String(lyre[0]); 
} 
    document.getElementById("2").onclick=function(){ 
    lyre[1]=Number(!lyre[1]); 
    document.getElementById("2").innerHTML=String(lyre[1]); 
} 
document.getElementById("3").onclick=function(){ 
    lyre[2]=Number(!lyre[2]); 
    document.getElementById("3").innerHTML=String(lyre[2]); 
} 
document.getElementById("4").onclick=function(){ 
    lyre[3]=Number(!lyre[3]); 
    document.getElementById("4").innerHTML=String(lyre[3]); 
}

来源

2013-10-25 mattomatto

正如迪克斯特拉所说：“两个或两个以上，用一个for。” –

@AaditMShah - 正如L. Peter Deutsch所说，“迭代是人为的，以递归神圣。” –

在其最基本的，你可以做这样的事情：

function attachListener(lyre, lyreIndex, id) { 

    document.getElementById(id).onclick = function() { 
    // assign zero or one based on the current value: 
    lyre[lyreIndex] = !lyre[lyreIndex] ? 0 : 1; 

    // update the display of the value: 
    document.getElementById(id).innerHTML = lyre[lyreIndex]; 
    } 
} 

for(var i = 0; i < lyre.length; i += 1) { 
    attachListener(lyre, i, i + 1); 
}

我已经修改了代码，更惯用的JavaScript。通常，您应该避免使用原始构造函数（例如Number和String），并使用相同的文字版本。

还有其他一些方法可以使这个更易于维护和习惯，但这应该满足您的需求。

如果您担心性能，几十个事件监听器通常不需要关注。如果你处理的不仅仅是这些，你应该考虑委托你的事件。这限制了在保持相同的功能的离散事件侦听器的数目：

document.getElementById('parent').onclick = function(e) { 
    var node = (e.target || e.srcElement), 
     index = node.id; 

    if(lyre[index] === undefined) { return; } 

    lyre[index] = !lyre[index] ? 1 : 0; 

    node.innerHTML = lyre[index]; 
};

哪里parent是，所有的单元共享文档中的某些节点的ID。说明这个概念的Here's a working JSBin。

来源

2013-10-25 16:36:37

是的，可以使用for来完成您正在尝试执行的操作。虽然在性能方面它不会更好，因为您将执行更多操作，但在代码组织方面会更好。在大多数情况下，性能差异不会被察觉，所以我真的建议你为此使用循环。

function setEvent(index) { 
    var id = index + 1; 
    document.getElementById(id).onclick=function(){ 
     lyre[index]=Number(!lyre[index]); 
     document.getElementById(id).innerHTML=String(lyre[index]); 
    } 
} 

for (var i = 0, j = lyre.length; i < j; i++) { 
    setEvent(i); 
}

来源

2013-10-25 16:31:52

我不明白你的意思是指同一个变量。在每个函数调用中，'index'值取当前迭代的当前值。这是它运行：http://jsfiddle.net/bhAdH/ –

对不起。我误解了你的代码。它现在很好。 –

每当我发现一个模式，我会首先创建一个函数。然后我会使用“for”（请参阅其他答案）......这将使我的代码结构良好并易于维护。

但是，正如其他人所说，在性能方面不会更好。

来源

2013-10-25 16:39:30 Learner

使用for循环更高效吗？

回答

相关问题