Map#
对象的key只能是字符串格式
1let obj = {
2 "1": "css",
3 1: "js", // 这里的 1 会被转成字符串 '1'
4};
5console.log(obj); // { '1': 'js' }
6
7// 如果想把对象obj做为key
8let dx = {
9 [obj]: "dancy",
10};
11console.log(dx); // { '[object Object]': 'dancy' }
12console.log(dx["[object Object]"]); // dancy
13console.log(dx[obj.toString()]); // dancyMap类型可以把对象、函数、字符串、数值作为键名
1let map = new Map();
2map.set("str", "string");
3map.set(true, "boolean");
4map.set(function () {}, "function");
5map.set({}, 'object')
6map.set(1, "number");
7console.log(map); // {'str' => 'string', true => 'boolean', ƒ => 'function', {…} => 'object', 1 => 'number'}1let map = new Map([
2 ["str", "string"],
3 [true, "boolean"],
4]);
5map
6 .set(function () {}, "function")
7 .set({}, "object")
8 .set(1, "number");
9console.log(map); // {'str' => 'string', true => 'boolean', ƒ => 'function', {…} => 'object', 1 => 'number'}:::
Map类型的增删改查#
1// set() 方法会向 Map 对象添加或更新一个指定的键值对。
2let map = new Map();
3map.set("str", "string");
4console.log(map); // {'str' => 'string'}1// delete() 方法从该 map 中删除指定键的元素。
2let map = new Map([["str", "string"]]);
3console.log(map.delete("str")); // true
4console.log(map); // {}
5
6// clear() 方法会移除该 map 中的所有元素。
7let map = new Map([
8 ["str", "string"],
9 [true, "boolean"],
10]);
11console.log(map.clear()); // undefined
12console.log(map); // {}1// 新增同名元素实现修改操作
2let map = new Map([["str", "string"]]);
3map.set("str", "ss");
4console.log(map.get("str")); // ss1// get() 方法返回该 map 中的指定元素
2let map = new Map([["str", "string"]]);
3console.log(map.get("str")); // string1// has() 方法返回一个布尔值,指示具有指定键的元素是否存在。
2let map = new Map([["str", "string"]]);
3console.log(map.has("str")); // true:::
遍历Map类型数据#
1// keys() 方法返回一个新的 map 迭代器 对象,该对象包含了此 map 中每个元素的键,按插入顺序排列。
2let map = new Map([
3 ["str", "string"],
4 [true, "boolean"],
5 [function () {}, "function"],
6 [{}, "object"],
7 [1, "number"],
8]);
9
10console.log(map.keys()); // { 'str', true, [Function (anonymous)], {}, 1 }1// values() 方法返回一个新的 map 迭代器对象,该对象包含此 map 中每个元素的值,按插入顺序排列。
2let map = new Map([
3 ["str", "string"],
4 [true, "boolean"],
5 [function () {}, "function"],
6 [{}, "object"],
7 [1, "number"],
8]);
9
10console.log(map.values()); // { 'string', 'boolean', 'function', 'object', 'number' }1// entries() 方法返回一个新的 map 迭代器 (en-US)对象,该对象包含了此 map 中的每个元素的 [key, value] 对,按插入顺序排列。
2let map = new Map([
3 ["str", "string"],
4 [true, "boolean"],
5 [function () {}, "function"],
6 [{}, "object"],
7 [1, "number"],
8]);
9
10console.log(map.entries()); // { [ 'str', 'string' ], [ true, 'boolean' ], [ [Function (anonymous)], 'function' ], [ {}, 'object' ], [ 1, 'number' ] }1// for...of...
2let map = new Map([
3 ["str", "string"],
4 [true, "boolean"],
5 [function () {}, "function"],
6 [{}, "object"],
7 [1, "number"],
8]);
9
10for (let key of map.keys()) {
11 console.log(key);
12}
13
14for (let key of map.values()) {
15 console.log(key);
16}
17
18for (let [key, value] of map.entries()) {
19 console.log(key, value);
20}1// forEach() 方法按插入顺序对该 map 中的每个键/值对执行一次提供的函数。
2let map = new Map([
3 ["str", "string"],
4 [true, "boolean"],
5 [function () {}, "function"],
6 [{}, "object"],
7 [1, "number"],
8]);
9
10map.forEach((value, key) => {
11 console.log(key, value);
12});:::
Map类型转换操作#
1let map = new Map([
2 ["str", "string"],
3 [true, "boolean"],
4 [function () {}, "function"],
5 [{}, "object"],
6 [1, "number"],
7]);
8
9// 数据还原
10console.log([...map]);
11console.log([...map.entries()]);
12// 转数组
13console.log(...map);
14// 转换键
15console.log([...map.keys()]);
16// 转换值
17console.log([...map.values()]);
18
19// 获取值为 'boolean' 的数据
20const newArr = [...map].filter(([key, value]) => value === "boolean");
21console.log(...new Map(newArr).values())Map管理DOM节点#
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Map</title>
7 </head>
8
9 <body>
10 <div name="html">hello html</div>
11 <div name="css">hello css</div>
12 <div name="javascript">hello javascript</div>
13 <script>
14 let map = new Map();
15 document.querySelectorAll("div").forEach((item) => {
16 map.set(item, {
17 content: item.getAttribute("name"),
18 });
19 });
20 map.forEach((config, ele) => {
21 console.log(config);
22 ele.addEventListener("click", function () {
23 alert(config.content);
24 });
25 });
26 </script>
27 </body>
28</html>使用Map类型控制网站表单提交#
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Map</title>
7 </head>
8
9 <body>
10 <form action="" onsubmit="return post()">
11 接受协议:
12 <input type="checkbox" name="agreement" error="请接受协议" />
13 我是学生:
14 <input type="checkbox" name="student" error="网站只对学生开放" />
15 <input type="submit" />
16 </form>
17 <script>
18 function post() {
19 let map = new Map();
20 let inputs = document.querySelectorAll("[error]");
21 inputs.forEach((item) => {
22 map.set(item, {
23 error: item.getAttribute("error"),
24 status: item.checked,
25 });
26 });
27 return [...map].every(([ele, config]) => {
28 config.status || alert(config.error);
29 return config.status;
30 });
31 }
32 </script>
33 </body>
34</html>目录