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

Question

我正在试图弄清楚Mike Bostock在D3画廊的箱形图示例中发生了什么。下面是一个可观察的笔记本中的代码：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不在函数定义中时，它的作用或含义是什么？

Answer 1

是的，正如评论者所建议的那样，这是一种特定于可观察的语法。你看到的是一个使用块的单元格，比如mentioned in the Introduction to Code。

相对于其他JavaScript，您如何看待这一点是因为它有点像IIFE，但增加了一个考虑因素，即如果它引用了其他单元格，它会自动解析它们。因此，在vanilla 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。与like不同，Observable中的单元可能会运行多次，如果它引用的内容发生变化，比如生成器或Promise。