Блог

Я пытаюсь создавать переменные, используя строки.

Я пишу скрипт, который будет загружать изображения из массива строк, и я хочу сохранить эти изображения в переменных с именем используемой строки.

Пока это код:

 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");
    }
}
  

Как мне использовать это имя для создания переменных из него?

Любая помощь была бы высоко оценена!

Спасибо!

То, что вы просите, довольно просто. Вы можете сохранить изображение как свойство в 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';
}
  

Примечание: При циклическом просмотре свойств объекта вы не можете полагаться на порядок их обработки. Вы бы использовали массив вместо объекта, если хотите сохранить определенный порядок.

вы можете сказать что-то вроде этого:-

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

Это будет напечатано 5 как ответ.

Я думаю, это будет полезно.

Вы не можете создавать неглобальные переменные с сконструированными именами без использования 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 ), поэтому, если вам нужны глобальные переменные (почему?) вы можете использовать это вместо локального объекта.