JavaScript展开运算符和剩余运算符的区别

 

JavaScript使用符号三个点（...）作为剩余运算符和展开运算符，不过这两个运算符是有区别的。

 

最主要的区别就是，剩余运算符将用户提供的某些特定值的其余部分放入JavaScript数组中，而展开运算符则将可迭代的对象展开为单个元素。

 

例如下面这段代码，其中使用了剩余运算符将部分值存放到数组中：

 

 

// Use rest to enclose the rest of specific user-supplied values into an array:

function myBio(firstName, lastName, ...otherInfo) { 

  return otherInfo;

}

 

// Invoke myBio function while passing five arguments to its parameters:

myBio("Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male");

 

// The invocation above will return:

["CodeSweetly", "Web Developer", "Male"]

 

查看运行结果

 

上面的代码中，我们使用...otherInfo将传入函数myBio()参数中的剩余部分"CodeSweetly"，"We Developer"和"Male"存放到数组中。

 

然后我们再来看下面这个例子，其中使用了展开运算符：

 

 

// Define a function with three parameters:

function myBio(firstName, lastName, company) { 

  return `${firstName} ${lastName} runs ${company}`;

}

 

// Use spread to expand an array’s items into individual arguments:

myBio(...["Oluwatobi", "Sofela", "CodeSweetly"]);

 

// The invocation above will return:

“Oluwatobi Sofela runs CodeSweetly”

 

查看运行结果

 

上面的代码中，我们使用展开运算符（...）将数组["Oluwatobi", "Sofela", "CodeSweetly"]的内容逐一展开并传递给函数myBio()的参数。