IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> ES6中的 Map 理解 -> 正文阅读

[JavaScript知识库]ES6中的 Map 理解

之前 ES5 中是没有 Map 这种数据集合的,ES6才把它添加进来了。
Map 是 key-value 的集合,key 可以是任意类型的数据,类似于对象,但对象的 key 只能是字符串。
下面分别详细说说我对它特性及使用的了解。

Map 数据集合

1、通过 new Map() 创建 Map 实例

let map = new Map()

2、向 Map 集合中添加值-- key 可以是任意类型的数据

// 方式 1: 通过传入二维数组
let map1 = new Map([[1, 2], [3, 4], [5, 6]])

// 方式 2: 通过 set() 方法进行添加值
let map2 = new Map()
map2.set(.1, 2132)
map2.set(true, {})
map2.set({}, .31241)
map2.set(NaN, [1, 2, 3])
map2.set([], 32131312)

3、重复添加键,基础数据类型的键会将值覆盖,引用类型的不会,因为内存地址不一样

let map = new Map()
map.set(111, 222)
map.set(111, 3333)
map.set(true, [])
map.set(NaN, {})
map.set({}, 1111)
map.set({}, 333)
map.set([1,2], true)
map.set([1,2], 'rerffds')

在这里插入图片描述

4、Map 的方法:set()、get()、has()、delete()、clear()、size

let map = new Map([[true, 111], [{}, 4124], [NaN, false]])
let arr = [1, 2]
map.set(111, 222) // 设置 键 111,对应的值为 222
map.set(arr, {}) // 设置 键 为变量 arr,对应的值为 {}
map.get(111) // 获取键 111 ,对应的值  ---> 222
map.get(43141414) // 获取不存在的键 43141414 ,对应的值  ---> undefined
map.has(true) // 是否存在键 true ---> true
map.has({}) // 是否存在键 {} ---> false
map.has(arr) // 是否存在键 arr ---> false true
map.size // 5
map.clear() //清除所有成员数据

5、遍历 Map 的集中方式:keys()、values()、entries()、for…of 及 forEach()

let map = new Map([[1, 2], [3, 4], [5, 6]])

// 遍历键 key
for(let key of map.keys()){
    console.log(key);
}
/* 输出结果为:
1
3
5
*/

// 遍历键值 value
for(let value of map.values()){
    console.log(value);
}
/* 输出结果为:
2
4
6
*/

// 遍历键值 
for(let item of map.entries()){
    console.log(item[0], item[1]);
}
for(let [key, value] of map.entries()){
    console.log(key, value);
}
for(let [key, value] of map){
    console.log(key, value);
}
/* 输出结果都为:
1  2
3  4
5  6
*/

6、Map 和二维数组的互相转换

// 二维数组转 Map方式 1:直接作为 Map 参数传入
let arrRes1 = [[1, 2], [3, 4], [5, 6]]
let mapRes1 = new Map(arrRes1) 

// 二维数组转 Map方式 2:遍历 for...of
let arrRes2 = [[1, 2], [3, 4], [5, 6]]
let mapRes2 = new Map()
arrRes2.forEach(item => {
    mapRes2.set(item[0], item[1])
})

// 二维数组转 Map方式 2:遍历 for
let arrRes3 = [[1, 2], [3, 4], [5, 6]]
let mapRes3 = new Map()
for(let i = 0; i < arrRes3.length; i++){
    mapRes3.set(arrRes3[i][0], arrRes3[i][0])
}


//=====================================================//


// Map 转二维数组方式 1: 使用展开符 ...
let map1 = new Map([[1, 2], [3, 4], [5, 6]])
let arr1 = [...map1]

// Map 转二维数组方式 2: 使用 Array.form
let map2 = new Map([[1, 2], [3, 4], [5, 6]])
let arr2 = Array.from(map2)

// Map 转二维数组方式 3: 使用遍历 forEach
let map3 = new Map([[1, 2], [3, 4], [5, 6]])
let arr3 = []
map3.forEach(item => {
    arr3.push([item[0], item[1]])
})

// Map 转二维数组方式 4: 使用遍历 for...of
let map4 = new Map([[1, 2], [3, 4], [5, 6]])
let arr4 = []
for(let [key, value] of map4){
arr4.push([key, value])
}

7、Map 和对象的互相转换

// 对象转 Map 方式1:使用 Object.entries()
let objRes1 = {
    'name': 'bob',
    age: 111,
    sex: '男'
}
let mapRes1 = new Map(Object.entries(objRes1))

// 对象转 Map 方式2:使用 遍历 for...in
let objRes2 = {
    'name': 'bob',
    age: 111,
    sex: '男'
}
let mapRes2 = new Map()
for(let key in objRes2){
    mapRes2.set(key, objRes2[key])
}



//==========================================


// Map 转对象:使用 遍历 for...of
let map1 = new Map([["name", "bob"],["age", 11],["sex", "男"]]) 
let obj1 = {}
for(let [key, value] of map1){
    obj1[key] = value;
}

扩展
1、WeakMap 类似于 Map,但 WeakMap 的键必须是对象(null除外)
2、WeakMap 的键指向的对象,不计入垃圾回收机制,除非键自己清除了

let weakMap = new WeakMap()
weakMap.set({}, 1111)
weakMap.set({name: 'bob'}, true)
weakMap.set([], NaN)
weakMap.set([1,2], {})

就记录到这,祝大家开心!!!!!!
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-01-28 11:49:07  更:2022-01-28 11:50:13 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 14:04:07-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码