JavaScript中的Map数据结构详解
程序员文章站
2022-06-10 11:54:34
目录1. 什么是 map2. map 构造函数2.1) 数组2.2) set2.3) map3. map 的实例属性和方法3.1) 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>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注的更多内容!