Map 和 WeakMap 总结

Map 类型特点和创建方式

// map类型和obj类型的区别:对象的键只能是字符串类型，map的键名可以是各种类型
let obj = {
  1: "李四",
  "1": "张三",
};
console.log(obj); // 张三

// 声明Map类型
let map = new Map();
// 键名为字符串
map.set("name", "李四");
// 键名为数字
map.set(1, "数字");
// 键名为方法
map.set(function() {}, "方法作为键名");
// 对象键名
map.set({}, "对象键名");
console.log(map);

Map 类型的增删改查

map.set 增加
map.delete(key) 删除单个
map.clear() 删除全部
map.get(key) 查询单个

let map = new Map();
// 增
map.set("name", "李四");
map.set("age", "10");

// 删除
// 单个删除，返回布尔值
console.log(map.delete("age"));
// 全部删除，没有返回值
// map.clear()

// 查询
console.log(map.get("name")); // 李四

console.log(map);

遍历 Map 类型

let map = new Map();
map.set("name", "李四");
map.set("age", "15");

// 遍历所有的key
console.log(map.keys());

// 遍历所有的值
console.log(map.values());

// 遍历值和键
console.log(map.entries());

// for of 遍历键名
for (let key of map.keys()) {
  console.log(key);
}

// for of 遍历值
for (let val of map.values()) {
  console.log(val);
}

// 对象同时接收键和值
for (let [key, val] of map.entries()) {
  console.log(key, val);
}

// forEach 遍历 map,第一个值是键值，第二个值是键名
map.forEach((item, key) => {
  console.log(item, key);
});

Map 类型转换

let map = new Map();
map.set("name", "李四");
map.set("age", "18");

// 通过展开语法吧map变成数组
console.log([...map]);

let newmap = [...map];
// filter过滤map中的键值为李四的值
let newarr = newmap.filter((item) => {
  return item[1].includes("李四");
});
// 再用map接收过滤后的值
let map2 = new Map(newarr);
// 通过展开语法得到对应的key值
console.log(...map2.keys());

Map 类型操作 DOM 节点

<div name="非常棒">songzhengxiang</div>
<div name="这都被你发现了">千万别点我</div>

// 声明map变量
let map = new Map();
// 遍历所有div元素
let divs = document.querySelectorAll("div");

divs.forEach((item) => {
  map.set(item, {
    name: item.getAttribute("name"),
  });
});

// 第一个是键值，第二个是键名
map.forEach((content, divitem) => {
  divitem.addEventListener("click", () => {
    alert(content.name);
  });
});
console.log(map);

Map 控制表单提交

<form action="" onsubmit="return post()">
  服务协议
  <input type="checkbox" error="请勾选协议" />
  权限管理
  <input type="checkbox" error="请勾选权限管理" />

  <input type="submit" value="提交" />
</form>

function post() {
  // 获取所有多选款
  let error = document.querySelectorAll("[error]");
  let map = new Map();
  error.forEach((item) => {
    map.set(item, {
      error: item.getAttribute("error"),
      state: item.checked,
    });
  });
  let newmap = [...map];
  // every判断数组中的元素是否全部符合条件，全部符合返回true，有一个不符合返回false
  return newmap.every(
    ([div, checkbox]) => checkbox.state || alert(checkbox.error)
  );
}

WeakMap 的使用

WeakMap 对象是一组键 / 值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的

let weakmap = new WeakMap();
const o1 = {};
const o2 = function() {};
weakmap.set(o1, "37");
weakmap.set(o2, undefined);
// weakmap.set("name","李四") // 报错
console.log(weakmap);

WeakMap 弱引用类型体验

let obj = {
  name: "lisi",
};
let weakmap = new WeakMap();
weakmap.set(obj, "lisi");
// 打印出结果可以看到里面有值，但是点开里面是没有值得
console.log(weakmap);
obj = null;

console.log(weakmap);

setTimeout(() => {
  // 倒计时一秒后再打印结果为空
  console.log(weakmap);
}, 1000);


作者: https://szxio.gitee.io/hexoblog/JavaScript/Map/