当返回语句和对象之间有换行符时,Javascript 函数无法返回对象?

IT技术 javascript
2021-02-03 20:24:54

这是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'}是在自己的新行中。我期望解析器忽略空格?

2个回答

tl;dr换行符导致第二个函数中出现“未定义”。JavaScript 在很多情况下不需要分号,只是在某些上下文中假设它们(自动分号插入)。


在某些情况下,为了避免这个 ASI 问题并出于美观原因,我使用了所谓的分组运算符例如,使用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"]
  ]
];

并且它们最终的行数相同。但这是一个美学问题,真的。


分组运算符只计算其中的任何表达式。您通常会在立即调用函数表达式中看到这一点,您需要将通常是函数声明的内容转换为表达式,然后可以立即调用表达式(因此得名)。然而,分组运算符的一个可能鲜为人知的特性是它也可以采用逗号分隔的表达式列表,例如

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

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

更糟糕的是,Chrome/Firefox 解释行尾的方式和 IE 解释它的方式之间存在解析差异。
2021-03-19 20:24:54
ASI 应该被废除。除了遗留代码之外,它没有任何存在的理由。return \n (exp);应该和var foo = \n (exp);
2021-03-25 20:24:54
作为一个很好的规则......在 JavaScript 中始终将 return 语句保留在一行。
2021-03-31 20:24:54
@JonB:有吗?你能提供一些例子吗?
2021-04-07 20:24:54

接受的答案似乎是正确的。

但是,我发现在函数 arg 开括号处带有换行符的返回行的这种变体确实有效:

myFunction(){
  return myOtherFucntion(
           myArg);
}

而另一个在'.'之前换行的变体 点运算符也有效:

myFunction(){
  return myObject
           .myObjectFunction();
}

(我的例子的风格/可读性显然有点奇怪,但尽量只注意他们得出的结论,并在你认为合适的时候运用你自己的风格)。