摘要：Three dots ( … ) in JavaScript。
本文分享自華為雲社群《JavaScript 裡三個點 ... 的用法》，作者： Jerry Wang 。
使用 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)
展開運運算元用於將可迭代物件（如陣列）的元素擴充套件到可以容納多個元素的位置。
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 引數，要麼是展開運運算元。
有一個簡單的方法來區分它們：