Javascript 使用eval（）的替代方法

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

下面是我当前代码的简要说明。我在开始时声明了一系列数组（下面的示例中只有2个），然后根据按钮单击将其中一个数组加载到传递给函数的变量中

下面是一些基本的HTML

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

这样做会将数组分配给变量，而不仅仅是一个写着“butnameLogo”的字符串，这就是我使用eval的原因。但我想摆脱这一切

我知道我可以在html中添加一个新属性，只需为变量检索该属性，但我不想在可以使用JS的情况下添加更多html

我也尝试过创建一个加载了字符串的对象，如下面的回答所示：但这又导致了一个字符串，而没有赋值变量

---

不知道你们这些聪明人有没有更好的建议

最好的选择是定义一个包含所有按钮路径的对象：

var buttons = {
    "1": ["..path/to/pic1.png", "..path/to/pic2.png"],
    "2": ["..path/to/pic3.png", "..path/to/pic4.png"]
};
$(".button").mouseup(function(){
  /* give a butName */
  var butName = $(this).attr("data-name");

  /* give the array from the button */
  var eArray = buttons[butName];
});

---

如果变量位于全局范围内，则可以使用访问它们：

eArray = window[butName + "Logo"];

注意不建议使用此解决方案。第一个代码示例更干净，更易于维护。

---

想象一种情况，您必须将所有代码移动到一个“更深”的上下文中（！=全局上下文）。任何东西都无法再工作。

最好的选择是定义一个包含所有按钮路径的对象：

var buttons = {
    "1": ["..path/to/pic1.png", "..path/to/pic2.png"],
    "2": ["..path/to/pic3.png", "..path/to/pic4.png"]
};
$(".button").mouseup(function(){
  /* give a butName */
  var butName = $(this).attr("data-name");

  /* give the array from the button */
  var eArray = buttons[butName];
});

---

如果变量位于全局范围内，则可以使用访问它们：

eArray = window[butName + "Logo"];

注意不建议使用此解决方案。第一个代码示例更干净，更易于维护。

想象一种情况，您必须将所有代码移动到一个“更深”的上下文中（！=全局上下文）。没有任何东西能再工作了。

替换

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]

（或者

buttonloos[butName+“Logo”]

如果您想调用键

button1Logo

和

button2Logo

，但我现在看不到它们被很好地包含在

buttonloos

对象中的意义了）

替换

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]

（或者

buttonloos[butName+“Logo”]

如果您想调用键

button1Logo

和

button2Logo

，但我现在看不出它们很好地包含在

buttonloos

对象中的意义了）

使用对象：

var butName = null;
var buttonsLogos = {
      button1: ["..path/to/pic1.png", "..path/to/pic2.png"],
      button2: ["..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 = buttonsLogos[butName];
});

使用对象：

var butName = null;
var buttonsLogos = {
      button1: ["..path/to/pic1.png", "..path/to/pic2.png"],
      button2: ["..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 = buttonsLogos[butName];
});

---

使用数组和数组索引可以很好地做到这一点。您根本不需要查找和使用变量名。甚至您的

数据-

属性也是不必要的

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

var buttons = $(".button").mouseup(function(){
    var idx = buttons.index(this);

    eArray = buttonLogos[idx];
});

---

这里的关键行是按钮。索引（this）。此方法调用获取当前元素在由

$（“.button”）

匹配的所有元素中的位置。然后，我们使用此索引从

按钮NLOGOS

数组中选择相关元素。

使用数组和数组索引可以很好地完成此操作。您根本不需要查找和使用变量名。甚至您的

数据-

属性也是不必要的

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

var buttons = $(".button").mouseup(function(){
    var idx = buttons.index(this);

    eArray = buttonLogos[idx];
});

---

这里的关键行是按钮。索引（this）。此方法调用获取当前元素在由

$（“.button”）

匹配的所有元素中的位置。然后，我们使用此索引从

按钮NLOGOS

数组中选择相关元素。

您在这里使用

eval

走了一条非常迂回的路线

你最好做这样的事情：

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

$(".button").mouseup(function(){
    /*give the array from the button*/
    eArray = paths[$(this).attr("data-name")];
});

---

eval

仅当您需要执行代码（通常来自第三方源代码）时才应使用，即使这样也很少见。如果你发现自己说“我应该在这里使用eval”，那么几乎肯定有更好的选择，你应该试着找到它。

你在这里使用

eval

走了一条非常迂回的路

你最好做这样的事情：

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

$(".button").mouseup(function(){
    /*give the array from the button*/
    eArray = paths[$(this).attr("data-name")];
});

---

eval

仅当您需要执行代码（通常来自第三方源代码）时才应使用，即使这样也很少见。如果您发现自己说“我应该在这里使用eval”，那么几乎肯定有更好的选择，您应该尝试找到它。

考虑将数据作为对象的属性提供，然后您可以通过作用域控制对对象的访问，并且对于所有此类数据只需要一个（全局？）变量

如果需要全局范围，则：

var dataObj = {
    button1Logo: ["..path/to/pic1.png","..path/to/pic2.png"],
    button2Logo: ["..path/to/pic3.png","..path/to/pic4.png"]
}

后来：

var eArray = dataObj[this.data-name + 'Logo'];

---

不过，您可能希望调用比dataObj更有意义的数据对象。

考虑将数据作为对象的属性提供，这样您就可以通过作用域控制对对象的访问，并且所有此类数据只需要一个（全局？）变量

如果需要全局范围，则：

var dataObj = {
    button1Logo: ["..path/to/pic1.png","..path/to/pic2.png"],
    button2Logo: ["..path/to/pic3.png","..path/to/pic4.png"]
}

后来：

var eArray = dataObj[this.data-name + 'Logo'];

---

不过，您可能希望将数据对象称为比dataObj更有意义的对象。

这是问得最多的问题之一，但通常细节较少……您得到的答案将与您在另一个问题中找到的答案相同。每当您遇到一个系列时，将其设置为数组（hashmap）！只是一个您可能感兴趣的快速提示-jQuery解析任何数据属性–因此，您可以使用

$（this）.attr（“数据名”）

而不是

$（this）.data（“名称”）

（并使用

$（this.data（“名称”，“新值”）

）进行设置）。它甚至可以根据需要将字符串转换为数字/对象/数组。总有一天会帮助你的。医生：这是问得最多的问题之一，但通常细节较少……你得到的答案将与你在另一个问题中找到的答案相同。每当你遇到一个系列，就把它做成一个数组（hashmap）！只是一个您可能感兴趣的小提示—jQuery解析任何数据—属性