ES6:Map()与WeakMap()

2024-04-01 01:52
文章标签 map frontend es6 weakmap

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

一、Map()

1.1 简介

ES6 提供了 Map 数据结构,它类似于对象,是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

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

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

1.对单个数据设置与获取

    <script>//创建Map对象const mapData = new Map();//添加数据(键,值)mapData.set("name", "张三");//获取数据console.log(mapData.get("name")); //张三</script>

1.3 对多个数据的设置与获取

   <script>const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const infos = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];//创建Map对象const mapData = new Map();//将数据存入Map对象arr.forEach((item, index) => {mapData.set(item, infos[index]);});//遍历Map对象arr.forEach((item, index) => {console.log(mapData.get(item)); //a b c d e f g h i j});//下面的方法后文有介绍console.log(mapData.size); //10console.log(mapData.has(1)); //trueconsole.log(mapData.has(11)); //falseconsole.log(mapData.get(1)); //a</script>

1.3 注意事项

1.对同一个键多次赋值,后面的值将覆盖前面的值

2.如果读取一个未知的键,则返回undefined。同一内存地址才是同一个键,不同内存地址但是值       相同不算同一个键。例如:

      const map = new Map();map.set(["a"], 555);console.log(map.get(["a"])); // undefined</script>

1.3 Map()的一些方法

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

2.has 方法返回一个布尔值,表示某个键是否在当前 Map 对象之中

3.delete 删除一个键,成功返回true,失败返回false

4.clear 清除所有成员

示例:

  <script>// 创建一个 Map 对象const myMap = new Map();// 添加一些键值对myMap.set("key1", "value1");myMap.set("key2", "value2");myMap.set("key3", "value3");// 示例1:size 方法console.log("Map size:", myMap.size); // 输出:3// 示例2:has 方法console.log(myMap.has("key1")); // 输出:trueconsole.log(myMap.has("nonExistentKey")); // 输出:false// 示例3:delete 方法console.log(myMap.delete("key2")); // 输出:true (删除成功)console.log(myMap.has("key2")); // 输出:false ('key2' 已经被删除)// 示例4:clear 方法myMap.clear();console.log("清空:", myMap.size); // 输出:0 (所有成员已被清除)</script>

1.4 遍历Map

Map.prototype.keys():返回键名的遍历器。

Map.prototype.values():返回键值的遍历器。

Map.prototype.entries():返回所有成员的遍历器。

Map.prototype.forEach():遍历 Map 的所有成员。

示例:

    <script>// 创建一个 Map 对象const myMap = new Map();myMap.set("name", "Alice");myMap.set("age", 25);myMap.set("city", "New York");// 示例1:Map.prototype.keys()for (const key of myMap.keys()) {console.log("Key:", key);}// 输出:// Key: name// Key: age// Key: city// 示例2:Map.prototype.values()for (const value of myMap.values()) {console.log("Value:", value);}// 输出:// Value: Alice// Value: 25// Value: New York// 示例3:Map.prototype.entries()for (const [key, value] of myMap.entries()) {console.log(`Key: ${key}, Value: ${value}`);}// 输出:// Key: name, Value: Alice// Key: age, Value: 25// Key: city, Value: New York// 示例4:Map.prototype.forEach()myMap.forEach((value, key) => {console.log(`Key: ${key}, Value: ${value}`);});// 输出:// Key: name, Value: Alice// Key: age, Value: 25// Key: city, Value: New York</script>

1.5 Map与其它数据类型互换

1.Map与数组

Map=>数组

    <script>const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const infos = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];const mapData = new Map();arr.forEach((item, index) => {mapData.set(item, infos[index]);});//两种方式都可以将map转换为数组console.log(Array.from(mapData)); //[[1, "a"], [2, "b"], [3, "c"], [4, "d"], [5, "e"], [6, "f"], [7, "g"], [8, "h"], [9, "i"], [10, "j"]console.log([...mapData]); //[[1, "a"], [2, "b"], [3, "c"], [4, "d"], [5, "e"], [6, "f"], [7, "g"], [8, "h"], [9, "i"], [10, "j"]</script>

数组=>Map

    <script>const arr = [[1, "a"],[2, "b"],[3, "c"],[4, "d"],[5, "e"],[6, "f"],[7, "g"],[8, "h"],[9, "i"],[10, "j"],];console.log(new Map(arr)); //Map(10) { 1 => 'a', 2 => 'b', 3 => 'c', 4 => 'd', 5 => 'e', 6 => 'f', 7 => 'g', 8 => 'h', 9 => 'i', 10 => 'j' }</script>

2.Map与对象

Map=>对象

    <script>const mapData = new Map([["name", "老王"],["age", 30],["city", "王家屯"],]);// 将Map转换为对象console.log(Object.fromEntries(mapData)); // { name: '老王', age: 30, city: '王家屯' }</script>

对象=>Map

    <script>const obj = {name: "老张",age: 29,city: "张家集",};console.log(new Map(Object.entries(obj))); //Map(3) {"name" => "老张", "age" => 29, "city" => "张家集"}</script>

3.Map与JSON

Map=>JSON

    <script>const map = new Map(Object.entries({name: "老张",age: 29,city: "张家集",}));console.log(JSON.stringify([...map]));//[["name","老张"],["age",29],["city","张家集"]]</script>

JSON=>Map

    <script>const map = new WeakMap();// 创建一个对象作为键const key = { name: "老王" };map.set(key, "这是老王的数据");console.log(map.get(key)); // 这是老王的数据</script>
    <script>const jsonData = [["name", "老张"],["age", 29],["city", "张家集"],];console.log(new Map(Object.entries(JSON.parse(JSON.stringify(jsonData)))));// Map(3) {"name" => "老张", "age" => 29, "city" => "张家集"}</script>

二、WeakMap

2.1 简介

WeakMap和Map一样是键值对数据结构,它和Map主要有以下区别

1.WeakMap只接受对象(null除外)和 Symbol 值作为键名,不接受其他类型的值作为键名。

2.WeakMap其键值对之间是弱引用关系。对于WeakMap中的键,如果除了WeakMap之外没有任何其他强引用指向该键所在的对象,则垃圾回收器可以在下一次垃圾回收周期中回收这个键所指向的对象,即使WeakMap还持有该键值对。而Map键值对之间是强引用关系。这意味着只要Map本身还在内存中,Map中的键和值都会被垃圾回收机制视为有效引用,因此不会被回收。

3.WeakMap没有迭代器,不可以枚举。

4.WeakMap只有get()、set()、has()、delete()四种方法可用

下面是一个创建WeakMap简单的示例:

    <script>const map = new WeakMap();// 创建一个对象作为键const key = { name: "老王" };map.set(key, "这是老王的数据");console.log(map.get(key)); // 这是老王的数据</script>

2.2 使用场景

因为能被垃圾回收的性质,我们可以在一些希望键值能影响生命周期的地方使用,例如:

我们在Vue中,我们要通过指令动态创建多个Div,div的数量被存储在WeakMap中,当Div需要被销毁时,删除在WeakMap的键值对。示例。。。还没写好,以后再补上。

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



http://www.chinasem.cn/article/865945

相关文章

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

JavaScript中的Map用法完全指南

《JavaScript中的Map用法完全指南》:本文主要介绍JavaScript中Map用法的相关资料,通过实例讲解了Map的创建、常用方法和迭代方式,还探讨了Map与对象的区别,并通过一个例子展... 目录引言1. 创建 Map2. Map 和对象的对比3. Map 的常用方法3.1 set(key, v

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Golang中map缩容的实现

《Golang中map缩容的实现》本文主要介绍了Go语言中map的扩缩容机制,包括grow和hashGrow方法的处理,具有一定的参考价值,感兴趣的可以了解一下... 目录基本分析带来的隐患为什么不支持缩容基本分析在 Go 底层源码 src/runtime/map.go 中,扩缩容的处理方法是 grow

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl