JS：在尝试将数组作为参数传递时对函数使用 eval，但会引发错误

Question

我想使用 javascript 创建一个动态生成的表单，一切正常，直到我尝试将数组作为参数传递。当我这样做时，会发生错误。谁能解释一下这是什么？

这是我的代码：

var loadFrm = function(component) {
    for(nItem in component) {
        var myComponent = "add" + firstToUpper(component[nItem].type);
    var callComponent = myComponent + "(" + component[nItem].opt + ");";
    eval(callComponent);
    }
}

var json = [
    {
        type: "scale",
        opt: {content: [{label: "male", value: "m"}, {label: "female", value: "f"}]}
    }
];

loadFrm(json);

编辑这是错误：

missing ] after element list
[Break on this error] addScale([object Object]);

Answer 1

如果您使用调试器查看 string callComponent，您可能会发现它看起来像这样：

addScale([对象对象])

……这不是你想要的。那是因为您正在有效地调用toString您的opt对象，而对象的默认值toString看起来就是这样。该eval错误是因为这是无效的语法。

一般来说，任何时候您认为需要使用eval，几乎肯定会有更好的答案。在这种情况下，您似乎正在尝试调用一个函数并传入opt. 假设这些函数是“全局函数”，你可以这样做：

var loadFrm = function(component) {
    var nItem, functionName;

    for (nItem = 0; nItem < component.length; ++nItem) {
        functionName = "add" + firstToUpper(component[nItem].type);
        window[functionName](component[nItem].opt);
    }
}

活生生的例子

上述注意事项：

1. for..in除非您真的知道自己在做什么，否则不要使用循环遍历数组。for..in不枚举数组的索引，它枚举对象的属性。
2. 我们使用window[functionName]. 这是有效的，因为“全局变量”实际上是window对象的属性，您可以使用带括号的表示法使用字符串名称查找属性。
3. 通过 获得函数后window[functionName]，我们直接调用它，传入对象 opt而不是它的字符串形式。我假设addScale期望看到一个对象。
4. 我将所有的vars 移到函数的顶部，因为那才是它们真正所在的位置（details）。
5. 如果可以，我建议将addScale相关功能移动到它们自己的对象中，而不是将它们放在window. 该window命名空间已经相当拥挤。这是修改为根本不添加任何符号的实时示例window，而是将addScale函数放在调用的对象上functions并从那里使用它。

题外话：语法var loadFrm = function(component)创建一个匿名函数，然后将其分配给一个变量。这经常使用，但除非您根据条件创建不同的函数，例如：

var f;
if (...) {
    f = function() { ... };
}
else {
    f = function() { ... };
}

……其实用处不大。（如果您是基于这样一个条件生成不同的功能，那么它不仅是有益的，这是必要的。）我建议使用命名功能，只要有可能，因为名称的功能可以帮助您的工具可以帮助您通过展示你在函数名错误消息、调用堆栈等。

题外话 2：您有一个名为 的变量json，但仅供参考，它没有使用JSON表示法。它结合了 JavaScript 数组和对象文字表示法，它是 JSON 的超集。你会看到很多人对此感到困惑，我提到它是因为你说你是新人，所以值得扼杀在萌芽状态。:-) JSON 纯粹是一种符号。（一个非常有用的。）