javascript - 替代使用 eval()

Question

我听到很多关于 eval 函数是多么“邪恶”甚至“误解”的传闻，所以我决定从我的代码中删除它。问题是我不知道用什么来代替它。

这是我当前代码的简要说明。我在开头声明了一系列数组(在下面的示例中只有 2 个)，然后基于单击按钮，其中一个被加载到传递给函数的变量中。

这是一些基本的 HTML

<div class="button" data-name="button1">Button1</div>
<div class="button" data-name="button2">Button2</div>

和 JS(使用 jQuery)

var butName = null;
var eArray = null;
var button1Logo = ["..path/to/pic1.png","..path/to/pic2.png"];
var button2Logo = ["..path/to/pic3.png","..path/to/pic4.png"];

    $(".button").mouseup(function(){
            /*give a butName*/
            butName = $(this).attr("data-name");

            /*give the array from the button*/
            eArray = eval(butName + "Logo");
    });

这样做会将数组分配给变量，而不仅仅是一个表示“butnameLogo”的字符串，这就是我使用 eval 的原因。但我希望摆脱这种情况。

我知道我可以向 html 添加一个新属性，然后只为变量检索该属性，但我不想添加更多 html，因为我可以用 JS 做到这一点。

我也试过制作一个加载了字符串的对象，如以下答案所示:https://stackoverflow.com/a/16038097/1621380但这只会再次产生一个字符串，而不是分配一个变量。

不知道各位高手有没有更好的建议!

Answer 1

替换

var button1Logo = ["..path/to/pic1.png","..path/to/pic2.png"];
var button2Logo = ["..path/to/pic3.png","..path/to/pic4.png"];

使用对象，其中键是您的按钮名称:

var buttonLogos = {
    button1: ["..path/to/pic1.png","..path/to/pic2.png"],
    button2: ["..path/to/pic3.png","..path/to/pic4.png"]
};

然后你可以简单地做而不是eval

eArray = buttonLogos[butName]

(或 buttonLogos[butName + "Logo"] 如果你想调用键 button1Logo 和 button2Logo，但我不能现在真的明白了，它们很好地包含在 buttonLogos 对象中)