Question

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

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

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

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是变量而不是文本？

谢谢！

Answer 1

由于您担心内存使用情况并且不想使用数组，因此将它们放在窗口上对您没有任何帮助。窗口引用永远不可能在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）它将维持所有分组。

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

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

1 个答案: