大于小于map 就是映射的意思，即从键到值的映射。
map 保存键值对，并且能够记住键的原始插入顺序。
那么它和 object 有什么区别 ？
对象一般用字符串作键
const obj = {val : "object"}任何值(对象或者原始值) 都可以作为 map 的一个键或一个值
const m = new map();;m.t('val', 'map');m.t(1, 'number');m.t(new t([1, 2]), 't');m.t({}, 'object');console.log(m);所以，在键值对的数据结构中，map 比 object 更为合适
对于 t 的构造函数的参数，可以传递以下几种形式。
注意，要传递的是二维数组，因为二维数组才能体现出键值对
const m = new map([ ['val', 'map'], ['apple', 'fruit']]);console.log(m);
以 t 作为参数，也要体现出键值对形式
对 t 不了解的，想了解的可以看看下面这篇文章：javascript—t
const m = new map(new t([ ['tigger', 'animal'], ['orange', 'fruit']]));console.log(m);
const m1 = new map([ ['watermelon', 'fruit'], ['cat', 'animal']])const m2 = new map(m1);console.log(m2);
这里相当于把m1复制过去，给了m2，不过它们不是同一个 map
console.log(m2 === m1);
综上，map 构造函数的参数要能体现出键值对的形式。
map 的属性，有一个属性size，用来存储它的成员个数
const m = new map([ ['val', 'map'], ['cat', 'animal'], ['orange', 'fruit']]);console.log(m.size);
给 map 中添加成员
const m = new map();// 它的1000ms是多少秒参数为两个，第一个为键，第二个为值m.t('val', 'map');console.log(m);// 可以连缀 tm.t('orange', 'fruit').t('cat', 'animal');console.log(m);// 添加的新成员如果键已经存在了，那么将会覆盖它// 键的顺序不会发生改变，因为 map 能够记住键的原始插入顺序m.t('orange', 'sweet');console.log(m);通过键获取 map 的成员
const m = new map([ ['val', 'map'], ['orange', 'fruit'], ['cat', 'animal'], 清明节祭奠图片 [true, 'fal']]);console.log(m.get('val'));console.log(m.get(true));// 获取不存在的键时，会返回 undefinedconsole.log(m.get('tigger'));用来判断 map 是否含有某个键
const m = new map([ ['val', 'map'], ['orange', 'fruit'], ['cat', 'animal'], [true, 'fal']]);console.log(m.has(true));console.log(m.has('true'));通过键，来删除 map 中的成员
const m = new map([ ['val', 'map'], ['orange', 'fruit'], ['cat', 'animal'], [true, 'fal']]);m.delete('cat');// 删除不存在的成员，将什么也不会发生，也不会报错m.delete('true');console.log(m);删除 map 的所有成员
const m = new map([ ['val', 'map'], ['orange', 'fruit'], ['cat', 'animal'], [true, 'fal']]);m.clear();console.log(m);
用来遍历 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, 'fal']]);m.foreach(function(value, key, map) { console.log(value, key, map == m);});const m = new map([ ['val', 'map'], ['orange', 'fruit'], ['cat', 'animal'], [true, 'fal']]);m.foreach(function(value, key, map) { console.log(value, key, map == m);});再来看第二个参数
const m = new map([ ['val', 'map'], ['orange', 'fruit'], ['cat', 'animal'], [true, 'fal']]);m.foreach(function(value, key, map) { console.log(this);}, document);const m = new map([ ['val', 'map'], ['orange', 'fruit'], ['cat', 'animal'], [true, 'fal']]);m.foreach(function(value, key, map) { console.log(this);}, document);map 对键名是否相同的判断基本遵循严格相等===的判断
不过对于nan，在t中，nan等于nan
举个例子来看看 map 的应用：
对dom元素进行操作
先写一个 html 代码：
<!doctype html><html lang="en"><head> <meta chart="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.querylectorall('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>本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注www.887551.com的更多内容!
本文发布于:2023-04-04 18:07:46，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/0a244665a9a15e2e89ce25bb4a78bf51.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：JavaScript中的Map数据结构详解.doc
本文 PDF 下载地址：JavaScript中的Map数据结构详解.pdf
| 留言与评论（共有 0 条评论） |
