JavaScript 中的扩展运算符和剩余运算符

JavaScript 中的 ... 运算符是 ES6 中的重要更新之一。

此运算符可帮助你完成许多以前需要多行代码、不熟悉的语法等的事情。

在这篇简短的文章中,你将了解 ... 运算符的含义和作用。我们将通过一些示例来展示可能的用例,并了解你过去是如何执行这些操作的。通过这种方式,你将看到这三个点能为 JavaScript 开发人员提供什么。

... 运算符在 JavaScript 中有两种不同的含义,语法非常相似,但你在不同的上下文中应该使用相应的一种。... 的这两种不同用途是扩展运算符和剩余运算符。

如何在 JavaScript 中使用 Spread(扩展)运算符

顾名思义,在 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]

这是剩余运算符及其值的一个很好的表示形式:

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 团队在命名方面做得很好,他们定义了 ... 的不同使用方法。

我们使用扩展运算符将数组值或可迭代对象扩展为数组或对象,使用剩余运算符来收集作为数组传递给函数的剩余元素。

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 中的含义,你还看到了使用 ... 运算符及其两个不同含义/用例的各种实例。