… in JavaScript – JS 中的三点运算符

Posted on by

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: "Male" };

let user = { ...userName, ...userSex };

console.log(user); // { name: "John Doe", sex: "Male" }

注意：在一个键具有另一个属性的情况下，最后一个属性会覆盖第一个实例：

let userName = { name: "John Doe" };
let userSex = { sex: "Female", name: "Jane Doe" };

let user = { ...userName, ...userSex }; // { name: "Jane Doe", sex: "Female" }

如何使用 set 方法检索唯一元素

使用扩展运算符的一种重要情况是，当您尝试将唯一元素从一个数组检索到另一个数组时。

例如，假设我们有一个水果数组，其中我们重复了一些水果，我们希望将这些水果拉入一个新数组并避免重复。我们可以使用该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 运算符

另一方面，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]

这是 rest 运算符及其值的一个很好的表示形式：

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 中展开和休息运算符的区别

此时，您可能会感到困惑，因为这两种方法看起来非常相似。但是 JS 团队在命名方面做得很好，因为它定义了每个使用的用途...。

我们使用扩展运算符将数组值或可迭代对象扩展为数组或对象。

虽然我们使用 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 中的含义。您还看到了可以使用三点运算符及其两个不同含义/用例的各种实例。

享受编码的乐趣！

推荐阅读：