非函数 Javascript 代码块中的返回值答案

【问题标题】：Return value in non-function Javascript code block非函数 Javascript 代码块中的返回值
【发布时间】：2019-04-26 09:55:57
【问题描述】：

我正在尝试弄清楚 D3 库中 Mike Bostock 的箱线图示例中发生了什么。这是 Observable 笔记本中的代码：https://observablehq.com/@d3/box-plot

其中有一个看起来不是函数定义但有返回值的代码块：

chart = {
    const svg = d3.select(DOM.svg(width, height));

    const g = svg.append("g")
        .selectAll("g")
        .data(bins)
        .join("g");

    // [...]

    return svg.node();
}

return 不在函数定义中时有什么作用或含义？

【问题讨论】：

如果我记得，有一次我读到 ES6 或带有 Babel 的东西如何允许函数之外的返回。
我相信这只是 observablehq 的做法，更多信息在这里 -> observablehq.com/@observablehq/introduction-to-code IOW：它只是他们创建的一个简单的自定义转译器，它不是标准的 JS。
那不是普通的 JS 块，那是一个函数。正如 observable 的介绍所说，“要理解反应性，请将每个单元格视为一个函数。例如，单元格 sum = a + b 变成一个以 a 和 b 作为参数并返回它们的总和的函数；”我>。然后：“单元格有两种主要形式：表达式和块 [...] 块被大括号 { 和 } 包围，用于更复杂的定义”.
有趣的是，这是本周第二次有人询问那个 "strange block" 在 Observable 中返回的东西。我不太愿意写答案，因为我真的不认为这对 Q/A 适合 S.O.，但如果这种趋势继续下去，我认为需要一个正式的答案。
感谢您将我指向这里。看起来这种趋势确实还在继续，答案很难找到。它困扰了我一个星期，但没有找到任何答案，最后我问了一个类似的问题。

标签： javascript d3.js observablehq

【解决方案1】：

是的，正如评论者所建议的，这是 Observable 特有的语法。您所看到的单元格使用了一个块，如mentioned in the Introduction to Code。

相对于其他 JavaScript，您可以如何看待它，它有点像 IIFE，但需要额外考虑的是，如果它引用其他单元格，它会自动解析它们。所以在原生 JavaScript 中，这会是这样的：

chart = (() => {
    const svg = d3.select(DOM.svg(width, height));

    const g = svg.append("g")
        .selectAll("g")
        .data(bins)
        .join("g");

    // [...]

    return svg.node();
})()

事实上，这就是他们编译的大致目标。特定的语法是这样的，因为它意味着它是在引用更改时运行的代码 - 有关详细信息，请参阅how Observable runs。与 IIFE 不同，Observable 中的一个单元格可能会运行多次，如果它引用的东西（例如生成器或 Promise）发生了变化。

【讨论】：