在可观察的笔记本中创建对象文字失败

Question

我正在尝试运行 O'Reilly 的 "Learning React" 书中的这个简单代码片段在 Observable 笔记本 (https://observablehq.com/) 中。

如果我在 Chrome 控制台中运行它有效（我可以定义对象然后运行 tahoe.print()），但是如果我尝试运行它在 Observable 中 SyntaxError: Unexpected Token 当运行连接单元格时我得到 SyntaxError: Unexpected Token。

Observable 有什么奇怪的地方阻止我创建这样的对象字面量吗？

tahoe = {
  resorts: ["Kirkwood","Squaw","Alpine"],
  print: function(delay=1000) {
    setTimeout(() => {
      console.log(this.resorts.join(", "))
    }, delay)
  }
}

这是带有代码的笔记本：https://observablehq.com/@jritch/simple-snippet-breaks-in-observable

Answer 1

Blex 指出要使其正常工作，您需要将对象括在括号中：

tahoe = ({
  resorts: ["Kirkwood","Squaw","Alpine"],
  print: function(delay=1000) {
    setTimeout(() => {
      console.log(this.resorts.join(", "))
    }, delay)
  }
})

Working snippet。

为了更全面地解释这是为什么，see this blogpost that outlines the differences between Observable and vanilla javascript：

Statements need curly braces, and return (or yield). A cell body can be a simple expression, such as a number or string literal, or a function call. But sometimes you want statements, such as for loops. For that you’ll need curly braces, and a return statement to give the cell a value. Think of a cell as a function, except the function has no arguments. For the same reason, you’ll need to wrap object literals in parentheses, or use a block statement with a return.

单元格的播放按钮图标旁边还有一个（有点难看）魔术棒小部件，如果您单击它，它会自动修复此问题：

在可观察的笔记本中创建对象文字失败

Creating object literal fails in observable notebook

javascript

object-literal