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

Question

我正在尝试弄清楚 D3 画廊中 Mike Bostock 的箱形图示例中发生了什么。这是 Observable notebook 中的代码: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

是的，正如评论者所建议的，这是 Observable 特有的语法。您看到的是使用 block 的单元格，如 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有关详细信息。与 IIFE 不同，Observable 中的一个单元可能会运行多次，如果它引用的某些东西(如生成器或 Promise)发生变化。