使用字符串创建变量

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 ）的属性，所以如果你想要全局变量（为什么？），你可以使用它而不是本地对象。