Javascript逗号语法，以及复杂的表达式，缩小，混淆：请帮我理解一段代码

Question

我需要理解一些代码。我对 Java、C++、PHP 的语法感觉很好，但 Javascript 语法对我来说仍然是一片“黑暗森林”。以下是原始形式和可能的解释，我的意思是程序逻辑方面的等效形式：

1.

var o,
a,
s = "https://widget.kiwitaxi.com",
c = e.createElement("iframe"),
l = e.getElementById(r.target),
p = r && r.height_bias ? 4 + r.height_bias : 4,
u = !1,
f = parseInt(r.min_height, 10) ? parseInt(r.min_height, 10) : r.hide_form_extras && !r.default_form_title ? 304 : 386;

我几乎确定这一点，在这里我可以用分号替换逗号并将VAR语句添加到每行的开头，它会产生相同的结果，对吗？

var o;
var a;
var s = "https://widget.kiwitaxi.com";
var c = e.createElement("iframe");
var l = e.getElementById(r.target);
var p = r && r.height_bias ? 4 + r.height_bias : 4;
var u = !1;
var f = parseInt(r.min_height, 10) ? parseInt(r.min_height, 10) : r.hide_form_extras && !r.default_form_title ? 304 : 386;

2. 这对我来说真的很难，我无法做出任何解释

据我了解：

1. “o”被评估为 s + “/w”，然后与“-”连接，然后与“.html”连接？是否有任何条件应用于该字符串构建，我的意思是，这两个串联中的任何一个都可以按此代码中的条件应用吗？
2. 比较 == 运算符在语句（“en”== r.language...部分）中做什么，哪个变量接收该结果？或者这只是一个混淆技巧？

3. 最后一个，在最后一个逗号之后，r.banner_id || (r.banner_id = "22995c4e");这是一个作业，这很清楚，但这部分中的其他内容有什么意义呢？这里的赋值是按条件进行的吗（如果 r.banner 不是 undefined-or-null-or-false）？

   o = s + "/w", "en" == r.language && (o += "-" + r.language.toString().toLowerCase()), ("biletik" == r.theme || "ostrovok" == r.theme) && (o += "-" + r.theme.toString().toLowerCase()), o += ".html", r.banner_id || (r.banner_id = "22995c4e");

Answer 1

"en" == r.language && (o += "-" + r.language.toString().toLowerCase()),

哦...那条线很棘手。

因此，例如：如果您要编写

var myVar = false && thisFunctionThrowsError()

，其中函数在调用时会抛出异常，那么实际上 not 返回错误 - 因为＆符号后面的任何内容都不会被评估。这称为短路评估。在这种情况下，有人把他检查

&&

比较结果的部分删掉了，只用它来判断是否跑右边。

所以，如果我写：

"biletik" == r.theme && (o += "-");

这意味着仅当

o

时才会向

r.theme == 'biletik'

添加破折号。

最后一行相反；看起来它是一个惰性初始化器。如果

r.banner_id

为 null，则计算结果为 false - 因此它运行

||

的第二部分，将其初始化为

22995c4e

。

Answer 2

我已经以更“传统”（非缩小）的方式写出了您的第二个代码块。 Katana314 的回答 提供了关于其工作原理和原因的精彩解释。

这是原始缩小代码和我将其扩展为的逐行比较：

1号线

缩小和扩大（相同）：

o = s + "/w";     // minified ends with comma instead of semicolon

2号线

缩小：

"en" == r.language && (o += "-" + r.language.toString().toLowerCase()),

扩展：

if (r.language == "en") {
    o += "-" + r.language.toString().toLowerCase();
}

3、4号线

缩小：

("biletik" == r.theme || "ostrovok" == r.theme) &&
(o += "-" + r.theme.toString().toLowerCase()),

扩展：

if (r.theme == "biletik" || r.theme == "ostrovok" ) {
    o += "-" + r.theme.toString().toLowerCase();
}

5号线

缩小和扩大（相同）：

o += ".html";     // minified ends with comma instead of semicolon

6号线

缩小：

r.banner_id || (r.banner_id = "22995c4e");

扩展：

if (!r.banner_id) {
    r.banner_id = "22995c4e";
}

这是扩展后的代码，其中注释跟踪

o

在经历不同步骤时的值。

我假设这两个代码块是相关的，所以我使用了解释中第一个代码块中的

s

的值。

// o = "https://widget.kiwitaxi.com" + "/w"
o = s + "/w";

if (r.language == "en") {
    // o += "-en"
    o += "-" + r.language.toString().toLowerCase();
}

if (r.theme == "biletik" || r.theme == "ostrovok" ) {
    // o += "-biletik"  or
    // o += "-ostrovok"
    o += "-" + r.theme.toString().toLowerCase();
}

o += ".html";

// if r.banner_id has not yet been set, set it now
if (!r.banner_id) {
    r.banner_id = "22995c4e";
}

因此，根据语言和主题，

o

可能具有以下值：

1. "https://widget.kiwitaxi.com/w.html"

   - 当没有语言和主题（或“en”以外的任何语言和“biletic”或“ostrovok”以外的任何主题）适用时。

2. "https://widget.kiwitaxi.com/w-en.html"

   - 当语言设置为“en”但没有主题适用时。

3. "https://widget.kiwitaxi.com/w-biletik.html"

   ，以及

4. "https://widget.kiwitaxi.com/w-ostrovok.html"

   - 当没有适用语言但设置了主题时。

5. "https://widget.kiwitaxi.com/w-en-biletik.html"

   ，以及

6. "https://widget.kiwitaxi.com/w-en-ostrovok.html"

   - 当语言设置为“en”并且应用两个主题之一时。