Question

我正在尝试弄清Mike Bostock D3画廊的Box Plot示例中发生的情况。以下是可观察笔记本中的代码：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特有的语法。您看到的是一个使用块的单元格，例如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）发生更改，则可能会运行多次。

非功能Javascript代码块中的返回值

1 个答案: