Map 类型特点和创建方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| let obj = { 1: "李四", "1": "张三", }; console.log(obj);
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) 查询单个
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| let map = new Map();
map.set("name", "李四"); map.set("age", "10");
console.log(map.delete("age"));
console.log(map.get("name"));
console.log(map);
|
遍历 Map 类型
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| let map = new Map(); map.set("name", "李四"); map.set("age", "15");
console.log(map.keys());
console.log(map.values());
console.log(map.entries());
for (let key of map.keys()) { console.log(key); }
for (let val of map.values()) { console.log(val); }
for (let [key, val] of map.entries()) { console.log(key, val); }
map.forEach((item, key) => { console.log(item, key); });
|
Map 类型转换
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| let map = new Map(); map.set("name", "李四"); map.set("age", "18");
console.log([...map]);
let newmap = [...map];
let newarr = newmap.filter((item) => { return item[1].includes("李四"); });
let map2 = new Map(newarr);
console.log(...map2.keys());
|
Map 类型操作 DOM 节点
1 2
| <div name="非常棒">songzhengxiang</div> <div name="这都被你发现了">千万别点我</div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| let map = new Map();
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 控制表单提交
1 2 3 4 5 6 7 8 9
| <form action="" onsubmit="return post()"> 服务协议 <input type="checkbox" error="请勾选协议" /> 权限管理 <input type="checkbox" error="请勾选权限管理" />
<input type="submit" value="提交" /> </form>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| 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]; return newmap.every( ([div, checkbox]) => checkbox.state || alert(checkbox.error) ); }
|
WeakMap 的使用
WeakMap 对象是一组键 / 值对的集合,其中的键是弱引用的。其键必须是对象,而值可以是任意的
1 2 3 4 5 6 7 8
| let weakmap = new WeakMap(); const o1 = {}; const o2 = function() {}; weakmap.set(o1, "37"); weakmap.set(o2, undefined);
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);