扩展运算符在此 javascript 代码中的作用是啥？

Posted 2023-02-22

【中文标题】扩展运算符在此 javascript 代码中的作用是啥？

【英文标题】：What is the role of the spread operator in this javascript code?扩展运算符在此 javascript 代码中的作用是什么？

【发布时间】：2021-03-29 21:37:26

【问题描述】：

今天看了this article的medium，对下面的spread算子看不懂。

我知道扩展运算符用于接收数组作为函数中的参数。在上面的代码中，展开运算符是做什么的？将对象转换为数组？

【问题讨论】：

spread 不是运算符。

你读过关于传播的MDN article吗？显然不是。

【参考方案1】：

我知道扩展运算符用于接收数组作为 函数中的参数

在这种情况下，三个点... 被称为rest parameters syntax，而不是spread syntax。在您问题中包含的代码中，使用三个点... 的上下文称为spread syntax。

在上面的代码中，展开运算符的作用是什么？

它遍历Set 并传播（添加）Set 中的条目到一个新数组中

下面的代码 sn-p 显示了一个简单的例子：

const set = new Set([1,2,3]);
const newArr = [...set];

console.log(newArr);

【讨论】：

感谢您的评论。我知道... 有两种不同的语法。

【参考方案2】：

扩展运算符与数组语法 ([]) 相结合，从 Set 中获取值，并且由于没有更好的术语，将它们展开，因此您得到一个包含 Set 中所有值的数组。最终结果是将一个数组转换为另一个包含原始数组唯一值的数组。

【参考方案3】：

让我们逐行查看。

var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]

这将创建一个数组entries，其中包含一些数字列表。

现在，当我们这样做时，new Set(entries)，我们从 entries 数组创建了一个 Set。 Set 是您可能已经知道的不同元素的集合。

因此，new Set(entries) 给了我们来自entries 的Set，如下所示： Set(8) 1, 2, 3, 4, 5, …

现在，... 运算符将 Set 中的不同元素展开以创建一个数组，即行 - var unique_entries = [...new Set(entries)]

【讨论】：

感谢您的评论。我现在明白了！