JS中的Map、Set、WeakMap和WeakSet

这篇具有很好参考价值的文章主要介绍了JS中的Map、Set、WeakMap和WeakSet。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在JavaScript中,Map、Set、WeakMap和WeakSet是四个不同的数据结构,它们都有不同的特点和用途:

1. Map :Map是一种键值对的集合,其中的键和值可以是任意类型的。与对象类似,它们可以通过键来访问值。不同之处在于,Map可以使用任意类型作为键,而对象只能使用字符串或Symbol类型作为键。Map还提供了许多有用的方法,例如size属性来获取键值对的数量,以及forEach()方法来遍历集合。
2. Set :Set是一种值的集合,其中每个值都是唯一的。与数组不同,它们没有重复的元素,并且没有特定的顺序。Set提供了许多有用的方法,例如add()方法来添加新的值,delete()方法来删除值,has()方法来检查是否存在某个值,以及size属性来获取集合的大小。
3. WeakMap :WeakMap与Map类似,也是一种键值对的集合。然而,它们的键必须是对象,而值可以是任何类型。与Map不同的是,WeakMap的键是弱引用,也就是说,如果键对象没有被其他地方引用,则它们可以被垃圾回收。这使得WeakMap非常适合缓存数据,因为当对象不再需要时,它们可以自动从WeakMap中删除,从而释放内存。
4. WeakSet :WeakSet是一种值的集合,其中每个值都是唯一的,并且没有特定的顺序。与Set不同的是,它们的值也是弱引用的,因此可以被垃圾回收。WeakSet通常用于存储对象的引用,以避免内存泄漏。



下面是Map、Set、WeakMap和WeakSet的例子:

1. Map:

const myMap = new Map();
const key1 = 'key1';
const key2 = { name: 'John' };
const key3 = function () { console.log('Hello!'); };
myMap.set(key1, 'value1');
myMap.set(key2, 'value2');
myMap.set(key3, 'value3');
console.log(myMap.get(key1)); // 'value1'
console.log(myMap.get(key2)); // 'value2'
console.log(myMap.get(key3)); // 'value3'
console.log(myMap.size); // 3

在这个例子中,我们创建了一个 Map 对象,并使用三个不同类型的键 (key1、key2、key3) 来存储三个值 (value1、value2、value3) 。我们可以使用 get() 方法来获取相应的值,使用 size 属性来获取键值对的数量。


2. Set:

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
console.log(mySet.has('value1')); // true
console.log(mySet.has('value4')); // false
console.log(mySet.size); // 3
mySet.delete('value2');
console.log(mySet.size); // 2

在这个例子中,我们创建了一个 Set 对象,并使用 add() 方法向其中添加三个值 (value1、value2、value3) 。我们可以使用 has() 方法来检查集合中是否存在某个值,使用 size 属性来获取集合的大小,使用 delete() 方法来删除值。


3. WeakMap:

let key1 = { name: 'John' };
let key2 = { name: 'Mary' };
let weakMap = new WeakMap();
weakMap.set(key1, 'value1');
weakMap.set(key2, 'value2');
key1 = null;
console.log(weakMap.get(key1)); // undefined
console.log(weakMap.get(key2)); // 'value2'

在这个例子中,我们创建了一个 WeakMap 对象,并使用两个对象键 (key1、key2) 来存储两个值 (value1、value2) 。然后我们将 key1 赋值为null,这将导致key1对象被垃圾回收,它们与值 value1 一起被从 WeakMap 中删除。当我们使用 get() 方法尝试访问已经被删除的键时,返回undefined。


4. WeakSet:

let obj1 = { name: 'John' };
let obj2 = { name: 'Mary' };
let weakSet = new WeakSet([obj1, obj2]);
console.log(weakSet.has(obj1)); // true
obj1 = null;
console.log(weakSet.has(obj1)); // false

在这个例子中,我们创建了一个 WeakSet 对象,并向其中添加两个对象 (obj1、obj2) 。我们可以使用 has() 方法检查 WeakSet 中是否存在某个对象,当我们将 obj1 赋值为null时,它们与值一起被从 WeakSet 中删除。当我们使用 has() 方法尝试访问已经被删除的对象时,返回false。

 

 


下面是Map、Set、WeakMap和WeakSet之间的区别和使用场景:

1. Map和Set:

Map 和 Set 都是集合数据结构,不同之处在于:

- Map存储键值对,可以使用任何类型作为键,而Set只存储值,并且每个值必须是唯一的。
- Map提供了更多的方法来操作键值对,如get()、set()和size属性等。而Set则提供了更多的方法来操作值,如add()、delete()和has()等。

使用场景:

- 当需要存储键值对并且需要使用键来访问值时,可以使用 Map 。
- 当需要存储唯一的值时,可以使用 Set 。


2. WeakMap和WeakSet:

WeakMap 和 WeakSet 与 Map 和 Set 类似,但是它们的键或值是弱引用,也就是说当键或值对象没有其他引用时,它们可以被垃圾回收,不会影响程序的内存使用情况。不同之处在于:

- WeakMap和WeakSet只能使用对象作为键或值。
- WeakMap和WeakSet没有size属性,因为其内容可能会随时被垃圾回收。

使用场景:

- 当需要存储需要进行垃圾回收的对象,并且这些对象只能被作为键或值来存储时,可以使用 WeakMap 和 WeakSet 。
- 当需要在内存受限的情况下使用缓存时,可以使用 WeakMap 和 WeakSet 来存储数据,因为它们会随时被垃圾回收,从而释放内存。

 

 

总的来说, Map 和 Set 是非常常用的数据结构,用于存储和操作数据。 WeakMap 和 WeakSet 则更适合用于缓存数据和避免内存泄漏的情况。文章来源地址https://www.toymoban.com/news/detail-425768.html

到了这里,关于JS中的Map、Set、WeakMap和WeakSet的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java中的Set、List、Map的区别及主要实现类方法

    数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型),JAVA集合可以存储和操作数目不固定的一组数据。 所有的JAVA集合都位于 java.util包中! JAVA集合只能存放引用类型的的数据,不能存放基本数据类型。 JAVA集合主要分为三种类型: Set (集) L

    2024年04月12日
    浏览(34)
  • 【数据结构】搜索树 与 Java集合框架中的Set,Map

    作者主页:paper jie_博客 本文作者:大家好,我是paper jie,感谢你阅读本文,欢迎一建三连哦。 本文录入于《JAVA数据结构》专栏,本专栏是针对于大学生,编程小白精心打造的。笔者用重金(时间和精力)打造,将javaSE基础知识一网打尽,希望可以帮到读者们哦。 其他专栏:《

    2024年02月08日
    浏览(27)
  • 【C++】 使用红黑树模拟实现STL中的map与set

    前面的文章我们学习了红黑树,也提到了C++STL中的map和set的底层其实就是用的红黑树来实现的(而map和set的使用我们前面也学过了)。 既然红黑树我们也学习过了,那这篇文章我们就用红黑树来简单实现一下STL中的map和set,重点是学习它的框架。 上一篇文章我们实现了红黑

    2024年02月12日
    浏览(21)
  • 【面试题】详解JavaScript中的Map()

     前端面试题库 ( 面试必备)              推荐:★★★★★ 地址:前端面试题库 JavaScript是一种动态、解释性的编程语言,用于开发web上的动态页面和交互式应用程序。与其他编程语言相比,JavaScript拥有更加灵活的内置数据类型,并且拥有更高级别的调试和错误处理工

    2024年02月11日
    浏览(33)
  • 【C++高阶(二)】熟悉STL中的map和set --了解KV模型和pair结构

    💓博主CSDN主页:杭电码农-NEO💓   ⏩专栏分类:C++从入门到精通⏪   🚚代码仓库:NEO的学习日记🚚   🌹关注我🫵带你学习C++   🔝🔝 在学习了二叉搜索树后,现在 就可以来学习map和set了,虽然 它们的底层是红黑树结构,但是红黑树 的本质也是一颗二叉搜索树! 本质重点: 本

    2024年02月05日
    浏览(25)
  • 【深入探讨】JavaScript 中的 forEach 和 map 区别

    🐱 个人主页: 不叫猫先生 ,公众号: 前端Clodplay 🙋‍♂️ 作者简介:前端领域优质作者、阿里云专家博主,共同学习共同进步,一起加油呀! ✨优质专栏:VS Code插件开发极速入门 📢 资料领取:前端进阶资料可以找我免费领取 map会返回一个新的数组,而forEach不会 。

    2024年04月28日
    浏览(29)
  • JavaScript中的map()和forEach()方法有什么区别?

    聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而

    2024年02月06日
    浏览(38)
  • Java学数据结构(3)——树Tree & B树 & 红黑树 & Java标准库中的集合Set与映射Map & 使用多个映射Map的案例

    1.B树,阶M,数据树叶上,根的儿子数在2和M之间,除根外,非树叶节点儿子为M/2和M之间; 2.B树的插入引起分裂,B树的删除,引起合并和领养; 3.红黑树,根是黑的,红色节点的儿子必须是黑的,所有路径的黑色节点数相同; 4.红黑树的插入,颜色翻转,单旋转,插入节点定

    2024年02月11日
    浏览(60)
  • 【C++学习】哈希表的底层实现及其在unordered_set与unordered_map中的封装

    🎉个人名片: 🐼作者简介:一名乐于分享在学习道路上收获的大二在校生 🙈个人主页🎉:GOTXX 🐼个人WeChat:ILXOXVJE 🐼本文由GOTXX原创,首发CSDN🎉🎉🎉 🐵系列专栏:零基础学习C语言----- 数据结构的学习之路----C++的学习之路 🐓每日一句:如果没有特别幸运,那就请特

    2024年04月16日
    浏览(36)
  • 高级编程JavaScript中的Map键值对你知道吗?一篇文章看懂

    Map 保存键值对,其中键可以是任何数据类型。 Map 会记住键的原始插入顺序。 Map 提供表示映射大小的属性。 方法 描述 new Map() 创建新的 Map 对象。 set() 为 Map 中的键设置值。 get() 获取 Map 对象中键的值。 clear() 从 Map 中移除所有元素。 delete() 删除由某个键指定的 Map 元素。

    2024年01月25日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包