JavaScript中的三点运算符是与ES6一起运来的重大更新之一。
这个运算符(...)可以帮助你实现很多以前需要很多行代码、不熟悉的语法等的事情。
在这篇短文中，你将了解三点运算符的含义和作用。我们将通过一些例子来展示可能的使用情况，我们将看看你过去是如何执行这些操作的。这样你就会看到，作为一个JavaScript开发者，三点为你提供了什么。
三点运算符在JavaScript中具有两种不同的含义。语法非常相似，但你在不同的背景下使用每一种。... ，这两种不同的用法是传播和休息运算符。
如何在JavaScript中使用展开运算符
在JavaScript中，你使用传播操作符在一个指定的接收器内扩展一个可迭代的对象，正如它的名字所示。
这个接收者可以是任何东西，比如一个对象，一个数组，等等。而迭代器可以是任何我们可以循环的东西，包括一个字符串、一个数组、一个对象，等等。
展开运算符的语法
const newArray = ['firstItem', ...oldArray];
现在让我们来看看我们可以使用传播操作符的各种情况。
如何用传播操作符复制一个数组
当我们想把一个特定数组的元素复制到一个新的数组中而不影响原数组时，我们可以使用传播操作符。
下面是一个例子：
let studentNames = ["Daniel", "Jane", "Joe"];
let names = [...studentNames];
console.log(names); // ["Daniel","Jane","Joe"]
这为我们节省了编写循环语句的时间：
let studentNames = ["Daniel", "Jane", "Joe"];
let names = [];
studentNames.map((name) => {
names.push(name);
});
console.log(names); // ["Daniel","Jane","Joe"]
如何用传播操作符复制一个对象
正如我们对数组所做的那样，你也可以使用一个对象作为传播操作符的接收器：
let user = { name: "John Doe", age: 10 };
let copiedUser = { ...user };
console.log(copiedUser); // { name: "John Doe", age: 10 }
而以前的做法是这样使用Object.assign() 方法：
let user = { name: "John Doe", age: 10 };
let copiedUser = Object.assign({}, user);
console.log(copiedUser); // { name: "John Doe", age: 10 }
如何用传播操作符串联或合并数组
当我们有两个或更多的数组想合并成一个新的数组时，我们可以用传播操作符轻松做到这一点。它可以让我们从一个数组中复制元素：
let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let allNames = [...femaleNames, ...maleNames];
console.log(allNames); // ["Daniel","Peter","Joe","Sandra","Lucy","Jane"]
同样重要的是，我们可以对有多少个数组都使用同样的方法。我们还可以在数组内添加单个元素：
let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let otherNames = ["Bill", "Jill"];
let moreNames = [...otherNames, ...femaleNames, ...maleNames];
let names = [...moreNames, "Ben", "Fred"];
这使我们省去了使用复杂语法的压力，比如concat() 方法：
let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let otherNames = ["Bill", "Jill"];
let allNames = femaleNames.concat(maleNames);
let moreNames = femaleNames.concat(maleNames, otherNames);
如何用传播操作符串联或合并对象
我们也可以用传播操作符串联对象，就像我们用数组那样：
let userName = { name: "John Doe" };
let userSex = { sex: "Female" };
let user = { ...userName, ...userSex };
console.log(user); // { name: "John Doe", age: 10 }
注意：在一个键有另一个属性的情况下，最后一个属性会覆盖第一个实例：
let userName = { name: "John Doe" };
let userSex = { sex: "Female", name: "Jane Doe" };
let user = { ...userName, ...userSex }; // { name: "Jane Doe", age: 10 }
如何用设置方法检索唯一元素
当你使用传播操作符的一个重要情况是，你试图从一个数组中检索唯一元素到另一个数组中。
例如，假设我们有一个水果数组，其中有一些水果是重复的，我们想把这些水果拉到一个新的数组中，避免重复。我们可以使用set() 方法，同时使用传播操作符，将它们列在一个新的数组中：
let fruits = ["Mango", "Apple", "Mango", "Banana", "Mango"];
let uniqueFruits = [...new Set(fruits)];
console.log(uniqueFruits); // ["Mango","Apple","Banana"]
如何在函数调用中使用传播操作符传递数组元素
当你有一个接收数字的函数，并且你有这些数字作为一个数组的元素：
let scores = [12, 33, 6]
const addAll = (a, b, c) => {
console.log(a + b + c);
};
你可以使用传播操作符将这些元素作为参数传递到函数调用中，使用传播操作符：
let scores = [12, 33, 6]
const addAll = (a, b, c) => {
console.log(a + b + c);
};
addAll(...scores); // 51
一个旧的方法是使用apply() 方法：
let scores = [12, 33, 6]
const addAll = (a, b, c) => {
console.log(a + b + c);
};
addAll.apply(null, scores); // 51
如何使用展开运算符将字符串分割成字符
假设我们有一个字符串。我们可以利用传播操作符将其分割成字符：
let myString = "freeCodeCamp";
const splitString = [...myString];
console.log(splitString); // ["f","r","e","e","C","o","d","e","C","a","m","p"]
这与split() 方法类似。
let myString = "freeCodeCamp";
const splitString = myString.split('');
console.log(splitString); // ["f","r","e","e","C","o","d","e","C","a","m","p"]
如何在JavaScript中使用休止符
另一方面，rest运算符允许你将任何数量的参数组合成一个数组，然后对它们做任何你想做的事情。它使用一个数组来表示无限多的参数。
休止符的语法
const func = (first, ...rest) => {};
一个完美的例子可以说明这一点，如果我们有一个数字的列表，我们想用第一个数字作为乘数。然后我们想把其余数字的乘法值放在一个数组中：
const multiplyArgs = (multiplier, ...otherArgs) => {
return otherArgs.map((number) => {
return number * multiplier;
});
};
let multipiedArray = multiplyArgs(6, 5, 7, 9);
console.log(multipiedArray); // [30,42,54]
下面是休息运算符的一个很好的表示，以及它的值是什么样子的：
const multiplyArgs = (multiplier, ...otherArgs) => {
console.log(multiplier); // 6
console.log(otherArgs); // [5,7,9]
};
multiplyArgs(6, 5, 7, 9);
注意：rest参数必须是最后一个正式参数：
const multiplyArgs = (multiplier, ...otherArgs, lastNumber) => {
console.log(lastNumber); // Uncaught SyntaxError: Rest parameter must be last formal parameter
};
multiplyArgs(6, 5, 7, 9);
JavaScript中的Spread和Rest操作符的区别
在这一点上，你可能会感到困惑，因为这两种方法看起来很相似。但是JS团队在命名上做得非常好，因为它定义了... 的每种用法的作用。
我们使用spread操作符将数组的值或iterables分散到也许一个数组或对象中。
而我们使用Rest操作符来收集传递到函数中的剩余元素，作为一个数组：
const myFunction = (name1, ...rest) => { // used rest operator here
console.log(name1);
console.log(rest);
};
let names = ["John", "Jane", "John", "Joe", "Joel"];
myFunction(...names); // used spread operator here
结束语
在这篇文章中，你学到了三点运算符在JavaScript中的含义。你也看到了可以使用三点运算符的各种情况，以及它的两种不同含义/使用情况。
祝你编码愉快!
