ES6 如何将 Set 转化为数组

简介: 笔记

15.png

Set 是 ES6 中新增的一种集合类型,类似于数组,但其成员的值是唯一的,即不会重复。关于Set,可以阅读《JavaScript中的Set数据操作:交集、差集、交集、对称差集》。Set 对象是一个构造函数,可以使用 new 关键字来创建一个 Set 实例。例如:

const mySet = new Set();

Set 对象具有以下特征:

  • Set 实例的成员唯一,不会重复。
  • Set 实例可以存储任何类型的值,包括基本类型和对象。
  • Set 实例是可迭代的,可以使用 for...of 循环遍历其中的值。
  • Set 实例的 size 属性可以用来获取它包含的成员数量。

Set 对象有以下常用方法:

add(value):添加一个值到 Set 实例中。delete(value):从 Set 实例中删除一个值。has(value):判断 Set 实例中是否包含某个值,返回一个布尔值。clear():清空 Set 实例中的所有值。

可以使用以下代码创建一个包含几个元素的 Set 对象并使用其方法:

const mySet = new Set();
mySet.add(1);
mySet.add("two");
mySet.add({ name: "DevPoint" });
console.log(mySet.has("two")); // 输出 true
mySet.delete(1);
console.log(mySet.size); // 输出 2
mySet.clear();
console.log(mySet.size); // 输出 0

在 ES6 中,可以使用 Array.from() 方法将 Set 转换为数组。该方法接受一个可迭代对象,并返回一个新数组。

例如,假设有一个 Set 对象 mySet,可以按以下方式将其转换为数组:

const mySet = new Set([1, 2, 3]);
const myArray = Array.from(mySet);
console.log(myArray); // 输出 [1, 2, 3]

除此之外,还可以使用扩展运算符 ... 来将 Set 转换为数组。例如:

const mySet = new Set([1, 2, 3]);
const myArray = [...mySet];
console.log(myArray); // 输出 [1, 2, 3]

这种方法更简洁,但不支持 IE 浏览器。

除了使用 Array.from() 方法和扩展运算符 ...,还有就是通过遍历 Set 并将每个元素添加到一个新数组中。

const mySet = new Set([1, 2, 3]);
const myArray = [];
for (let item of mySet) {
  myArray.push(item);
}
console.log(myArray); // 输出 [1, 2, 3]
相关文章
|
7月前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
106 3
|
2月前
|
存储
ES6中的Set数据结构的常用方法和使用场景
ES6中的Set数据结构的常用方法和使用场景
|
3月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
4月前
|
存储 JavaScript 前端开发
ES6新特性(四): Set 和 Map
ES6新特性(四): Set 和 Map
|
5月前
|
存储 JavaScript 前端开发
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
58 1
|
5月前
|
存储 JavaScript 前端开发
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(一)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(一)
43 0
|
7月前
|
存储 JavaScript
ES6+新特性-Symbol与Set/Map数据结构
ES6 引入了三种新的数据结构:Symbol、Set和Map。Symbol是唯一且不可变的值,常用于定义对象的独特属性;Set存储不重复值,适合数组去重;Map则是键值对集合,键可为任意类型,提供了更灵活的存储方式。这些新数据结构提供了更高效的操作手段,分别解决了属性命名冲突、数据去重和复杂键值对存储的问题。示例展示了如何使用Symbol、Set和Map进行基本操作。
|
7月前
|
存储 前端开发 索引
【Web 前端】ES6中,Set和Map的区别 ?
【5月更文挑战第1天】【Web 前端】ES6中,Set和Map的区别 ?
|
7月前
|
JavaScript 前端开发 Java
ES6 逐点突破系列 -- Set Map,工作感悟,完美收官
ES6 逐点突破系列 -- Set Map,工作感悟,完美收官