使用字符串创建变量

Question

我正在尝试使用字符串创建变量。

我正在编写一个脚本，该脚本将从字符串数组中加载图像，并且我想将这些图像存储在具有所用字符串名称的变量中。

这是目前为止的代码：

var images = ["CrazyWolf.jpg", "CrazyWolf.jpg", "CrazyWolf.jpg", "CrazyWolf.jpg"];
var name = "";

function preload(path)
{
        img = new Image();
        img.src = path;
        img.onload = imageLoaded;
        return img;
};

function makeImages()
{
    for(var i = images.length; i > 0; i--)
    {
        source = images.shift();
        preload(source);
        var name = source.replace(".jpg", "Image");
        console.log(name);

        //make vars with as name, var name
        //Console.log(name); returns: CrazyWolfImage

        if(i==0) console.log("Loop ended");
    }
}

如何使用这个名称来创建变量？

任何帮助将不胜感激！

谢谢！

Answer 1

您的要求很简单。您可以将图像作为属性存储在window 对象中，并且可以作为全局变量访问：

function makeImages() {
  while (images.length) {
    source = images.shift();
    var name = source.replace(".jpg", "Image");
    window[name] = preload(source);
  }
}

但是，动态创建变量并不是很有用，而且可能会产生无法预料的副作用。使用变量的代码要么必须根据创建的变量盲目地使用某些变量，要么动态地访问它们，这使得首先将它们作为变量毫无意义。全局命名空间已经充满了标识符，因此存在使用已经存在的名称的风险。

创建一个按名称存储图像的对象，而不是使用全局命名空间。这样，它们就与全局命名空间及其现有标识符隔离开来。您甚至不必操纵名称来生成有效的标识符，像 CrazyWolf.jpg 这样的名称就可以很好地访问属性：

var img = {};

function makeImages() {
  while (images.length) {
    source = images.shift();
    img[source] = preload(source);
  }
}

现在您可以从对象动态访问图像。示例：

document.getElementById('#ShowImage').src = img['CrazyWolf.jpg'].src;

您还可以循环遍历对象中的图像，如果它们是全局命名空间中所有现有变量中的变量，则这是不可能的：

for (image in img) {
  image.style.width = '200px';
}

注意：循环遍历对象中的属性时，您不能依赖于它们的处理顺序。如果要保留特定顺序，可以使用数组而不是对象。

Answer 2

你可以这样说：-

eval("var number = 5");
console.log(number);

它将打印5 作为答案。

我认为这会有所帮助。

Answer 3

如果不使用 eval()，您将无法使用构造名称创建非全局变量（这将是一个非常糟糕的主意），但是您可以创建对象属性：

var imgs = {};
for(var i = images.length; i > 0; i--)
{
    source = images.shift();
    preload(source);
    var name = source.replace(".jpg", "Image");
    console.log(name);
    imgs[name] = whatever;
}

应该避免eval()，因为如果不是出于经常讨论的美学原因，它会使内部代码优化变得不可能。

全局变量是全局上下文 (window) 的属性，所以如果你想要全局变量（为什么？）你可以使用它而不是本地对象。