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.