如何区分JavaScript中的展开运算符和剩余运算符？

Question

语法是相同的，那么JavaScript在底层如何区分这两者呢？

它是根据被操作的变量的数据类型来判断吗？还是根据变量的使用位置来判断？或者两者都不是？

Answer 1

JavaScript解析器通过分析出现三个点的语法上下文来确定。

它会考虑这3个点是否与数组字面量、函数调用或函数参数一起使用。

对于扩展运算符：当在数组字面量和函数调用中使用3个点时，它被视为扩展运算符。

对于剩余参数运算符：当在函数定义的参数中使用3个点时，它被视为剩余参数运算符。

Answer 2

... 不是一个运算符。它是主要的语法，就像在 for 语句中的 () 一样（它们是 for 语法的一部分，而不是分组运算符的实例）。运算符不能像展开和剩余语法那样工作。

解析器知道你在使用哪个，是因为你在使用它的位置，因为每个位置只有一个有效，另一个位置无效。例如：

// 1
const [first, ...rest] = someArray;
// 2
const { a, ...others } = someObject;
// 3
function example(p1, ...others) {
    // ...
}

...很明显你在两种情况下都在使用剩余语法，因为它被用在解构模式（1 和 2）和参数列表（3）中。

而对于：

// 1
const x = [...someIterable];
// 2
const o = { ...someObject };
// 3
example(...someIterable);

...很明显是展开，而不是剩余，因为你在数组字面量（1）、对象字面量（2）和函数调用的参数列表（3）中使用它。