一文详解JS中的Map、Set、WeakMap和WeakSet

 更新时间:2023年04月26日 10:58:17   作者:施主来了  
在JavaScript中,Map、Set、WeakMap和WeakSet是四个不同的数据结构,它们都有不同的特点和用途,本文详细介绍了Map、Set、WeakMap和WeakSet的用法及区别,需要的朋友可以参考下

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

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

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

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

使用场景:

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

2. WeakMap和WeakSet:

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

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

使用场景:

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

到此这篇关于一文详解JS中的Map、Set、WeakMap和WeakSet的文章就介绍到这了,更多相关JS中Map、Set、WeakMap和WeakSet内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js 去掉字符串前后空格实现代码集合

    js 去掉字符串前后空格实现代码集合

    这篇文章主要介绍了js 去掉字符串前后空格实现代码集合,需要的朋友可以参考下
    2017-03-03
  • 24个解决实际问题的ES6代码片段(小结)

    24个解决实际问题的ES6代码片段(小结)

    这篇文章主要介绍了24个解决实际问题的ES6代码片段,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JavaScript从数组(数组对象)中删除特定数据的方法

    JavaScript从数组(数组对象)中删除特定数据的方法

    这篇文章主要给大家介绍了关于JavaScript从数组(数组对象)中删除特定数据的相关资料,js在前台界面中举足轻重,在使用js删除数组时遇到一些问题,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • JavaScript如何判断input数据类型

    JavaScript如何判断input数据类型

    这篇文章主要介绍了JavaScript如何判断input数据类型,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • JavaScript返回0-1之间随机数的方法

    JavaScript返回0-1之间随机数的方法

    这篇文章主要介绍了JavaScript返回0-1之间随机数的方法,涉及javascript中Math对象random方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • javascript浏览器用户代理检测脚本实现方法

    javascript浏览器用户代理检测脚本实现方法

    下面小编就为大家带来一篇javascript浏览器用户代理检测脚本实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 基于JavaScript实现一个月饼音乐播放器

    基于JavaScript实现一个月饼音乐播放器

    这篇文章主要为大家详细介绍了如何利用JavaScript实现一个简单的月饼音乐播放器,文中的示例代码讲解详细,感兴趣的小伙伴可以尝试一下
    2022-09-09
  • JS字符串和数组如何实现相互转化

    JS字符串和数组如何实现相互转化

    这篇文章主要介绍了JS字符串和数组如何实现相互转化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • js中onclick和addEventListener的区别

    js中onclick和addEventListener的区别

    本文对javascript中onclick事件处理的方法和addEventListener监听器进行讲解,具有一定的参考价值,感兴趣的可以了解一下
    2023-08-08
  • UEditor 自定义图片视频尺寸校验功能的实现代码

    UEditor 自定义图片视频尺寸校验功能的实现代码

    UEditor支持单图、多图以及视频上传,编辑器配置项支持文件格式、文件大小校验,对于文件宽高尺寸校验暂不支持。本文给大家介绍UEditor 自定义图片视频尺寸校验功能的实现代码,感兴趣的朋友一起看看吧
    2020-10-10

最新评论