javascript - funcion - jquery dynamic variable name

¿Hay una manera fácil de crear variables dinámicas con Javascript?

Question

He construido un mapa de Google basado en datos con diferentes iconos que se asignan al mapa dependiendo del tipo de elemento ubicado. Entonces, si tengo 5 tipos de hito y cada uno recibe un ícono diferente (tienda, biblioteca, hospital, etc.), lo que me gustaría hacer es generar los íconos del ícono de Google de manera dinámica. Estaba pensando algo como esto:

types = array(''hospital'',''church'',''library'',''store'',etc);
var i=0;
while (i<=types.length) {

    var landmark + i = new google.maps.Icon();
    landmark.image = "icon" + i + ".png";
    i++;
    } 

Sin embargo, como probablemente haya adivinado, esto no funciona. También traté de usar eval, así:

while (i<=types.length) {
        doIcon(i);
        i++;
    }   

    function doIcon(i){ 
        eval("var landmark" + i + " = new.google.maps.Icon();");
        return eval("landmark" + i);
    }

pero tampoco funcionó. Apreciaría cualquier indicador sobre la generación dinámica de variables javascript. Tiene que ser puro js, ​​podría hacerlo en PHP pero esa no es una opción aquí.

¡Gracias!

Answer 1

¿Realmente necesitas esas variables? ¿No puedes hacer con esto?

var types = [''hospital'',''church'',''library'',''store''];    
for(var i =0; i < types.length; i += 1) (new google.maps.Icon()).image = "icon" + i + ".png";

Modificaciones hechas basadas en comentario:

el patrón del nombre del ícono cambió de ícono + índice + .png a ícono + tipo + .png y guardando los resultados del ciclo.

types = [''hospital'',''church'',''library'',''store''];
var landmarks = {};


// images names are of the form icon + type + .png
function createIcon(type) 
{ 
    var icon = new google.maps.Icon();
    icon.image = "icon" + type + ".png";
    return icon;
}

// mapping of landamarks by type and icon
for (var i = 0, len = types.length; i < len; i++)
{
    landmarks[types[i]] = createIcon(types[i]);
}

el resultado es: {hospital: icono, iglesia: icono, ...}

donde ícono es un ícono de mapa de google que tiene un atributo de imagen que es una cadena con el formato "ícono {tipo} .png", por ejemplo, iconhostpital.png, iconchurch.png.

Para usar los iconos, escriba landmarks.type donde tipo es uno de los nombres en la matriz de tipos, por ejemplo, landmarks.hospital .

si los nombres de las imágenes tienen el icono de forma + número + .png, y el número para cada tipo es equivalente a su índice en la matriz, reemplace la llamada createIcon (tipo [i]) para createIcon (i).

Answer 2

Es realmente fácil de hacer: object["variablename"] = whatever;

Así, por ejemplo, podría tener un objeto: var Landmarks = {} y podría agregarlo de esta forma: Landmarks["landmark" + i] = new google.maps.Icon(); Y pasarlo de esa manera.

Si necesita que estas variables sean globales (¿por qué lo haría?), Puede acceder al objeto global directamente mediante la window .

Answer 3

Sería mejor que creas un objeto javascript que puedas usar de forma similar a como se usa una matriz asociativa en PHP:

var types = [''hospital'',''church'',''library'',''store''];
var landmarks= {};
for (var i in types) {
    landmarks[types[i]]= new google.maps.Icon();
    landmarks[types[i]].image = "icon" + i + ".png";
} 
alert(landmarks[''hospital''].image);  // displays "icon0.png"

Answer 4

Si lo va a hacer utilizando un objeto declarado como Landmark["landmark" + i] , realmente puede usar una matriz de índice en lugar de una asociativa, es mucho más fácil para la iteración. Los objetos no se usan realmente con propiedades indexadas porque los arreglos lo hacen mucho mejor:

var myObj =           // object version
{
   "item0": "blah",
   "item1": "blah"
   // etc
}
var myArr =           // array version
[
   "blah",
   "blah"
   // etc
]

Mucho más sensato de usar la matriz:

landmarks = []; // new array
types = array(''hospital'',''church'',''library'',''store'',etc);  
var i=0;  
while (i<=types.length) {  
    landmarks.push(new google.maps.Icon());
    landmarks[i].image = "icon" + i + ".png";
    i++;  
}

Tiene más sentido hacerlo de esta manera y for...in bucles de los objetos se puede ensuciar un poco y las propiedades de prototipos son enumerables, etc.

Si está tratando de hacer una variable global, agréguela al objeto de la ventana:

var myCustomVar = "landmark" + i;
window[myCustomVar] = new google.maps.Icon();

alert(landmark0);

Pero esto estaría contaminando el espacio de nombres global con muchas variables innecesarias. Así que todavía serías mejor con una matriz:

window.landmarks = [];
landmarks.push(new google.maps.Icon());
// etc...

Answer 5

Solo para responder a su pregunta directamente (aunque tenga en cuenta que esta no es la solución que desea. Revise las otras respuestas. ¡Esto es solo como documentación! ), Aquí está una copia y pegado desde una consola de JavaScript:

> window["myNamedVar"] = "Hello, World!";
> console.log(myNamedVar);
  "Hello, World!"