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

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 Dev tools 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
}

我理解逗号运算符 'runs a series of expressions, in order, and then returns the result of the last of them' (from here)。但是我很难理解那些 OR 和 AND 运算符如何构建在缩小代码中返回的字符串。

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

Answer 1

尽可能使用 source maps 而不是尝试阅读缩小代码。

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

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

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 之后的换行符会触发（可怕的是）自动分号插入。为了解释清楚，添加了其他 ()。

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

When reading minified Javascript, how am I supposed to read this return statement with commas, &&, and || operators?

javascript

minify