使用迭代变量名在JavaScript for循环中执行简单数学运算

Posted 2021-05-06

我需要在循环中创建变量名（其中一部分似乎正在工作），然后获取39个变量中的26个来执行简单的数学运算（例如：变量 - = 10）。将变量识别为变量而不是文本，似乎是个问题。

这个答案How do I create dynamic variable names inside a loop?提出了一个可能的解决方案，但我不是试图使用数组。

这样可以正常工作，它可以访问名为canvas1到canvas13的13幅画布：

for (i = 1; i < 14; i++)   
{   
  c = document.getElementById("canvas" + i.toString()); 
  context = c.getContext("2d");
  ...                                   
} 

但是，当我尝试动态创建画布名称，并在同一行中动态创建2个变量时，变量将创建为文本。

for (i = 1; i < 14; i++)
{
  document.getElementById('canvas' + i).style.filter = "brightness((bright" + i + " -= 10)%) contrast((cont" + i + " -= 10)%)"; 
}   

可能有十几个关于这个主题的变种都失败了。简而言之，变量bright1和cont1到bright13和cont13不会被识别为可以用数学处理的变量，它们被识别为文本。

现在我输入13行代码：

document.getElementById('canvas1').style.filter = "brightness(" + (bright1 -= 10) + "%) contrast(" + (cont1 -= 10) + "%)";          
...
document.getElementById('canvas13').style.filter = "brightness(" + (bright13 -= 10) + "%) contrast(" + (cont13 -= 10) + "%)";       

至少可以说效率低下。

那么，使用哪种正确的语法使bright1到bright13和cont1到cont13是变量而不是文本？

谢谢！

答案

由于您担心内存使用并且不想使用数组，因此将它们放在窗口上对您没有任何好处。窗口引用从来没有机会在JS中进行GC。但使用13个变量也不可能循环。

所以你需要通过使用一个对象来妥协，而这个对象结合了两个答案中的最佳

let bright = {};
let cont = {};
for (i = 1; i < 14; i++)
{
 document.getElementById('canvas' + i).style.filter = "brightness("+ (bright[i]-=10)+ "%) contrast("+ (cont[i]-= 10)+ "%)";//es5
 document.getElementById('canvas' + i).style.filter = `brightness(${(bright[i]-=10)}%) contrast(${(cont[i]-= 10)}%)`;//es6
} 

但是我应该警告你，这与JS中的数组没什么不同，因为JS数组也是一种特殊对象，具有所有数组特定的辅助方法。

1）这将避免窗口全局。

2）它将保持所有分组。

但是IMHO阵列实际上没有那么多的内存使用，你不应该真的避免使用它们。至少在JS中使用现代浏览器，减少行代码的数量更重要，因为它们是通过网络发送的。比保存更好数组与循环中的小运行时内存。