JavaScript 里三个点 …，可不是省略号啊···
摘要：Three dots ( … ) in JavaScript。
本文分享自华为云社区《JavaScript 里三个点 … 的用法》，作者： Jerry Wang 。
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.
