eval()で配列を組み込む

Question

// sample.js
let all=[];
let value_num=[[0,1],[1,2]];
for (var i=0;i<2; i++){
    // alert('dd' + value_num[i]);
    eval("var num_" + i +"={" +
        "x:" + i +"," + 
        "y:" + value_num[i] + "," +  // デバックした感じここでエラーを吐いてる
        "};"); 
    all.push(eval("num_" + i));
}
alert(num_0['x']);
alert(num_1['y']);
alert(all);

変数を生成して(keyに対して)valueに配列を渡したい。"y:" + value_num[i] + ","
を消すと正常に動いたのでここが問題になっていると思われる。
助言をお願いします。

Answer 1

eval関数の是非はともかく、そのコードがエラーになるのは「配列の文字列化」の処理内容があなたの想定と異なるからです。

生成した文字列を直接evalせず、一度変数に代入して中身をチェックすればなぜエラーになるか容易に分かります。そのようなチェックの手間を惜しんではいけません。

"y:" + value_num[i] + ","

ここで、value_num[i] を文字列として出力しています。これは value_num[i].toString()が暗黙に呼び出されます。
Array.toString()は「配列の中身を単純にカンマで区切った内容」が出力されます。ドキュメントにちゃんと明示されています。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toString

配列を表現する[ ] はtoString()では出力されません。

それでは解決方法はどうなのかというと、JSON.stringifyメソッドを通すとJSONで扱うような表現で文字列が出力されます。 JSON.stringify(value_num[i])の出力結果を確認しましょう。

まあ、とにかくevalする前に一度変数に代入し、内容をチェックするのが確実です。
（大切なので2回言いました）

おそらく、じゃあconsole.logで出てくる文字列は何なんだ、という疑問がわいてくると思います。私も内部の細かな挙動は詳しくないですが、console.logの内部で同じようにJSON.Stringifyが呼ばれているのであろうと思われます。
（違ってたら申し訳ない）

検証コード：

var value_num = [[0,1],[1,2]];
console.log("console.log(value_num[0]): ",value_num[0]);
console.log("console.log(value_num[0].toString()): ",value_num[0].toString());
console.log("console.log(JSON.stringify(value_num[0])): ",JSON.stringify(value_num[0]));
var i = 0;

var evalStr1 = "var val_" + i + "={" + "x:" + i + "," + "y:" + value_num[i] + "," + "};"; // これは不正な構文になる
i++;
evalStr2 = "var val_" + i + "={" + "x:" + i + "," + "y:" + JSON.stringify(value_num[i]) + "," + "};"; // これは正常な構文になる

console.log("evalStr1: ", evalStr1);
console.log("evalStr2: ", evalStr2);

//eval(evalStr1);
eval(evalStr2);

//console.log(val_0);
console.log(val_1);

Comments

[hima-mura.]

JSで配列を扱うとき、たびたび想像と異なる値がはじかれることがありましたが、toString()の仕業だったわけですね。stringifyメソッドの存在を知らなかったのでありがたいです。大変参考になりました。

Answer 2

エラー(どんなエラー?)が出るのは "y:" + value_num[i] + "," の value_num[i] の部分が期待している形式ではないからです。 // alert('dd' + value_num[i]); で確認しているので期待と違うことは理解したのでは?

eval()はできだけ避けましょう。以下のようのコードが本当にしたかったことなのでは。

let all = value_num.map((item, i) => { return {x:i, y:item};});
alert(all[0].x);
alert(all[1].y);
alert(all);

Comments

[hima-mura.]

map()使い勝手がよいですね。大変参考になりました。
ありがとうございます。

Answer 3

なにをしたいのか分かりづらいのと、evalを使うのは関心できないことをおいておいて

let all=[];
let value_num=[[0,1],[1,2]];
for (var i=0;i<2; i++){
  var str="var num_" + i +"={" +
        "x:" + value_num[i][0]+"," +
        "y:" + value_num[i][1]+
        "};";
  eval(str);
  all.push(eval("num_" + i));
}
console.log(num_0['x']);
console.log(num_1['y']);
console.log(all);

Comments

[hima-mura.]

やりたいことが不透明ですいません。変数の自動生成で調べたらeval()が出てきたのでそのまま使おうとしてました。確かにリスクが多いみたいなので、使わないようにしたいと思います。