web-dev-qa-db-ja.com

JavaScriptで動的変数名を使用する

PHPでは、次のような素晴らしい/恐ろしいことを行うことができます。

$a = 1;
$b = 2;
$c = 3;
$name = 'a';
echo $$name;
// prints 1

Javascriptでこのようなことをする方法はありますか？

例えば。 var name = 'the name of the variable';がある場合、nameという名前の変数への参照を取得できますか？

javascriptdynamic-variables
304
Finbarr

ECMA-/JavascriptはすべてObjectsとContexts（これもObjectの一種です）に関するものなので、すべての変数は Variable- などの関数に格納されます（または関数の場合は Activationオブジェクト ）.

あなたがこのような変数を作成するならば：

var a = 1,
    b = 2,
    c = 3;

グローバルスコープ （= NO関数コンテキスト）では、これらの変数を暗黙的に グローバルオブジェクト （ブラウザではwindow）に書き込みます。

これらは、 "ドット"または "ブラケット"表記を使用してアクセスできます。

var name = window.a;

または

var name = window['a'];

Global Object の Variable Object はwindowオブジェクトそのものであるため、これはこの特定のインスタンスのグローバルオブジェクトに対してのみ機能します。関数のコンテキスト内では、 アクティベーションオブジェクト に直接アクセスすることはできません。例えば：

function foobar() {
   this.a = 1;
   this.b = 2;

   var name = window['a']; // === undefined
   alert(name);
   name = this['a']; // === 1
   alert(name);
}

new foobar();

newは、自己定義オブジェクト（コンテキスト）の新しいインスタンスを作成します。 newがなければ、関数のスコープもglobal（= window）になります。この例はそれぞれundefinedと1に警告します。 this.a = 1; this.b = 2を次のように置き換えます。

var a = 1,
    b = 2;

両方のアラート出力は未定義になります。そのシナリオでは、変数aとbはfoobarからActivationオブジェクトに格納されますが、アクセスできません（もちろん、aとbを呼び出すことで直接アクセスできます）。

314
jAndy

evalは1つのオプションです。

var a = 1;
var name = 'a';

document.write(eval(name)); // 1
141
erickb

あなたはそれを取得するためにウィンドウオブジェクトを使用することができます。

window['myVar']

windowはあなたが使っているすべてのグローバル変数とグローバル関数への参照を持っています。

70
JohnP

悪い答えが非常に多くの票を獲得するものを知らないだけです。簡単な答えですが、複雑になります。

// If you want to get article_count
// var article_count = 1000;
var type = 'article';
this[type+'_count'] = 1000;  // in a function we use "this";
alert(article_count);
34
Terry Lin
a = 'varname';
str = a+' = '+'123';
eval(str)
alert(varname);

これを試して...

27
amitchd

これは一例です。

for(var i=0; i<=3; i++) {
    window['p'+i] = "hello " + i;
}

alert(p0); // hello 0
alert(p1); // hello 1
alert(p2); // hello 2
alert(p3); // hello 3

もう一つの例 ：

var myVariable = 'coco';
window[myVariable] = 'riko';

alert(coco); // display : riko

したがって、 myVariable の値 " coco "は変数 coco になります。

グローバルスコープ内のすべての変数はWindowオブジェクトのプロパティだからです。

23
Azodium

Javascriptでは、すべてのプロパティがキーと値のペアであるという事実を使用できます。 jAndyはすでにこれについて言及しましたが、私は彼の答えがそれがどのように悪用される可能性があるかを示すとは思いません。

通常、変数名を保持するための変数を作成しようとしているのではなく、変数名を生成してそれらを使用しようとしています。 PHPは$$var表記で行いますが、プロパティキーは配列キーと互換性があるのでJavascriptは必要ありません。

var id = "abc";
var mine = {};
mine[id] = 123;
console.log(mine.abc);

123を与えます。通常、あなたは変数を構築したいのです。それが間接指定がある理由です。

var mine = {};
mine.abc = 123;
console.log(mine["a"+"bc"]);
12
David Newcomb

Windowやglobal（node）のようなグローバルオブジェクトを使いたくない場合は、次のようにして試すことができます。

var obj = {};
obj['whatever'] = 'There\'s no need to store even more stuff in a global object.';

console.log(obj['whatever']);
4
Brent Barbata

2019年

TL、DR

  • eval演算子は、呼び出したコンテキスト内で文字列式を実行し、そのコンテキストから変数を返すことができます。
  • literal objectは理論的には次のように書くことでできます：{[varName]}、しかし定義上ブロックされています。

それで私はこの質問に出くわします、そして、ここの皆は本当の解決策をもたらさずにただ遊んでいます。しかし@Axel Heiderには良いアプローチがあります。

解決策はevalです。ほとんど忘れられたオペレーター（ほとんどがwith()だと思います）

eval演算子は、呼び出したコンテキスト内で式を動的に実行できます。そしてその式の結果を返します。これを使用して、関数のコンテキストで変数の値を動的に返すことができます。

例：

function exmaple1(){
   var a = 1, b = 2, default = 3;
   var name = 'a';
   return eval(name)
}

example1() // return 1


function example2(option){
  var a = 1, b = 2, defaultValue = 3;

  switch(option){
    case 'a': name = 'a'; break;
    case 'b': name = 'b'; break;
    default: name = 'defaultValue';
  }
  return eval (name);
}

example2('a') // return 1
example2('b') // return 2
example2() // return 3

式evalが実行されることを明示的に書いていることに注意してください。コード内の不要な驚きを避けるため。 evalは非常に強いです しかし、私はあなたがすでにそれを知っていると確信しています

ところで、literal objectを使用して変数名と値を取得することが正当であったとしても、計算されたプロパティ名とプロパティ値を簡単に組み合わせることはできません。

functopn example( varName ){
    var var1 = 'foo', var2 ='bar'

    var capture = {[varName]}

}

example('var1') //trow 'Uncaught SyntaxError: Unexpected token }`
2
pery mimon

私はその場で複数のFormDataを描画する必要があり、オブジェクトの方法はうまくいきました

var forms = {}

それから私のループの中で私は私が使用したフォームデータを作成する必要があるときはいつでも

forms["formdata"+counter]=new FormData();
forms["formdata"+counter].append(var_name, var_value);
2
Talha

彼らが意味することはいいえ、あなたはできません。それを成し遂げる方法はありません。だからあなたはこのようなことをすることができた可能性がありました

function create(obj, const){
// where obj is an object and const is a variable name
function const () {}

const.prototype.myProperty = property_value;
// .. more prototype

return new const();

}

eCMAScript 5で実装されているものとまったく同じ作成機能を持ちます。

1
Alfgaar

eval（）は私のテストでは動作しませんでした。しかし、DOMツリーに新しいJavaScriptコードを追加することは可能です。それで、これは新しい変数を追加する関数です：

function createVariable(varName,varContent)
{
  var scriptStr = "var "+varName+"= \""+varContent+"\""

  var node_scriptCode = document.createTextNode( scriptStr )
  var node_script = document.createElement("script");
  node_script.type = "text/javascript"
  node_script.appendChild(node_scriptCode);

  var node_head = document.getElementsByTagName("head")[0]
  node_head.appendChild(node_script);
}

createVariable("dynamicVar", "some content")
console.log(dynamicVar)
1
Axel Heider

これには受け入れられた答えがありますが、観察を追加したいと思います。

ES6ではlet を使用しても機能しません ：

/*this is NOT working*/
let t = "skyBlue",
    m = "gold",
    b = "tomato";

let color = window["b"];
console.log(color);

しかしvar works を使う

/*this IS working*/
var t = "skyBlue",
    m = "gold",
    b = "tomato";

let color = window["b"];
console.log(color);

これが一部の人に役立つことを願っています。

0
enxaneta

オブジェクトを使用することも素晴らしいです。

var a=123
var b=234
var temp = {"a":a,"b":b}
console.log(temp["a"],temp["b"]);
0
Steve Jiang

これは動的に名前が付けられた変数をエクスポートする必要がある人のための代替手段です

export {
  [someVariable]: 'some value',
  [anotherVariable]: 'another value',
}

// then.... import from another file like this:
import * as vars from './some-file'

もう1つの方法は、キーが動的に命名されたオブジェクトを単純に作成することです。

const vars = { [someVariable]: 1, [otherVariable]: 2 };

// consume it like this
vars[someVariable];
0
JeanAlesi