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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用迭代变量名在JavaScript for循环中执行简单数学运算相关的知识,希望对你有一定的参考价值。

我需要在循环中创建变量名(其中一部分似乎正在工作),然后获取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中使用现代浏览器,减少行代码的数量更重要,因为它们是通过网络发送的。比保存更好数组与循环中的小运行时内存。

以上是关于使用迭代变量名在JavaScript for循环中执行简单数学运算的主要内容,如果未能解决你的问题,请参考以下文章

来自 % for % 的 Django 模板变量循环到 Javascript

如何使用循环中迭代的变量在 for 循环中创建数据框

在多个 for 循环中使用相同的变量名是不好的做法吗?

For循环:通过字符迭代 - Javascript [重复]

[Effective JavaScript 笔记]第49条:数组迭代要优先使用for循环而不是for...in循环

在 for 循环的每次迭代中保存变量并稍后加载它们