Three dots ( … ) in JavaScript
Rest Parameters
使用 rest 參數，我們可以將任意數量的參數收集到一個數組中，然后用它們做我們想做的事情。 引入了其余參數以減少由參數引起的樣板代碼。
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 數組中。
rest 參數收集所有剩余的參數，因此在最后一個參數之前添加 rest 參數是沒有意義的。 其余參數必須是最后一個形參。
rest 參數可以解構（僅限數組），這意味着它們的數據可以解包為不同的變量。
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)
Spread Operators
展開運算符用於將可迭代對象（如數組）的元素擴展到可以容納多個元素的位置。
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 }
總結
當我們在代碼中看到三個點 (...) 時，它要么是 rest 參數，要么是展開運算符。
有一個簡單的方法來區分它們：
-
當三個點 (...) 位於函數參數的末尾時，它是“rest 參數”並將參數列表的其余部分收集到一個數組中。
-
當三個點 (...) 出現在函數調用或類似函數中時，它被稱為“擴展運算符”並將數組擴展為 list.