如何區分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）中使用它。