tl;dr换行符导致第二个函数中出现“未定义”。 JavaScript 在很多情况下不需要分号,只是在某些上下文中假设它们(自动插入分号 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion).
在某些情况下,为了避免此 ASI 问题并出于美观原因,我使用所谓的分组运算符 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Grouping。例如,与hoquet https://github.com/tjb1982/hoquet模板化 DSL(它将数组作为 s-表达式编译成 HTML),我喜欢对数组进行分组,以便它们清楚地显示 HTML 结构:
return (
["ul"
, ["li"
, ["span", {class: "name"}, this.name]
, ["span", {id: "x"}, "x"]
]
]
);
对我来说,这似乎比
return [
"ul",
[
"li",
["span", {class: "name"}, this.name],
["span", {id: "x"}, "x"]
]
];
他们最终得到相同数量的行。但这确实是一个美学问题。
分组运算符仅计算其中的任何表达式。你通常会看到这个立即调用的函数表达式 https://en.wikipedia.org/wiki/Immediately-invoked_function_expression#Usage,您需要在其中转换通常是函数的内容宣言进入一个表达,然后可以立即调用(因此得名)。然而,分组运算符的一个可能鲜为人知的功能是它还可以采用逗号分隔的表达式列表,例如
function() {
return (
doSideEffects(),
console.log("this is the second side effect"),
1 + 1
);
}
在本例中,它计算每个表达式并仅返回最后一个 (1 + 1)。