JavaScript中的“...”（三个点）是什么？

Question

我从这篇文章中了解到这个东西。

function StoreMixin(...stores) { // what is "..."
  var Mixin = {
    getInitialState() {
      return this.getStateFromStores(this.props);
    },
    componentDidMount() {
      stores.forEach(store =>
        store.addChangeListener(this.handleStoresChanged)
      );
      this.setState(this.getStateFromStores(this.props));
    },
    componentWillUnmount() {
      stores.forEach(store =>
        store.removeChangeListener(this.handleStoresChanged)
      );
    },
    handleStoresChanged() {
      if (this.isMounted()) {
        this.setState(this.getStateFromStores(this.props));
      }
    }
  };
  return Mixin;
}

请用示例代码解释什么是“...”。谢谢！

- Nicolas S.Xu

---

这个回答解决了你的问题吗？ES2015 / ES6中的Spread语法和Rest参数 - Henke

Answer 1

在这个示例中，... 是一个Rest参数，它是一种语法，允许我们将不定数量的参数表示为一个数组。

它与展开语法有些相似（或者不相似 :)），但并不完全相同。

在您的示例中，内部的stores参数是一个数组。如果像StoreMixin(1,2,3)这样调用function StoreMixin(...stores)，那么stores将是[1, 2, 3]等等。

- acdcjunior

---

谢谢，这是让我困惑的部分。由于语法相同，JavaScript 如何知道我想将所有参数放入数组（Rest 参数），还是将对象解构为变量（Spread 语法）？如果它们都用于函数参数。 - Nicolas S.Xu

@NicolasS.Xu - 函数参数的解构不是相同的语法。对于解释器来说很容易区分。 - jfriend00

实际上，只有剩余参数可以在函数参数声明中使用。你不能在那里使用扩展运算符。但是，在其他地方，扩展运算符则被广泛使用。 - acdcjunior

@acdcjunior 我明白了。 "..." 在这里是一样的，但在函数定义中它是“rest”操作符，在函数调用中则使用“spread”。哎呀...非常感谢！ - Nicolas S.Xu

最好不要将其视为运算符。它是函数声明语法的一部分，在这个上下文中它只有一个意思。Spread 是调用和数组语法的一部分，在这个上下文中省略号只能表示展开。 - loganfsmyth

@NicolasS.Xu：考虑 ()。它用于三种不同的情况：函数定义、函数调用和作为分组运算符。上下文可以清楚地表明 () 的含义。 - Felix Kling