如何将Set转换为Array？

Question

Set似乎是创建保证唯一元素的数组的好方法，但它不公开任何好的获取属性的方式，除了生成器[Set].values之外，该生成器的调用方式很尴尬，即mySet.values.next()。

如果您可以在集合上调用map和类似函数，那么这将是可以接受的。 但是您也不能这样做。

我尝试过Array.from，但似乎只能将类似数组（NodeList和TypedArrays？）对象转换为数组。 另一个尝试：Object.keys对于Set无效，而Set.prototype没有类似的静态方法。

所以问题是：是否有任何方便的内置方法可用于创建具有给定Set值的数组？（元素顺序并不重要）。

如果不存在这样的选项，那么可能有一个漂亮的惯用法一行代码来完成它吗？例如，使用for...of或类似方法？

- c69

---

亲爱的ESNext/ECMAScript开发者们，没有理由不在Map/Set上使用filter/map/reduce，谢谢 :) - Alexander Mills

Answer 1

如果没有这样的选项，那么也许有一个很好的成语化的一行代码可以做到这一点？例如使用for...of或类似方法吗？

实际上，有几种方法可以将Set转换为Array:

• 使用Array.from：

注意：对于TypeScript更安全。

const array = Array.from(mySet);

• 只需将集合放入数组中spreading：

注意：在使用TypeScript编译时，扩展Set存在问题（请参见issue #8856）。最好使用上面的Array.from。

const array = [...mySet];

• 老式的方法是遍历并推送到一个新数组中（Set有forEach）：

const array = [];
mySet.forEach(v => array.push(v));

• 之前，使用非标准的、现在已弃用的数组推导式语法：

const array = [v for (v of mySet)];

- adeneo

---

var array = [v for (v of mySet)]; 在 [tag:Chrome] 46 中无法工作。 - Eric

看起来Chrome从45版本开始支持。请参考以下链接： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from#AutoCompatibilityTable - amwinter

哪种方式更好？ - Vic

想要补充说明的是，当使用Typescript编译[...mySet]时存在问题（请参见此问题）。因此，如果你打算在不久的将来转换为Typescript，最好使用Array.from(mySet)以保证安全。 - Ivan Gozali

顺便提一下，如果有人关心速度问题，以下是从快到慢的排名：第一，老式（forEach/for of）；第二，Array.from（稍慢约5%）；第三，扩展运算符（稍慢约12%）。 - Cezar D.

Answer 2

通过 Angus Croll 的演讲 https://speakerdeck.com/anguscroll/es6-uncensored，我们发现可以使用 spread 运算符：

var myArr = [...mySet];

或者，另一种选择是使用Array.from：

var myArr = Array.from(mySet);

- c69

---

请参考 https://kangax.github.io/compat-table/es6/ 获取相对较新的支持情况表。目前，在所有桌面浏览器中，只有 Firefox 和 IE TP（又名 Spartan，又名 MS 非 IE 浏览器）支持 Array.from 和 ...。 - c69

зңӢиө·жқҘFirefoxжҳҜе”ҜдёҖж”ҜжҢҒArray.fromзҡ„жөҸи§ҲеҷЁгҖӮhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from - 425nesp

在这里，您可以为Chrome启用它 chrome://flags/#enable-javascript-harmony。请记住，这是实验性的，不要认为这是开发的好解决方案。 - sospedra

如果我的集合是对象，使用spread语法会克隆集合还是保留对象引用？（我想调用这些对象的方法，所以我需要它们保持相同，而不是克隆） - Juan Perez

Answer 3

假设您只是暂时使用 Set 来获取数组中的唯一值，然后转换回数组，请尝试使用以下代码：

_.uniq([])

这需要使用 underscore 或 lo-dash。

- aaronmgdr

---

不幸的是，唯一的跨浏览器解决方案。 - Marco Sulla

Answer 4

也许来晚了，但你只需要按照以下步骤进行：

const set = new Set(['a', 'b']);
const values = set.values();
const array = Array.from(values);

如果浏览器支持ES6或者您使用正确的填充程序(shim)来模拟上述功能，那么这应该可以毫无问题地工作。

编辑: 今天您可以使用@c69建议的方式：

const set = new Set(['a', 'b']);
const array = [...set]; // or Array.from(set)

- Roland

---

使用 set.entries() 看起来会得到一组键值对的数组。你可以使用 set.values() 得到纯数组。 - Shimon Rachlenko

@ShimonRachlenko 是的，用户确实要求了这一点。 - Roland

你可以使用 var array = Array.from(set);。 - Buffalo

这个答案是错误的。你不需要调用.entries或者.values。正如@Buffalo在上面提到的 - Array.from(set)就足够了。 - c69

@c69 这是真的。在回答时，Array.from()并没有按预期工作。但现在，展开运算符和Array.from()都可以正常工作了。 - Roland

Answer 5

使用展开运算符获取您想要的结果。

var arrayFromSet = [...set];

- Vignesh Murugan

Answer 6

“最简单的答案：只需在方括号内展开集合。”

let mySet = new Set()
mySet.add(1)
mySet.add(5)
mySet.add(5) 
let arr = [...mySet ]

结果：[1,5]

- Aljohn Yamaro

Answer 7

以下代码从一个数组中创建一个集合，然后使用...运算符。

var arr=[1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,];
var set=new Set(arr);
let setarr=[...set];
console.log(setarr);

- Ekram Mallick

---

这是什么？ - ZF007

这被称为扩展语法，实际上是两个不同的操作：(1) 在对象中 (2) 数组/函数参数列表中。后者遵循"迭代协议"：它调用Symbol.iterator方法，然后执行整个next()过程。另外，...也出现在两个类似的解构赋值语法中。 - Beni Cherniavsky-Paskin

Answer 8

在我的情况下，解决方案是：

var testSet = new Set();
var testArray = [];

testSet.add("1");
testSet.add("2");
testSet.add("2"); // duplicate item
testSet.add("3");

var someFunction = function (value1, value2, setItself) {
    testArray.push(value1);
};

testSet.forEach(someFunction);

console.log("testArray: " + testArray);

value1等于value2 => 集合中当前位置包含的值。相同的值将传递给两个参数

在IE11下工作。

- d0wn

Answer 9

做这件事的简单方法

 const array = [...new Set([1,1,2,3,3,4,5])]
    console.log(array)

- Irfan Habib

Answer 10

使用Set并将其转换为数组与复制数组非常相似...

因此，您可以使用相同的方法来复制数组，在ES6中非常容易。

例如，您可以使用...

想象一下，您有以下Set：

const a = new Set(["Alireza", "Dezfoolian", "is", "a", "developer"]);

您可以简单地使用以下方法进行转换：

const b = [...a];

结果是：

["Alireza", "Dezfoolian", "is", "a", "developer"]

一个数组，现在你可以使用所有可用于数组的方法...

其他常见的做法：

const b = Array.from(a);

或者使用循环，例如：

const b = [];
a.forEach(v => b.push(v));

- Alireza