将 Array(destructured) 添加到 Set 中的功能方法是什么答案

【问题标题】：What will be the functional approach to add an Array(destructured) into Set将 Array(destructured) 添加到 Set 中的功能方法是什么
【发布时间】：2018-07-31 14:09:21
【问题描述】：

我想在 Set 中添加一些数组（仅它们的内容）。喜欢：

我的数组：

var arr1 = [55, 44, 65];
var arr2 = [22, 11, 33];

我希望我的 Set 是：[55, 44, 65, 22, 11, 33]

我尝试过的：

var arr1 = [55, 44, 65];
var arr2 = [22, 11, 33]
var set = new Set();
set.add(arr1)
set.add(arr2)
set.add([8, 5])
console.log(set);

它添加三个数组而不是单个数字。

所以，我也尝试过这样做：JSFiddle

var arr1 = [55, 44, 65];
var arr2 = [22, 11, 33]
var set = new Set();
set.add(...arr1)
set.add(...arr2)
set.add(...[8, 5])
console.log(set);

但是，它只将数组的第一个元素添加到 Set 中。

我的问题是在我的第二种方法中，为什么只有数组的第一个元素被添加到 Set 中？
如何将数组的所有元素添加到集合中而不遍历每个数组元素并将它们添加到 Set（如使用 for ， map 或 forEach)？（如果可能的话）

注意：在我的实际问题中，我确实不会一次获取所有数组。

【问题讨论】：

var set = new Set(arr1.concat(arr2, [8, 5])) 怎么样？ Updated fiddle
var set = new Set([...arr1, ...arr2, 8, 5]); 或 var set = new Set([...arr1, ...arr2, ...[8, 5]]); 如果您想明确定义 3 个数组
@JaromandaX 在我的实际问题中，我确实不会一次获取所有数组。
问题不清楚：p
或...一些猴子修补坏处...Set.prototype.addMulti = function(...args) { [...args].forEach(x => this.add(x));}; ...然后使用set.addMulti(...arr1)

标签： javascript arrays ecmascript-6 set destructuring

【解决方案1】：

正如@Rajesh 所说，我相信您可以将数组连接成一个，并从中创建一个集合。

var set = new Set(arr1.concat(arr2.concat([8, 5])));

编辑：要在之后添加另一个数组，您可能可以在添加每个数组时创建一个新集合，并将它们连接起来，如 here 所示。

set = new Set([...set, ...newSet])

或者

set = new Set(Array.from(set).concat(Array.from(newSet)))

如此完整的例子：

var arr1 = [55, 44, 65];
var arr2 = [22, 11, 33];
var set = new Set(arr1.concat(arr2.concat([8, 5])));
var arr3 = [10, 20];
var newSet = new Set(arr3);
set = new Set(Array.from(set).concat(Array.from(newSet)));
set.forEach(function(element) {
  console.log(element);
});

输出：

> 55
> 44
> 65
> 22
> 11
> 33
> 8
> 5
> 10
> 20

【讨论】：

在我的实际问题中，我确实不会一次获取所有数组。
@BlackBeard 您可以在添加每个集合时创建一个新集合，然后将它们连接起来，如 here 所示。
@BlackBeard 如果你一开始没有得到所有的数组，你不能立即从它们创建你的集合。如果您需要这样做，现在可以稍后强制添加项目。
@PorygonZRocks 感谢您的信任，但正如您可能已经阅读的那样，这是部分答案。 OP 已澄清所有数组在开始时都不存在。这使得建议的方法适合 cmets 而不是回答
@Rajesh OP 在我发帖时尚未澄清，或者至少在我开始写作时没有澄清。

【解决方案2】：

如评论，你可以试试

var set = new Set(arr1.concat(arr2, [8, 5]))

你可以测试一下here。

但是，它只将数组的第一个元素添加到 Set 中。

如果您引用 docs，它会说，.add 只接受 1 个参数。因此，当您执行 ...[8, 5] 时，它会传播并添加第一个值并忽略剩余的值。

在我的实际问题中，我没有一次得到所有数组。

在这里，您可以将集合转换回数组并创建新集合：

var set2 = new Set(Array.from(set).concat([8, 5]))

您可以查看here

您还可以使用扩展运算符，例如：

var set2 = new Set([...set].concat([8, 5]))

Updated Fiddle 来测试它，但作为个人喜好，我更喜欢Array.from，因为它更具可读性。你可以选择任何你喜欢的方式。

【讨论】：

扩展语法（不是“解构”！）only makes sense when having other elements in the array literal、Array.from(set) 确实应该优于 [...set]。但我们确实在这里有连接值，所以new Set([...set, 8, 5]) 是。
注意：... 不是，也不能是运算符，既不能用于展开也不能用于休息。它可以做运营商做不到的事情。 Details.

【解决方案3】：

如果你不想创建一个新的集合，循环并没有错：

var arr1 = [55, 44, 65];
var arr2 = [22, 11, 33]
var set = new Set();
var setAdd = set.add.bind(set);
arr1.forEach(setAdd);
arr2.forEach(setAdd);
[8, 5].forEach(setAdd);
console.log(Array.from(set)); // StackOverflow snippet console can't print sets yet
// [55, 44, 65, 22, 11, 33, 8, 5]

【讨论】：