本教程將講解JavaScript中擴展運算符的多種用法，以及擴展運算符和剩餘運算符的主要區別。
JavaScript擴展運算符用三個點(...)表示，在ES6中引入。它可以將集合和數組中的元素展開成單個元素。
擴展運算符可以用於創建和克隆數組和對象、將數組作為函數參數傳遞、刪除數組中的重複項等等。
關鍵要點
語法
擴展運算符只能用於可迭代對象。它必須緊接在可迭代對象之前，沒有任何分隔。例如：
console.log(...arr);
函數參數
以Math.min()方法為例。此方法至少接受一個數字作為參數，並返回傳遞的參數中最小的數字。
如果您有一個數字數組，並且想要找到這些數字的最小值，如果沒有擴展運算符，您需要使用索引逐個傳遞元素，或者使用apply()方法將數組的元素作為參數傳遞。例如：
const numbers = [15, 13, 100, 20]; const minNumber = Math.min.apply(null, numbers); console.log(minNumber); // 13
請注意，第一個參數為null，因為第一個參數用於更改調用函數的this的值。
擴展運算符是將數組的元素作為參數傳遞給函數的一種更方便、更易讀的解決方案。例如：
const numbers = [15, 13, 100, 20]; const minNumber = Math.min(...numbers); console.log(minNumber); // 13
您可以在此在線示例中看到：
創建數組
擴展運算符可以用於從現有數組或其他包含Symbol.iterator()方法的可迭代對象創建新數組。這些是可以使用for...of循環迭代的對象。
例如，它可以用於克隆數組。如果您只是將現有數組的值賦給一個新數組，那麼對新數組進行更改將更新現有數組：
console.log(...arr);
通過使用擴展運算符，可以將現有數組克隆到一個新數組中，對新數組進行的任何更改都不會影響現有數組：
const numbers = [15, 13, 100, 20]; const minNumber = Math.min.apply(null, numbers); console.log(minNumber); // 13
需要注意的是，這只會克隆一維數組。它不適用於多維數組。
擴展運算符還可以用於將多個數組連接成一個數組。例如：
const numbers = [15, 13, 100, 20]; const minNumber = Math.min(...numbers); console.log(minNumber); // 13
您還可以將擴展運算符用於字符串，以創建一個數組，其中每個項目都是字符串中的一個字符：
const numbers = [15, 13, 100, 20]; const clonedNumbers = numbers; clonedNumbers.push(24); console.log(clonedNumbers); // [15, 13, 100, 20, 24] console.log(numbers); // [15, 13, 100, 20, 24]
創建對象
擴展運算符可以以不同的方式用於創建對象。
它可以用於淺克隆另一個對象。例如：
const numbers = [15, 13, 100, 20]; const clonedNumbers = [...numbers]; clonedNumbers.push(24); console.log(clonedNumbers); // [15, 13, 100, 20, 24] console.log(numbers); // [15, 13, 100, 20]
它還可以用於將多個對象合併成一個對象。例如：
const evenNumbers = [2, 4, 6, 8]; const oddNumbers = [1, 3, 5, 7]; const allNumbers = [...evenNumbers, ...oddNumbers]; console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]
需要注意的是，如果對象共享相同的屬性名稱，則將使用最後一個擴展對象的屬性值。例如：
const str = 'Hello, World!'; const strArr = [...str]; console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']
擴展運算符可以用於從數組創建對象，其中數組中的索引成為屬性，該索引處的數值成為屬性的值。例如：
const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}它還可以用於從字符串創建對象，類似地，字符串中的索引成為屬性，該索引處的字符成為屬性的值。例如：
const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}將NodeList轉換為數組
NodeList是節點的集合，這些節點是文檔中的元素。與數組不同，這些元素是通過集合中的方法（例如item或entries）訪問的。
您可以使用擴展運算符將NodeList轉換為數組。例如：
const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}刪除數組中的重複項
Set對像是一個只存儲唯一值的集合。與NodeList類似，可以使用擴展運算符將Set轉換為數組。
由於Set只存儲唯一值，因此它可以與擴展運算符配對以刪除數組中的重複項。例如：
const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}擴展運算符與剩餘運算符
剩餘運算符也是一個三點運算符(...)，但它用於不同的目的。剩餘運算符可以在函數的參數列表中使用，表示該函數接受未定義數量的參數。這些參數可以作為數組處理。
例如：
const str = 'Hello, World!';
const obj = { ...str };
console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}在此示例中，剩餘運算符用作calculateSum函數的參數。然後，您遍歷數組中的項目並將它們加起來以計算它們的總和。
然後，您可以將變量逐個作為參數傳遞給calculateSum函數，或者使用擴展運算符將數組的元素作為參數傳遞：
const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeArray[0]); // <div>...</div>結論
擴展運算符允許您使用更少的代碼行完成更多操作，同時保持代碼的可讀性。它可以用於可迭代對象，將參數傳遞給函數，或從其他可迭代對象創建數組和對象。
相關閱讀:
JavaScript擴展運算符常見問題解答 (FAQs)
(此處應補充與原文FAQ內容相似的，但措辭不同的常見問題解答，保持內容一致性，並避免直接照搬原文)
以上是快速提示：如何在JavaScript中使用傳播操作員的詳細內容。更多資訊請關注PHP中文網其他相關文章！
