Q&A
「JavaScript 変数 動的」で調べて出てくる情報では何か不足してますか？
javascriptで動的に変数名を作成・宣言したい時，例えばfor文で次々に変数を作成・宣言したい時の方法を知りたいのですが、eval以外の方法はありますか？
evalを使った時
jQuery
1for (var i = 0; i < 10; i++) { 2 eval("var num" + i + "=" + i + ";"); 3}
evalを使うという情報は取得しましたが、パフォーマンスも悪く、セキュリティにも問題があるという記事が多かったので質問させていただきました。
teratail内でもそれなりにあるので、ネット上だともっとあると思います。
https://teratail.com/search?q=%E5%A4%89%E6%95%B0+%E5%8B%95%E7%9A%84+tag%3AJavaScript
参考記事ありがとうございます！
いえ、見てもらったら分かりますが、記事ではなく、teratail内の検索結果です。
Googleなど検索エンジンにかけるときと同じく、「過去に誰も質問しなかったかどうか」を質問前に検討してもらいたいのです。
かしこまりました。
ご教授ありがとうございます。
回答3件
0
ベストアンサー
new Function
eval以外の方法はありますか？
Function コンストラクタで動的に引数名、変数名を定義することは可能です。
JavaScript
1new Function("a", "b", "c", "var x = a+b+c; return x;")(1,2,3); // 6
ただし、evalはStrict Modeでローカル変数を制限不可能になり、new Function も関数スコープに限定されます。
グローバル変数
グローバル変数は「グローバルオブジェクトのプロパティ」として定義される為、プロパティ名を動的指定することで、グローバル変数を動的生成は可能です。
が、グローバル変数は名前衝突のリスクがある為、お勧めしません。
HTML
1<script> 2'use strict'; 3this.a = 1; 4this.b = 2; 5this.c = 3; 6 7console.log(a, b, c); // 1 2 3 8</script>
keyを動的指定する
JavaScript
1for (var i = 0; i < 10; i++) { 2 eval("var num" + i + "=" + i + ";"); 3}
こういう使い方をするなら、下記のプロパティ(キー)を動的に変更するコードが好ましいと感じます。
- オブジェクト
- 配列
- new Map
JavaScript
1var o = {}, a = [], m = new Map; 2 3for (var i = 0; i < 10; ++i) { 4 o[i] = i, a[i] = i, m.set(i, i); 5} 6 7console.log(JSON.stringify(o)); // {"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9} 8console.log(JSON.stringify(a)); // [0,1,2,3,4,5,6,7,8,9] 9console.log(JSON.stringify([...m])); // [[0,0],[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9]]
以下、参考情報。
Re: hase_ さん
投稿2020/04/29 12:30
編集2020/04/29 13:39
総合スコア18196
0
二つ、方法を提示しようと思います。
jQueryの質問タグがあることから、ウェブブラウザ実行のJSとします。
windowオブジェクトのプロパティとして定義
ウェブブラウザ実行の場合、すべての変数は、
varで宣言している、宣言子を使わないで変数宣言している場合、windowオブジェクトのプロパティとして宣言されるので、
[]を使い、プロパティ名に文字列を使います。
javascript
1for (var i = 0; i < 10; i++) { 2 window["num" + i] = i; 3}
こうすることによって、ルートに宣言されるため、
num1などの変数名のみで呼び出せます。
（letならびにconstでの宣言は、ルートでの宣言であっても、windowオブジェクトのプロパティとはならない。つまり、上記の宣言の仕方はできない）
Object.definePropertyを使う方法
これは、第一引数のオブジェクトのプロパティとして、定数（constで定義したと同じような仕様の変数）を定義するものです。
下記のように、オプションを設定すれば、varで宣言したものと同じ仕様の変数の定義が可能です。
javascript
1for (var i = 0; i < 10; i++) { 2 // 第一引数に変数を入れたいオブジェクト、第二引数に、変数名を文字列で指定 3 Object.defineProperty(window, "num" + i, { 4 configurable: true, // 変数の削除などを許可 5 enumerable: true, // 通常変数として列挙される 6 writable: true, // 再代入の許可 7 value: i // 値 8 }); 9}
ただし、上記はいずれも、var宣言を使う、スコープ汚染をさせやすい宣言の仕方であるなど、仕様的に様々な面で虚弱になるため、
（上記いずれも、let、constでの変数宣言とはならない）
今後はやるべきではないと個人的には思います。
投稿2020/04/29 12:55
編集2020/04/30 02:16
総合スコア9592
あなたの回答
tips
プレビュー
