当return语句和对象之间存在换行符时,Javascript函数无法返回对象？

Question

这是jsfiddle

完整代码:

function foo1(){
    return {msg: "hello1"};
}
function foo2(){
    return
    {msg: "hello2"};
}

// output = "foo1 =  {"msg":"hello1"}"
console.log('foo1 = ' , JSON.stringify(foo1())); 

//output = " foo2 =  undefined "
console.log('foo2 = ' , JSON.stringify(foo2()));

两者之间的区别在于,在foo2中,{msg: 'hello'}它位于自己的新行中.我期待解析器忽略空格？

Answer 1

tl; dr换行符导致第二个函数中的'undefined'.JavaScript在很多情况下不需要分号,只是在某些上下文中假定它们(自动分号插入).

在某些情况下,为了避免这个ASI问题和美观原因,我使用所谓的分组操作符.例如,使用hoquet模板DSL(它将Arrays编译为s表达式转换为HTML),我喜欢对Arrays进行分组,以便它们清楚地显示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"]
  ]
];

并且他们最终得到相同数量的线.但这确实是一个美学问题.

分组运算符只是评估其中的任何表达式.您通常会使用" 立即调用的函数表达式"来查看此函数,您需要将通常为函数声明的函数转换为表达式,然后可以立即调用它(因此,名称).但是,分组运算符的一个可能鲜为人知的特性是它也可以采用逗号分隔的表达式列表,例如

function() {
  return (
    doSideEffects(),
    console.log("this is the second side effect"),
    1 + 1
  );
}

在这种情况下,它会评估每个表达式并仅返回最后一个(1 + 1).