当阅读缩小的 Javascript 时，我应该如何阅读带有逗号、&& 和 || 的返回语句 运营商？

Question

我有这个源代码：

function findMessageErrors(btn) {
    var error = "";
    var message = $(btn).parent().siblings().find("textarea[name='message']").val();
    if (message === "") {
        error += "*Please enter a message.<br/>";
    }
    if (!$(btn).parent().siblings().find('input[name="agree"]').prop('checked')) {
        error += "*Please agree.<br/>";
    }
    return error;
}

这会被缩小。缩小后，它在 Chrome 开发工具的 Sources 选项卡中看起来像这样：

function findMessageErrors(btn) {
    var error = "";
    return "" === $(btn).parent().siblings().find("textarea[name='message']").val() && (error += "*Please enter a message.<br/>"),
    $(btn).parent().siblings().find('input[name="agree"]').prop("checked") || (error += "*Please agree.<br/>"),
    error
}

我理解逗号运算符如何“按顺序运行一系列表达式，然后返回最后一个表达式的结果” （来自此处）。但我很难理解这些 OR 和 AND 运算符如何构建在缩小代码中返回的字符串。

有谁有一种有用的方法来大声朗读它，以帮助我理解它是如何工作的？我想我没有看到源代码中的 2 个独立 IF 语句如何被缩小为一系列 && 然后 || 。我不想每次想要了解缩小代码的工作原理时都必须查找源代码。

Answer 1

如果可能，请使用源映射而不是尝试阅读缩小的代码。

但这并不意味着您不想知道如何阅读复杂的语句；而是意味着您不想知道如何阅读复杂的语句。有时是人类写的。:-)

我做了一些格式化和内联注释来解释：

function findMessageErrors(btn) {
    var error = "";
    return (
        (
            "" === $(btn).parent().siblings().find("textarea[name='message']").val()
            &&
            // This only runs if the === above is true, because of the &&
            (error += "*Please enter a message.<br/>")
        )
        ,
        ( // This runs regardless of the above
            $(btn).parent().siblings().find('input[name="agree"]').prop("checked")
            ||
            // This only runs if prop("checked") returned a falsy value, because of ||
            (error += "*Please agree.<br/>")
        )
        ,
        ( // This runs regardless, of the above...
            // ...and this is the ultimate value of the return
            error
        )
    );
}

外部()只是添加的，因为return触发后的换行符（可怕的是）自动分号插入。()为了解释清楚，添加了其他内容。