JavaScript - 对条件使用 eval() - 是否正确？

Question

我有 JSON 数据，我正在使用 filter 搜索:

myJsonData.filter(function (entry) { return (entry.type === 'model' || entry.type === 'photographer' ); });

现在我没有在返回后指定这些条件，而是创建了一个类似的字符串(因为我想要一个预先创建的搜索条件列表)，然后使用 eval() 所以:

myJsonData.filter(function () { return eval(stringToSearch) ; });

这似乎有效。但是，我只想确认一下，这是正确的用法吗？这样做有什么风险/问题吗？

我想灵活地进行任何类型的搜索，例如:

myJsonData.filter(function (entry) { 
   return (entry.type === 'model' || entry.type === 'photographer') 
          && entry.level.indexOf('advanced') > -1 ; 
});

这就是为什么我创建了一个单独的类来创建该字符串。

Answer 1

为避免 eval，您可以将用户输入(通过按钮或其他方式)转换为过滤器。这些过滤器将针对每个数据属性(即每个位置、类型、级别……)有一个过滤器。其中一个过滤器可以是值列表，也可以是自由文本的单个值。

这是一个带有示例数据集的示例实现，没有任何性感的输入/输出小部件，...只是演示过滤算法的最低限度:

// The sample data to work with:
var data = [
    { location: "ny", type: "model", level: "advanced", name: "Jack" },
    { location: "ny", type: "model", level: "beginner", name: "Fred" },
    { location: "sf", type: "model", level: "experienced", name: "Helen" },
    { location: "sf", type: "photographer", level: "is advanced", name: "Stacy" },
    { location: "sf", type: "photographer", level: "advanced experience", name: "Joy" },
    { location: "ny", type: "photographer", level: "beginner++", name: "John" },
    { location: "sf", type: "model", level: "no experience", name: "Jim" },
    { location: "ny", type: "photographer", level: "professional", name: "Kay" },
];

// A global variable to maintain the currently applied filters
var filters = { type: [], location: [], level: "" };

// Capture user selections and translate them to filters
// Type 1: multiple selections from a closed list of values:
document.querySelector("#seltypes").addEventListener("change", function() {
    filters.type = [...this.options].filter(option => option.selected).map(option => option.value);
    refresh();
});

document.querySelector("#sellocations").addEventListener("change", function() {
    filters.location = [...this.options].filter(option => option.selected).map(option => option.value);
    refresh();
});

// Type 2: free text filter:
document.querySelector("#inplevel").addEventListener("input", function() {
    filters.level = this.value;
    refresh();
});

function refresh() {
    // This is the actual filtering mechanism, making use of the filters variable
    let result = data;
    for (let prop in filters) {
        let value = filters[prop];
        if (!value.length) continue; // If this filter is empty: don't filter
        result = Array.isArray(value)
            ? result.filter(entry => value.some(type => entry[prop] === type))
            : result.filter(entry => entry[prop].includes(value));
    }
    // No effort done here on the output format: just JSON :-)
    document.querySelector("#output").textContent = JSON.stringify(result, null, 2);
}

// Start 
refresh();

td { vertical-align: top }

<b>Filters (Ctrl to multi select):</b>
<table>
<tr><th>Types</th><th>Locations</th><th>Level</th></tr>
<tr><td>
  <select multiple id="seltypes" size="2">
    <option value="model">Model</option>
    <option value="photographer">Photographer</option>
  </select>
</td><td>
  <select multiple id="sellocations" size="2">
    <option value="ny">New York</option>
    <option value="sf">San Francisco</option>
  </select>
</td><td>
  <input id="inplevel">
</td></tr></table>

<pre id="output"></pre>