JavaScript Map 数据结构：从基础概念到实战应用

作者：半夏时间：2026-10-24 22:22:54浏览：434

本文深入解析JavaScript中的Map数据结构，阐述其与Object在键值处理上的核心差异。详细讲解Map的构造函数用法、size属性及set、get、has、delete、clear、forEach等关键实例方法，并通过DOM操作示例展示实际应用场景，帮助开发者高效利用Map管理键值对数据。

1. Map 概念解析

Map 本质为键值映射关系。

Map 存储键值对，并保留键的插入顺序。

它与 Object 有何差异？

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);

1. Map 概念解析

因此，在键值对场景中，Map 优于 Object。

2. Map 构造函数用法

Set 构造函数可接收多种参数形式。

2.1) 数组形式

需传递二维数组，以体现键值对结构。

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

1. Map 概念解析

2.2) Set 形式

使用 Set 作为参数时，需体现键值对格式。

若对 Set 不熟悉，可参考文章：JavaScript—Set。

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

1. Map 概念解析

2.3) Map 形式

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

1. Map 概念解析

此处将m1复制至m2，二者并非同一 Map 实例。

console.log(m2 === m1);

1. Map 概念解析

综上，Map 构造函数参数需体现键值对形式。

3. Map 实例属性与方法

3.1) Map 属性

size

Map 拥有size属性，用于存储成员数量。

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

1. Map 概念解析

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);

1. Map 概念解析

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'));

1. Map 概念解析

has

用于判断 Map 是否包含特定键。

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

1. Map 概念解析

delete

通过键删除 Map 中的成员。

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

1. Map 概念解析

clear

删除 Map 中所有成员。

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

1. Map 概念解析

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);
});

1. Map 概念解析

接着分析第二个参数。

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);

1. Map 概念解析

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>

此时效果如下：

1. Map 概念解析

随后对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>

1. Map 概念解析

总结

本文到此结束，希望能为您提供帮助，也欢迎您关注本站更多内容！

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13