脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → ES6将Set转化为数组

ES6如何将 Set 转化为数组示例详解

 更新时间：2023年02月20日 10:53:49   作者：天行无忌  
这篇文章主要为大家介绍了ES6如何将 Set 转化为数组的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

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]

以上就是ES6如何将 Set 转化为数组示例详解的详细内容，更多关于ES6将Set转化为数组的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JavaScript实现星座查询功能 附详细代码

    JavaScript实现星座查询功能 附详细代码

    最近小编在做一个项目，其中涉及到一个模块关于星座查询功能，即在文本框中输入一个生日值，点击按钮可以得到对应的星座，怎么实现这个需求呢？下面小编通过示例代码给大家介绍下，需要的朋友参考下吧
    2021-11-11
  • 微信小程序form表单组件示例代码

    微信小程序form表单组件示例代码

    这篇文章主要介绍了微信小程序form表单组件示例代码,文章给大家提到了一些相关属性名和类型及说明，需要的朋友可以参考下
    2018-07-07
  • 原生js实现fadein 和 fadeout淡入淡出效果

    原生js实现fadein 和 fadeout淡入淡出效果

    这篇文章主要介绍了通过原生js实现fadein 和 fadeout淡入淡出效果,需要的朋友可以参考下
    2014-06-06
  • 微信小程序开发之实现食堂点餐系统

    微信小程序开发之实现食堂点餐系统

    这篇文章主要为大家详细介绍了如何通过微信小程序开发一个简单的食堂点餐系统，文中的示例代码讲解详细，感兴趣的小伙伴可以和小编一起学习一下
    2023-01-01
  • XMLHTTP 乱码的解决方法（UTF8,GB2312 编码 解码）

    XMLHTTP 乱码的解决方法（UTF8,GB2312 编码 解码）

    XMLHTTP 乱码的解决方法（UTF8,GB2312 编码 解码）（附带解决DHTMLX不能用中文的问题）
    2011-01-01
  • JavaScript设计模式中的观察者模式

    JavaScript设计模式中的观察者模式

    这篇文章主要介绍了JavaScript设计模式中的观察者模式，观察者设计模式适用于监听一对多的操作，例如监听对象属性的修改等等，观察者模式能够降低代码耦合度，提升可扩展性
    2022-06-06
  • js时间戳格式化成日期格式的多种方法

    js时间戳格式化成日期格式的多种方法

    js需要把时间戳转为为普通格式，一般的情况下可能用不到的，下面与大家分享几种不错的方法，感兴趣的朋友不要错过
    2013-11-11
  • 微信小程序如何自定义table组件

    微信小程序如何自定义table组件

    这篇文章主要介绍了微信小程序如何自定义table组件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-06-06
  • 小程序获取用户名和头像完整代码

    小程序获取用户名和头像完整代码

    这篇文章主要介绍了关于小程序获取用户名和头像的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者用小程序具有一需要的参考借鉴价值,朋友可以参考下
    2023-07-07
  • ES6的异步终极解决方案分享

    ES6的异步终极解决方案分享

    这篇文章主要给大家介绍了关于ES6的异步终极解决方案，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-07-07

最新评论