JavaScript中的Map数据结构详解

更新时间：2022年01月24日 16:25:42 作者：CSPsy

这篇文章主要为大家介绍了JavaScript的Map数据结构，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

1. 什么是 Map

Map 就是映射的意思，即从键到值的映射。

Map 保存键值对，并且能够记住键的原始插入顺序。

那么它和 Object 有什么区别？

对象一般用字符串作键

const obj = {
	val : "object"
}

任何值(对象或者原始值) 都可以作为 Map 的一个键或一个值

const m = new Map();;
m.set('val', 'map');
m.set(1, 'number');
m.set(new Set([1, 2]), 'set');
m.set({}, 'object');
console.log(m);

在这里插入图片描述

所以，在键值对的数据结构中，Map 比 Object 更为合适

2. Map 构造函数

对于 Set 的构造函数的参数，可以传递以下几种形式。

2.1) 数组

注意，要传递的是二维数组，因为二维数组才能体现出键值对

const m = new Map([
    ['val', 'map'],
    ['apple', 'fruit']
]);
console.log(m);

在这里插入图片描述

2.2) Set

以 Set 作为参数，也要体现出键值对形式

对 Set 不了解的，想了解的可以看看下面这篇文章：JavaScript—Set

const m = new Map(new Set([
    ['tigger', 'animal'],
    ['orange', 'fruit']
]));
console.log(m);

在这里插入图片描述

2.3) Map

const m1 = new Map([
    ['watermelon', 'fruit'],
    ['cat', 'animal']
])
const m2 = new Map(m1);
console.log(m2);

在这里插入图片描述

这里相当于把m1复制过去，给了m2，不过它们不是同一个 Map

console.log(m2 === m1);

在这里插入图片描述

综上，Map 构造函数的参数要能体现出键值对的形式。

3. Map 的实例属性和方法

3.1) Map 的属性

size

Map 的属性，有一个属性size，用来存储它的成员个数

const m = new Map([
    ['val', 'map'],
    ['cat', 'animal'],
    ['orange', 'fruit']
]);
console.log(m.size);

在这里插入图片描述

3.2) Map 的方法

set

给 Map 中添加成员

const m = new Map();
// 它的参数为两个，第一个为键，第二个为值
m.set('val', 'map');
console.log(m);
// 可以连缀 Set
m.set('orange', 'fruit').set('cat', 'animal');
console.log(m);
// 添加的新成员如果键已经存在了，那么将会覆盖它
// 键的顺序不会发生改变，因为 Map 能够记住键的原始插入顺序
m.set('orange', 'sweet');
console.log(m);

在这里插入图片描述

get

通过键获取 Map 的成员

const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);
console.log(m.get('val'));
console.log(m.get(true));
// 获取不存在的键时，会返回 undefined
console.log(m.get('tigger'));

在这里插入图片描述

has

用来判断 Map 是否含有某个键

const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);
console.log(m.has(true));
console.log(m.has('true'));

在这里插入图片描述

delete

通过键，来删除 Map 中的成员

const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);
m.delete('cat');
// 删除不存在的成员，将什么也不会发生，也不会报错
m.delete('true');
console.log(m);

在这里插入图片描述

clear

删除 Map 的所有成员

const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);
m.clear();
console.log(m);

在这里插入图片描述

forEach

用来遍历 Map 的成员

它有两个参数，第一个参数为回调函数，第二个参数设定回调函数中this指向什么，即

m.forEach(回调函数, 回调函数的指向)

先来看第一个参数

m.forEach(function(value, key, map){
	value 就是 Map 的值
	key 就是 Map 的键
	map 就是前面Map的本身，即这里 map === m
});

通过一个例子理解一下：

const m = new Map([    ['val', 'map'],    ['orange', 'fruit'],    ['cat', 'animal'],    [true, 'false']]);m.forEach(function(value, key, map) {    console.log(value, key, map == m);});const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);

m.forEach(function(value, key, map) {
    console.log(value, key, map == m);
});

在这里插入图片描述

再来看第二个参数

const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);

m.forEach(function(value, key, map) {
    console.log(this);
}, document);
const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);

m.forEach(function(value, key, map) {
    console.log(this);
}, document);

在这里插入图片描述

4. Map的注意事项

Map 对键名是否相同的判断基本遵循严格相等===的判断

不过对于NaN，在 Set 中，NaN 等于 NaN

5. Map的使用场景

只需要键值对的结构时，即 key => value 的结构
需要字符串以外的键或者值

举个例子来看看 Map 的应用：

对DOM元素进行操作

先写一个 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
</head>
<body>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</body>
</html>

此时效果是这样的：

在这里插入图片描述

然后对p元素进行修改：

<script>
    // 利用数组解构赋值将 p 元素获取的同时解构出来
    const [p1, p2, p3] = document.querySelectorAll('p');
    const m = new Map([
        [p1, new Map([
            ['color', 'blue'],
            ['fontSize', '40px']
        ])], 
        [p2,  new Map([
            ['color', 'orange'],
            ['fontSize', '40px']
        ])], 
        [p3,  new Map([
            ['color', 'green'],
            ['fontSize', '40px']
        ])]
    ]);

    m.forEach((propMap, elem) => {
        propMap.forEach((value, prop) => {
            elem.style[prop] = value;
        });
    });
</script>

在这里插入图片描述

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

js 轮播效果实例分享
本文主要分享了基于js实现的轮播效果的实例代码，具有一定的参考价值，下面跟着小编一起来看下吧
2016-12-12
Javascript的动态增加类的实现方法
下面小编就为大家带来一篇Javascript的动态增加类的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
taro小程序添加骨架屏的实现代码
这篇文章主要介绍了taro小程序添加骨架屏的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
JavaScript实现汉字转换为拼音的库文件示例
这篇文章主要介绍了JavaScript实现汉字转换为拼音的库文件,结合具体实例分析了JSPinyin库文件与简单使用技巧,需要的朋友可以参考下
2016-12-12
js数组方法reduce经典用法代码分享
本文给大家整理了很多关于js数组方法reduce的经典代码片段，能够让大家更好的理解reduce的实例用法，一起学习下吧。
2018-01-01
JavaScript的String字符串对象常用操作总结
String对象用于存储字符串数据,这里我们做了JavaScript的String字符串对象常用操作总结,需要的朋友可以参考下
2016-05-05
javascript中的变量作用域以及变量提升详细介绍
在javascript中，理解变量的作用域以及变量提升是非常有必要的。这个看起来是否很简单，但其实并不是你想的那样，还要一些重要的细节你需要理解
2013-10-10
Javascript的表单验证-初识正则表达式
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。接下来通过本文给大家介绍Javascript的表单验证-初识正则表达式，对js表单验证正则表达式相关知识感兴趣的朋友一起学习吧
2016-03-03
options预检请求的前后端解决方式详解
这篇文章主要为大家介绍了options预检请求的前后端解决方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
Angular中针对路由Routing原理刨析
在Angular中，最好在一个顶级模块中加载和配置路由，它专注于路由功能，然后由根模块AppModule导入它，最后还有初始化并监听浏览器的地址变化
2023-01-01