web-dev-qa-db-ja.com

Javascriptで動的変数を作成する簡単な方法はありますか？

配置されたアイテムのタイプに応じてマップに割り当てられるさまざまなアイコンを使用して、データ駆動型のGoogleマップを作成しました。したがって、5種類のランドマークがあり、それぞれに異なるアイコン（店舗、図書館、病院など）が付いている場合、私がやりたいのは、Googleアイコンオブジェクトを動的に生成することです。私はこのようなことを考えていました：

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++;
    }

ただし、ご想像のとおり、これは機能しません。また、次のようにevalを使用してみました。

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

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

しかし、それも機能しませんでした-JavaScript変数を動的に生成するためのポインタをいただければ幸いです。それは純粋なjsでなければなりません、私はPHPでそれを行うことができますが、それはここではオプションではありません。

ありがとう！

javascriptdynamic-variables
17
julio

本当に簡単です：_object["variablename"] = whatever;_

したがって、たとえば、オブジェクト_var Landmarks = {}_を作成し、そのオブジェクトにLandmarks["landmark" + i] = new google.maps.Icon();のように追加してそのように渡すことができます。

これらの変数をglobalにする必要がある場合（なぜそうするのですか？）、windowを使用してグローバルオブジェクトに直接アクセスできます。

33
Plynx

Landmark["landmark" + i]などの宣言されたオブジェクトを使用してこれを行う場合は、連想ではなくインデックス配列を使用する方がよいでしょう。反復がはるかに簡単です。配列はそれをはるかにうまく処理するため、オブジェクトはインデックス付きプロパティでは実際には使用されません。

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

配列を使用する方がはるかに賢明です。

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++;  
}

そのようにする方が理にかなっており、オブジェクトのfor...inループは、プロトタイプ化されたプロパティが列挙可能であるなど、少し厄介になる可能性があります。

変数をグローバルにしようとしている場合は、それをウィンドウオブジェクトに追加します。

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

alert(landmark0);

しかし、これは多くの不要な変数でグローバル名前空間を汚染することになります。したがって、配列を使用した方がよいでしょう。

window.landmarks = [];
landmarks.Push(new google.maps.Icon());
// etc...
5
Andy E

質問に直接答えるだけです（ただし、これは希望する解決策ではありません。他の回答を確認してください。これはドキュメント用です！） 、JavaScriptコンソールからのコピーアンドペーストは次のとおりです。

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

PHPで連想配列が使用されているように使用できるjavascriptオブジェクトを作成することをお勧めします。

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"
3
leepowers

あなたは本当にそれらの変数が必要ですか？あなたはこれで行うことはできません：

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

コメントに基づいて行われた変更：

アイコン名のパターンがアイコン+インデックス+ .pngからアイコン+タイプ+ .pngに変更され、ループの結果が保存されます。

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

結果は次のとおりです。{病院：アイコン、教会：アイコン、...}

ここで、iconは、「icon {type} .png」という形式の文字列である画像属性を持つGoogleマップアイコンです（例：iconhostpital.png、iconchurch.png）。

アイコンを使用するには、landmarks.typeここで、typeは、型の配列内の名前の1つです。 landmarks.hospital。

画像名がアイコン+番号+ .pngの形式であり、各タイプの番号が配列内のインデックスと等しい場合は、createIcon（i）のcreateIcon（type [i]）呼び出しを置き換えます。

1
Alfgaar