嘿！我是薩加爾。我喜歡編寫教學和文章來幫助開發人員更好地理解 JavaScript 的魔力。如果您對本文有任何疑問，請發表評論，我會回覆您，或在 Twitter @sagar_codes上找到我。
在這篇文章中，我們將討論 ES6 中引入的一個特性，即展開運算子和剩餘運算子。 🔥 🔥 🔥
我已經成為這三個點的忠實粉絲，它們可能會改變您在 JavaScript 中解決問題的風格。我們可以以兩種不同的方式使用三個點作為擴充運算子和剩餘運算子。
休息參數😴
使用剩餘參數，我們可以將任意數量的參數收集到一個陣列中，並用它們執行我們想要的操作。引入剩餘參數是為了減少由參數引起的樣板程式碼。 🙌
function myFunc(a, b, ...args) {
console.log(a); // 22
console.log(b); // 98
console.log(args); // [43, 3, 26]
};
myFunc(22, 98, 43, 3, 26);
在 myFunc 的最後一個參數中，前綴為 …，這將導致所有剩餘參數都放置在 javascript 陣列中。
其餘參數收集所有剩餘參數，因此在最後一個參數之前加入其餘參數是沒有意義的。剩餘參數必須是最後一個形參。
function myFunc(arg1, ...rest, arg2) {
// arg2 ?
}
其餘參數可以解構（僅限陣列），這意味著它們的資料可以解壓縮為不同的變數。
function myFunc(...[x, y, z]) {
return x * y* z;
}
myFunc(1) // NaN
myFunc(1, 2, 3) // 6
myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured)
傳播運算符✨
擴展運算子用於將可迭代物件（如陣列）的元素擴展到可以容納多個元素的位置。
function myFunc(x, y, ...params) { // used rest operator here
console.log(x);
console.log(y);
console.log(params);
}
var inputs = ["a", "b", "c", "d", "e", "f"];
myFunc(...inputs); // used spread operator here
// "a"
// "b"
// ["c", "d", "e", "f"]
組合陣列的方法一直有很多種，但展開運算子提供了一種組合陣列的新方法：
const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian'];
const specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];
const pizzas = [...featured, 'veg pizza', ...specialty];
console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'
透過擴充運算符，現在可以使用比 Object.assign() 更短的語法來淺複製（不包括原型）或合併物件。
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }
👉 結論
當我們在程式碼中看到三個點（…）時，它要么是剩餘參數，要么是擴展運算子。
有一個簡單的方法可以區分它們：
當三個點 (…) 位於函數參數末尾時，它是“剩餘參數”，並將參數列表的其餘部分收集到一個陣列中。
當三個點 (…) 出現在函數呼叫或類似情況中時，它被稱為“擴展運算符”，並將陣列擴展為列表。
謝謝閱讀。希望您喜歡這篇文章，歡迎按讚、留言或與您的朋友分享這篇文章。
😄 快樂編碼…
原文出處：https://dev.to/sagar/three-dots---in-javascript-26ci
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式