JavaScript三个点语法

Question

我正在使用 Vuetify 来开发一个 Vue 应用，在 这个文件 中，我看到了一种非常奇怪的语法，但我不知道它是什么。

第38行：

const data = {
    attrs: { disabled: this.disabled },
    class: this.classes,
    props: {},
    directives: [{
      name: 'ripple',
      value: this.ripple || false
    }],
    on: {
      ...(this.$listeners || {}),  // <<<---- here
      click: this.click
    }
  }

有人能告诉我那三个点是什么吗？如果有相关的文章就更好了。谢谢。

- Developerium

---

https://dev59.com/w10Z5IYBdhLWcg3wzC5W - Dave Newton

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator - jeznag

我只是会搜索“JavaScript 三个点”。 - Dave Newton

Answer 1

这就是展开运算符！它可以获取对象的所有属性。

在这个例子中，它会复制对象而不改变它。

- xavdid

---

它将进行浅复制，这具有影响。 - Dave Newton

Answer 2

这是一个在JavaScript中用于对象和数组的ES6扩展运算符。在这里，提取了（this.$listeners || {}）的返回值。将此返回值与click: this.click组合，添加到另一个空对象中，在"on:"后面。

- Alison Z