用更安全的东西替换 eval

Question

我用 flatpickr.js 库创建了一个日历。我只想启用从下拉列表中选择的数组 dateCorfu、dateZante 和 datePag 中存在的日期（属性名称="destinazione"）。

我不是编码员，但我使用 eval 方法编写了以下代码，这是有效的，但我确定这是错误的方法..也许有更好的方法来操作函数的结果（日期）。那么有没有一种方法可以在不使用 eval 的情况下使其工作？

flatpickr("#data-partenza", {
    locale:'it', 
    minDate: "2020-07-16",
    enable: [
        function(date) {
            // return true to enable
            var drop_destinazione = jQuery('[name="destinazione"]').val();
            var result = '';
            var dateCorfu = ["2020-07-16","2020-07-23","2020-07-30","2020-08-06","2020-08-13","2020-08-20"];
            var dateZante = ["2020-07-17","2020-07-24","2020-07-31","2020-08-07","2020-08-14"];
            var datePag = ["2020-07-18","2020-07-25","2020-08-01","2020-08-08"];
            var slice = 'date.toISOString().slice(0,10)';
            var i;
            if(drop_destinazione == 'Corfù'){
                for (i = 0; i < dateCorfu.length; i++) {
                    result += (slice + '==' + '"' + dateCorfu[i] + '"' + '||');
                }
                return eval(result.slice(0, -2));
            }
            else if(drop_destinazione == 'Zante'){
                for (i = 0; i < dateZante.length; i++) {
                    result += (slice + '==' + '"' + dateZante[i] + '"' + '||');
                }
                return eval(result.slice(0, -2));
            }
            else if(drop_destinazione == 'Pag'){
                for (i = 0; i < datePag.length; i++) {
                    result += (slice + '==' + '"' + datePag[i] + '"' + '||');
                }
                return eval(result.slice(0, -2));
            }
            else {
                console.log('no destination selected')
            }
        }
    ],
    dateFormat: "d-m-Y",
    disableMobile: true,
});

Answer 1

既然你只是在做 if 验证，为什么不立即评估并累积每个结果 += ..?

result = false;
for (...) {
    if (condition) result = true;
}
return result;

甚至更好：提前退出，像这样：

result = true;
for (...) {
    if (condition) return true;
}
return false;

应用于您的原始代码，这将使您的函数看起来像这样：

function(date) {
    var drop_destinazione = jQuery('[name="destinazione"]').val();
    var dateCorfu = ["2020-07-16","2020-07-23","2020-07-30",
                     "2020-08-06","2020-08-13","2020-08-20"];
    var dateZante = ["2020-07-17","2020-07-24","2020-07-31",
                     "2020-08-07","2020-08-14"];
    var datePag = ["2020-07-18","2020-07-25","2020-08-01","2020-08-08"];
    var slice = date.toISOString().slice(0, 10);
    if (drop_destinazione == 'Corfù') {
        for (var i = 0; i < dateCorfu.length; i++) {
            if (slice == dateCorfu[i]) return true;
        }
    }
    else if(drop_destinazione == 'Zante') {
        for (var i = 0; i < dateZante.length; i++) {
            if (slice == dateZante[i]) return true;
        }
    }
    else if(drop_destinazione == 'Pag') {
        for (var i = 0; i < datePag.length; i++) {
            if (slice == datePag[i]) return true;
        }
    }
    else { console.log('no destination selected'); }
    return false;
}

然而，您可以采取一些步骤来减少代码的重复性：

function(date) {
    var drop_destinazione = jQuery('[name="destinazione"]').val();
    var slice = date.toISOString().slice(0, 10);
    var allowed = {
        Corfù: ["2020-07-16","2020-07-23","2020-07-30",
                "2020-08-06","2020-08-13","2020-08-20"],
        Zante: ["2020-07-17","2020-07-24","2020-07-31",
                "2020-08-07","2020-08-14"],
        Pag: ["2020-07-18","2020-07-25","2020-08-01",
              "2020-08-08"],
    };
    if (allowed[drop_destinazione] == undefined) {
        console.log('no destination selected');
        return false;
    }
    return allowed[drop_destinazione].indexOf(slice) !== -1;
}

当然属性名称 "Corfù" 看起来不太好，但是 "drop_destinazione" 似乎是一个下拉列表，它们既有值又有标签（参见 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).您应该使值成为简单的字符串，例如 "corfu":

<select>
    <option value="corfu">Corfù</option>
    ...
</select>

如果你这样做，你可以让允许的索引看起来更好：

var allowed = {
    corfu: ["2020-07-16","2020-07-23","2020-07-30",
            "2020-08-06","2020-08-13","2020-08-20"],
    zante: ["2020-07-17","2020-07-24","2020-07-31",
            "2020-08-07","2020-08-14"],
    pag: ["2020-07-18","2020-07-25","2020-08-01",
          "2020-08-08"],
};

希望对您有所帮助！

用更安全的东西替换 eval

replace the eval with something safer

javascript

jquery

eval

flatpickr