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.cnblogs.com/ronaldo9ph/p/17354816.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS中的Map、Set、WeakMap和WeakSet - Python技术站

(0)
上一篇 2023年4月25日
下一篇 2023年4月27日

相关文章

  • JS简单获得节点元素的方法示例

    下面我将为您详细讲解JS简单获得节点元素的方法示例的完整攻略。 核心概念 在JavaScript中,我们可以通过document对象的方法来获取节点元素,获取的节点元素可以是HTML、XML或是XHTML文档中的任何元素。document对象提供了多种获取节点元素的方法,常用的有getElementById()、getElementsByTagName()、…

    JavaScript 2023年6月10日
    00
  • js中class的点击事件没有效果的解决方法

    问题描述: 在JavaScript中使用class定义的元素,如果带有点击事件绑定,在点击时有可能不起作用,导致点击事件无法触发。 解决方法: 使用事件代理 事件代理是将处理事件的职责委托给父元素,由父元素处理所有子元素的事件。在这种情况下,即使是通过JavaScript操作添加的元素也能够正确地触发点击事件。 使用addEventListener方法为父元…

    JavaScript 2023年6月10日
    00
  • JavaScript新增的两个原始数据类型详解(Record和Tuple)

    JavaScript新增的两个原始数据类型详解(Record和Tuple) 概述 在ES2021(ES12)中,JavaScript新增了两个原始数据类型:Record(记录)和Tuple(元组)。原始数据类型是指JavaScript内置数据类型,包括number、string、boolean、null、undefined、symbol和BigInt。 Re…

    JavaScript 2023年5月28日
    00
  • JS处理数据四舍五入(tofixed与round的区别详解)

    JS处理数据四舍五入(toFixed与round的区别详解) 在JavaScript中,处理数字的操作经常会用到四舍五入,而通过使用toFixed和round方法可以实现对数字的四舍五入操作。但是它们的实现方式以及得出的结果有些许不同,下面就详细介绍一下两者的区别。 toFixed方法 toFixed()方法是一个对象方法,它会把数字转换为字符串,并且指定小…

    JavaScript 2023年5月28日
    00
  • vue3获取当前路由地址的两种方法

    下面是具体的攻略: Vue3获取当前路由地址的两种方法 在Vue3中,我们可以使用两种方法来获取当前路由地址,分别是使用$route对象和使用useRoute函数。下面我们将介绍这两种方法,以及如何使用它们来获取当前路由地址。 使用$route对象获取当前路由地址 在Vue3中,我们可以使用$route对象来获取当前路由地址。$route对象是Vue Rou…

    JavaScript 2023年6月11日
    00
  • 详解JavaScript的表达式与运算符

    详解JavaScript的表达式与运算符 什么是表达式与运算符? 表达式(Expression)是一个可求值的代码片段,它可以包含变量、运算符、函数调用等,并最终会返回一个值。JavaScript 中的表达式有很多种类,如算术表达式、赋值表达式、比较表达式、逻辑表达式等。 运算符(Operator)则是用来处理表达式的一种特殊符号,它可以识别操作数之间的关系…

    JavaScript 2023年5月19日
    00
  • JS数据类型分类及常用判断方法

    JS数据类型分类及常用判断方法 数据类型分类 JavaScript有7种数据类型,分别为: 原始类型(primitive): undefined null boolean number string symbol(ES6新增) 引用类型(object): Object Array Function Date RegExp Error Math JSON 常用…

    JavaScript 2023年6月10日
    00
  • javascript显示用户停留时间的简单实例

    JavaScript 显示用户停留时间的简单实例 在网页开发中,我们有时需要知道用户在页面上停留的时间。今天我们就来分享一下如何通过 JavaScript 显示用户停留时间的简单实例。 思路: 1.获取当前时间 2.当用户进入页面时开始记录时间 3.当用户离开页面时,计算时间差 4.将时间差显示在页面上 示例1:采用 Date() 对象获取时间 <!D…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部