web-dev-qa-db-ja.com

JavaScriptの「変数」変数?

PHPで「変数」変数を持つことは可能です。例えば

$x = "variable";
$$x = "hello, world!";
echo $variable; // displays "hello, world!"

Javascriptの文字列として名前で変数を参照することは可能ですか?どのように行われますか?

91
ShoeLace1291

これに対する単一の解決策はありません(まあ、evalがありますが、それを真剣に考慮しないでください)。 windowを介してsomeグローバル変数に動的にアクセスすることは可能ですが、関数のローカル変数では機能しません。 しないwindowのプロパティになるグローバル変数は、letconst、およびclassesで定義された変数です。

変数変数を使用するよりも優れたソリューションがほぼ常にあります!代わりに、 データ構造 を見て正しいものを選択する必要がありますあなたの問題のために。

次のような名前の固定セットがある場合

// BAD
var foo = 42;
var bar = 21;

var key = 'foo';
console.log(eval(key));

それらの名前/値をobjectのプロパティとして保存し、ブラケット表記を使用して動的に検索します。

// GOOD
var obj = {
  foo: 42,
  bar: 21,
};

var key = 'foo';
console.log(obj[key]);

ES2015 +では、簡潔なプロパティ表記を使用して既存の変数に対してこれを行うのがさらに簡単です。

// GOOD
var foo = 42;
var bar = 21;
var obj = {foo, bar};

var key = 'foo';
console.log(obj[key]);

次のような「連続した」番号の変数がある場合

// BAD
var foo1 = 'foo';
var foo2 = 'bar';
var foo3 = 'baz';

var index = 1;
console.log(eval('foo' + index));

次に、代わりにarrayを使用し、インデックスを使用して対応する値にアクセスする必要があります。

// GOOD
var foos = ['foo', 'bar', 'baz'];
var index = 1;
console.log(foos[index - 1]);
124
Felix Kling

これを実行したい場合は、eval()を使用して試すことができます。

var data = "testVariable";
eval("var temp_" + data + "=123;");
alert(temp_testVariable);

または、ウィンドウオブジェクトを使用します。

var data = "testVariable";
window["temp_" + data] = 123;
alert(window["temp_" + data]);

http://www.hiteshagrawal.com/javascript/dynamic-variables-in-javascript

42
Masterbuddha

文字列のみでjavascriptの変数を参照するには、次を使用できます。

window['your_variable_name']

変数、および変数内のオブジェクトも設定および参照できます。

3
Awesomeness01
var vars = {};
var var_name = "str";
vars[var_name] = "working";
console.log(vars["str"]);
2
lkdhruw

PHPとは異なり、JavaScriptはグローバル配列(現在宣言されているすべての変数名への参照を含む)へのアクセスを提供しません。そのため、JavaScriptは変数変数のネイティブサポートを提供しません。ただし、すべての変数を配列またはオブジェクトの一部として定義する限り、この機能をエミュレートできます。これにより、Gloabls配列が作成されます。たとえば、次のようにグローバルスコープで変数helloを宣言する代わりに:

var hello = 'hello world';

オブジェクト内にカプセル化しましょう。そのオブジェクトをvv(変数変数)と呼びます:

var vv = {
    'hello': 'hello world',
    //Other variable variables come here.
},
referToHello = 'hello';

これで、インデックスによって変数を参照できます。変数を使用して配列インデックスを提供できるため、事実上変数変数を使用しています。

console.log(vv[referToHello]); //Output: hello world

質問への回答

元の質問で指定したコードにこれを適用してみましょう。

    var vv = {
        'x': 'variable',
        'variable': 'hello world!'
    };
    console.log(vv[vv['x']]); //Displays "hello, world!"

実用的

前のコードはとてつもなく面倒で非実用的と思われるかもしれませんが、このタイプのカプセル化を使用するJavaScriptの変数変数には実用的な用途があります。次の例では、同じ概念を使用して、未定義のHTML要素のIDを取得します。

var elementIds = [],
        elements = ['message','fillOrStroke','sizePicker','colorPicker']; //The items in this array could be defined automatically via an input, database query, event, etc.
        elements.forEach( (element) => {
            elementIds[element] = document.getElementById(element);
        });

この例では、各要素のIDに基づいて変数変数(elementIdsのキー)を宣言し、その要素のノードを各変数の値として割り当てます。また、JavaScriptでグローバル変数を使用することは一般的に推奨されないため、変数変数に一意のスコープ(この例では、elementIds配列内で宣言する)は適切であるだけでなく、より責任があります。

2
Nadav

もちろんできますが、できません。変数はグローバルでなければなりません。

var killingFunction = 'alert'
var killMeNow = 'please'
var please = 'You have been killed!'
this[killingFunction](this[killMeNow])
1
Konrad Borowski

JavaScript eval(str) 関数を使用できます。

この関数は、提供された文字列をJSコードに変換してから実行します。

例えば:

eval("console.log('hello world')"); // Logs hello world

したがって、変数変数として使用するには、次の操作を実行できます。

var a = "hello";
var hello = "world";
console.log(a + " " + eval(a)); // Logs hello world

これにより、次とまったく同じ出力が生成されます。

console.log(a + " " + hello); // Logs hello world

(例は PHP変数変数のマニュアル から取られています。)