JavaScript 省略号（三个点 (…)）
嗨！我是 Sagar。我喜欢写教程和文章，帮助开发者更好地理解 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/two-dots---in-javascript-26ci