首页 > 资讯 > 前端开发 > JavaScript >JavaScript中的Map数据结构详解

412

分享到

JavaScript中的Map数据结构详解

2024-04-02 19:04:59 412人浏览薄情痞子

摘要

目录1. 什么是 Map2. Map 构造函数2.1) 数组2.2) Set2.3) Map3. 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>

在这里插入图片描述

总结

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript中的Map数据结构详解

本文链接: https://www.lsjlt.com/news/163619.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

JavaScript中的Map数据结构详解

目录1. 什么是 Map2. Map 构造函数2.1) 数组2.2) Set2.3) Map3. Map 的实例属性和方法...

99+

2024-04-02
【数据结构】 Map和Set详解

文章目录 🍀Map与Set的概念及场景🌳Map与Set模型介绍🎨Map 的使用📌Map说明📌Map.Entry ...

99+

2023-10-11

数据结构 set Map 哈希 java
c++ 数据结构map的使用详解

目录map的常用用法 1. 头文件2. 定义 3. map 容器内元素的访问（1）通过下标访问（2）通过迭代器访问（3）通过逆向迭代器访问4. map 元素的插入 5. map...

99+

2024-04-02
JavaScript中Map数据结构是怎么样的

这篇“JavaScript中Map数据结构是怎么样的”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“JavaScript中Map数据结构是怎么样的”，小编整理了以下知识点，请大家跟着小编的步伐一...

99+

2023-06-28
JavaScript的Set数据结构详解

目录1. 什么是 Set2. Set 构造函数2.1) 数组2.2) 字符串2.3) arguments2.4) Node...

99+

2024-04-02
JavaScript队列数据结构详解

目录什么是队列？JavaScript中的队列JavaScript中的应用场景最近的请求次数补充总结写在前面：在上一篇文章中介绍了栈这个数据结构，这篇文章介绍一下队列。什么是队列？...

99+

2024-04-02
理解和优化Golang中的Map数据结构

Golang中的Map数据结构解析与性能优化引言在Go编程语言中，Map是一种关联容器，它提供了一种无序的键值对的集合。它能够高效地存储和检索数据，并且可以通过键快速访问和修改值。本文将深入探讨Golan...

99+

2024-01-16

Golang map 性能优化
JavaScriptSet与Map数据结构详细分析

目录Set基本使用遍历操作Map基本使用Set ES6提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用 [扩展运算...

99+

2022-11-13

JavaScript Map JavaScript Set
详解Pytorch中的tensor数据结构

目录torch.TensorTensor 数据类型view 和 reshape 的区别Tensor 与 ndarray创建 Tensor传入维度的方法torch.Tensor tor...

99+

2024-04-02
Python Pandas 中的数据结构详解

目录1.Series1.1通过列表创建Series1.2通过字典创建Series2.DataFrame3.索引对象 4.查看DataFrame的常用属性前言： Pandas...

99+

2024-04-02
Javascript中扁平化数据结构与JSON树形结构转换详解

目录一. 先说简单的树形结构数扁平化处理二. 再讲将扁平化数据结构转JSON树状形结构扩充一个知识点：for in 与 for of 的区别：总结不废话，直接开干一. 先说简单的...

99+

2024-04-02
Java数据结构中的Map与Set该怎么理解

这篇文章主要为大家分析了Java数据结构中的Map与Set该怎么理解的相关知识点，内容详细易懂，操作细节合理，具有一定参考价值。如果感兴趣的话，不妨跟着跟随小编一起来看看，下面跟着小编一起深入学习“Java数据结构中的Map与Set该怎么理...

99+

2023-06-29
Javascript数据结构之栈和队列详解

目录前言栈（stack）栈实现解决实际问题栈的另外应用简单队列（Queue）队列实现队列应用 - 树的广度优先搜索（breadth-first search，BFS）优先队列优先队列...

99+

2024-04-02
JavaScript数据结构与算法之栈详解

目录1.认识栈2.面向过程方法源码编写栈2.1思考2.2需要实现的方法2.3源码实现，并调用类3.用面向对象的方法来源码书写3.1思考3.2需要实现的方法3.3源码及使用类4.总结1...

99+

2024-04-02
JS数据结构与算法中的队列结构详解

目录队列结构一.认识队列二.队列的应用三.队列类的创建四.队列的常见操作五.击鼓传花六.优先级队列七.优先级队列的实现队列结构一.认识队列受限的线性结构:我们已经学习了一种受限的...

99+

2022-11-13

JS数据结构与算法 JS队列结构
深入解析Golang中Map数据结构的简明指南

Golang中的Map是一种非常常用的数据结构，它可以将一个键(key)和一个值(value)关联在一起。Map在很多场合都非常有用，比如统计某个单词在一篇文章中出现的次数、保存学生的考试成绩等等。本文将深...

99+

2024-01-16

Golang map 详解
JS数据结构之队列结构详解

目录一.认识队列二.队列的应用三.队列类的创建四.队列的常见操作五.击鼓传花六.优先级队列七.优先级队列的实现一.认识队列受限的线性结构: 我们已经学习了一种受限的线性结构:栈结构...

99+

2022-11-13

JS队列结构 JS队列 JS 数据结构
【Java 数据结构】Map和Set的介绍

目录 1、Map 和 Set 的概念 2、模型 3、Map 的学习 3.1 关于 Map.Entry 3.2 Map 的常用方法 4、Set 的常用方法 5、 Map 和 Set 的注意点 1、Map 和 Set 的概念 Java...

99+

2023-09-11

数据结构
Java数据结构之栈的线性结构详解

目录一：栈二：栈的实现三：栈的测试四：栈的应用（回文序列的判断）总结一：栈栈是限制插入和删除只能在一个位置上进行的表，此位置就是表的末端，叫作栈顶。栈的基本操作分为push(入...

99+

2024-04-02
Python数据结构之图的存储结构详解

一、图的定义图是一种比树更复杂的一种数据结构，在图结构中，结点之间的关系是任意的，任意两个元素之间都可能相关，因此，它的应用极广。图中的数据元素通常被称为顶点 ( V e r t ...

99+

2024-04-02