Javascript中的...是什么作用？

Question

我正在学习VueJs，在这个沙盒https://codesandbox.io/s/o29j95wx9中，它有以下代码行

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    }
  },
  computed: {
    listeners () {
      return {
        // Pass all component listeners directly to input
        ...this.$listeners,
        // Override input listener to work with v-model
        input: event => this.$emit('input', event.target.value)
      }
    }
  }
}
</script>

...在...this.$listeners,中的作用是什么？我试过搜索但每个搜索引擎都会过滤掉该查询，我不知道它叫什么名字。我还看到它在vuex中被这样使用。

computed: {
   ...mapGetters({
      currentData: 'viewerGetCurrentDocument',
      folders: 'viewerGetFoldersList'
   }),

- Trevor

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax - Niet the Dark Absol

在上面的例子中，...this.$listeners 中的 ... 就像是 Object.assign，因为你正在将对象（this.$listeners）的键/值映射到新对象上。 （无论是添加还是覆盖您返回的新对象上的 input 属性。） - bradcush

还可能是 React 中的这三个点是什么意思？ 的重复问题。 - Igor

Answer 1

这被称为展开运算符，更多信息可以在此处查看https://davidwalsh.name/spread-operator

您可以组合数组并合并对象。

还可以在函数声明参数中使用它：

function f(...args) {
  // args is array here
}

它可以在多种情境下使用，但您可以在链接中进行研究。

- user2693928

---

谢谢，有 ES5 的等价物吗？ - Trevor

并不是因为语法上的问题。您可以使用BabelJS将ES6转换为ES5，或者使用常规的ES6。对于等效项，这将非常有帮助 https://github.com/addyosmani/es6-equivalents-in-es5 - user2693928

Answer 2

这是展开运算符。它将对象或数组解构为其组成的属性或元素，以便它们可以在通常使用逗号分隔这些内容的地方使用，例如函数参数列表或对象和数组文字中。

- Will