ES6:Set()与weakSet()

2024-04-01 07:52
文章标签 set frontend es6 weakset

本文主要是介绍ES6:Set()与weakSet(),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、Map()

1.1 简介

ES6 提供了 Set 数据结构,它类似于数组,但是值是唯一没有重复的。

我们可以通过 new Set()去创建它。

1.2. Set的创建、设置与获取

    <script>const set = new Set();console.log(set.add(1)); //Set { 1 }const arr = [1, 2, 3, 4, 5];console.log(set.add(arr)); //Set { 1, [1, 2, 3, 4, 5] }console.log([...set]); //[1, [1, 2, 3, 4, 5]]</script>

1.3 Set()的一些方法

1.size 返回 Set 结构的成员总数。

2.has 方法返回一个布尔值,表示某个值是否在当前 Set 集合之中。

3.delete 删除一个值,成功返回 true,失败(即该值不在 Set 中)返回 false。

4.clear 清除 Set 集合中的所有成员。

    <script>// 创建一个 Setconst mySet = new Set();mySet.add(1);mySet.add("hello");mySet.add({ id: 1 });// 1. 获取Set的大小(成员总数)console.log(mySet.size); // 输出:3// 2. 判断值是否存在console.log(mySet.has(1)); // 输出:trueconsole.log(mySet.has("world")); // 输出:false// 3. 删除一个值console.log(mySet.delete("hello")); // 输出:trueconsole.log(mySet.has("hello")); // 输出:false// 4. 清除所有成员mySet.clear();console.log(mySet.size); // 输出:0</script>

1.4 遍历Set

1.Set.prototype.keys():返回键名的遍历器

2.Set.prototype.values():返回键值的遍历器

3.Set.prototype.entries():返回键值对的遍历器

4.Set.prototype.forEach():使用回调函数遍历每个成员

    <script>// 创建一个 Setconst mySet = new Set(["a", "b", "c"]);// 使用 keys() 方法遍历 Setfor (const item of mySet.keys()) {console.log(item);} // a b c// 使用 values() 方法遍历 Setfor (const value of mySet.values()) {console.log(value);} // a b c// 使用 entries() 方法遍历 Setfor (const entry of mySet.entries()) {console.log(entry);} // ["a", "a"] ["b", "b"] ["c", "c"]// 使用 forEach() 方法遍历并处理 Set 中的每个成员mySet.forEach((item) => {console.log(`Processing ${item}`);}); // Processing a Processing b Processing c</script>

1.5 Set()的应用

    <script>//数组去重const mySet = new Set([1, 1, 2, 3, 4, 5, 5, 6]);console.log([...mySet]); // [1, 2, 3, 4, 5, 6]//字符串去重console.log([...new Set("ababbc")].join("")); // abc</script>

注意:未展开的数组无法去重,需要先扁平化

    <script>const arr = [[1, 2, 3],[2, 5, 6],[2, 8, 9],];console.log(new Set(arr)); //Set(3) { [ 1, 2, 3 ], [ 2, 5, 6 ], [ 2, 8, 9 ] }console.log([...new Set(arr.flat())]); //[ 1, 2, 3, 5, 6, 8, 9 ]</script>

二、WeakSet 

2.1 简介

WeakSet 结构与 Set 类似,也是不重复的值的集合。它和Set主要有以下区别

1.WeakSet 的成员只能是对象和 Symbol 值,而不能是其他类型的值。

2.WeakMap其键值对之间是弱引用关系。对于WeakMap中的键,如果除了WeakMap之外没有任何其他强引用指向该键所在的对象,则垃圾回收器可以在下一次垃圾回收周期中回收这个键所指向的对象,即使WeakMap还持有该键值对。

2.2 基本使用

    <script>const a = [[1, 2],[3, 4],];const ws = new WeakSet(a);console.log(ws); //{1, 2}, {3, 4}ws.add(5);//报错</script>

这篇关于ES6:Set()与weakSet()的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/866628

相关文章

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

shell中set -u、set -x、set -e的使用

《shell中set-u、set-x、set-e的使用》本文主要介绍了shell中set-u、set-x、set-e的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录✅ 1. set -u:防止使用未定义变量 作用: 示例:❌ 报错示例输出:✅ 推荐使用场景:✅ 2. se

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,