深入理解Map-优快云博客

本文详细介绍了JavaScript中Map数据结构的特点及应用场景，对比了Map与传统对象的不同，并通过实例展示了如何利用Map进行DOM元素样式批量设置。

一、Map 是什么

1. 认识 Map

2. Map 和对象的区别

对象一般用字符串当作键, 非字符串会调用toString方法将其转为字符串。

Map 的键既可以是基本数据类型（数字、字符串、布尔值、undefined、null），也可以是引用数据类型（[]、{}、函数、Set、Map 等）。

二、Map 实例的方法和属性

1. 方法

set()

get()

has()

delete()

clear()

forEach()

2. 属性

size

三、Map 构造函数的参数

1. 数组

2. Set、Map 等

Set

Map

四、Map 的注意事项

1. 判断键名是否相同的方式

2. 什么时候使用 Map

如果只是需要 key -> value 的结构。
需要字符串以外的值做键。
需要使用Map中的方法。
只有模拟现实世界的实体时，才使用对象。

五、Map 的应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Map 的应用</title>
</head>

<body>
    <p>123</p>
    <p>321</p>
    <p>34567</p>
    <script>
        const [p1, p2, p3] = document.querySelectorAll('p');
        const m = new Map([
            [
                p1,
                {
                    color: 'red',
                    backgroundColor: 'yellow',
                    fontSize: '40px'
                }
            ],
            [
                p2,
                {
                    color: 'green',
                    backgroundColor: 'pink',
                    fontSize: '40px'
                }
            ],
            [
                p3,
                {
                    color: 'blue',
                    backgroundColor: 'orange',
                    fontSize: '40px'
                }
            ]
        ]);

        m.forEach((propObj, elem) => {
            for (const p in propObj) {
                elem.style[p] = propObj[p];
            }
        });

        console.log(m);
    </script>
</body>

</html>