1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>07Map与WeakMap类型</title>
9 </head>
10 <body>
11 <!--7.5 Map类型管理DOM节点-->
12 <!--<div name = "百度">baidu.com</div>-->
13 <!--<div name = "新浪">sina.com</div>-->
14
15 <script>
16 // array、set、map、obj都是引用类型(每个对象独立)。
17 // 字符串、数字为非引用类型，array(可重复)、set(自动去重)、map(键重复时只保留最后一个)、obj(键(包括引用类型的键)全部转为字符串类型，重复的只保留最后一个)。
18
19
20 /*7.1 Map类型特点与创建方法*/
21 /*7.1.1 对象中的键只能是字符串*/
22 // let obj1 = {
23 // 1: "baidu.com",
24 // "1": "LiuChang"
25 // };
26 // console.log(obj1); // {1: 'LiuChang'}
27
28 // let obj = {
29 // name: "baidu.com"
30 // };
31 // let name = {
32 // [obj]: "xinLang"
33 // };
34 // console.log(name[obj]); // xinLang
35
36 /*7.1.2 map中的键可以是任意类型*/
37 // let map = new Map();
38 // map.set("name", "baiDu");
39 // map.set(function(){}, "sina");
40 // map.set({},"youTube");
41 // map.set(1,"souHu");
42 // map.set("1","aiQiYi");
43 // console.log(map);
44 // Map(5){'name' => 'baiDu', ƒ => 'sina', {…} => 'youTube', 1 => 'souHu', '1' => 'aiQiYi'}
45
46 /*7.1.3 new map对象时添加数据*/
47 // let map = new Map([[1,"baiDu"],['1',"sina"]]);
48 // console.log(map); // Map(2){1 => 'baiDu', '1' => 'sina'}
49
50 /*7.2 Map类型增删改查操作*/
51 /*7.2.1 增*/
52 // let obj = {
53 // name: "baiDu"
54 // };
55 // let map = new Map();
56 // map.set(obj,"baidu.com");
57 // console.log(map); // Map(1){{…} => 'baidu.com'}
58
59 /*7.2.2 查*/
60 // let obj = {
61 // name: "baiDu"
62 // };
63 // let map = new Map();
64 // map.set(obj,"baidu.com");
65 // // 查找某个键
66 // console.log(map.get(obj)); // baidu.com
67 // // 判断键是否存在
68 // console.log(map.has(obj)); // true
69
70 /*7.2.3 删*/
71 // let obj = {
72 // name: "baiDu"
73 // };
74 // let map = new Map();
75 // map.set(obj,"baidu.com");
76 // // 删除某个键
77 // // console.log(map.delete(obj),map); // true Map(0){size: 0}
78 // // 清空map
79 // console.log(map.clear(), map); // undefined Map(0){size: 0}
80
81 /*7.3 遍历Map类型数据*/
82 // let obj = new Map([["百度","baidu.com"], ["新浪","sina.com"]]);
83 // // 返回所有的键
84 // console.log(obj.keys()); // MapIterator{'百度', '新浪'}
85 // // 返回所有的键值
86 // console.log(obj.values()); // MapIterator{'baidu.com', 'sina.com'}
87 // // 返回键值对
88 // console.log(obj.entries()); // MapIterator{'百度' => 'baidu.com', '新浪' => 'sina.com'}
89 // // for of 方式循环
90 // // 得到键
91 // for(let key of obj.keys()) {
92 // console.log(key); // 百度 新浪
93 // }
94 // // 得到值
95 // for (let value of obj.values()) {
96 // console.log(value); // baidu.com sina.com
97 // }
98 // // 得到键值
99 // for (let [key,value] of obj.entries()) {
100 // console.log(key,value); // 百度 baidu.com 新浪 sina.com
101 // }
102 // // forEach循环
103 // obj.forEach(function (value,key){
104 // console.log(key,value); // 百度 baidu.com 新浪 sina.com
105 // });
106
107 /*7.4 Map类型转换操作*/
108 /*7.4.1 map类型转换为数组*/
109 // let obj = new Map([["百度","baidu.com"], ["新浪","sina.com"]]);
110 // console.log([...obj]); // console.log([...obj.entries()]);
111 /*
112 (2) [Array(2), Array(2)]
113 0: (2) ['百度', 'baidu.com']
114 1: (2) ['新浪', 'sina.com']
115 length: 2
116 [[Prototype]]: Array(0)
117 */
118
119 // console.log(...obj); // (2)['百度', 'baidu.com'] (2)['新浪', 'sina.com']
120 // console.log([...obj.keys()]); // (2)['百度', '新浪']
121 // console.log([...obj.values()]); // (2)['baidu.com', 'sina.com']
122
123 /*7.4.2 map过滤*/
124 // let obj = new Map([["百度","baidu.com"], ["新浪","sina.com"]]);
125 // let newArray = [...obj].filter(item => {
126 // return item[1].includes("sina.com");
127 // });
128 // console.log(newArray);
129 // /*
130 // [Array(2)]0: (2)['新浪', 'sina.com']length: 1[[Prototype]]: Array(0)
131 // */
132 // let map = new Map(newArray);
133 // console.log(map); // Map(1){'新浪' => 'sina.com'}
134
135 /*7.5 Map类型管理DOM节点*/
136 // let map = new Map();
137 // document.querySelectorAll('div').forEach((item) => {
138 // map.set(item,{content: item.getAttribute('name')});
139 // });
140 // console.log(map); // Map(2){div => {…}, div => {…}}
141 // map.forEach((config, elem) => {
142 // console.log(config, elem);
143 // /*
144 // {content: '百度'} <div name="百度">baidu.com</div>
145 // {content: '新浪'} <div name="新浪">sina.com</div>
146 // */
147 // elem.addEventListener('click',() => {
148 // alert(config.content);
149 // });
150 // });
151
152 /*7.6 WeakMap的语法*/
153 // WeakMap的键只能是对象
154 // let map = new WeakMap();
155 // // 键非引用类型会报错
156 // // map.set("百度","baidu.com");
157 // // 键使用引用类型
158 // map.set(["百度"],"baidu.com");
159 // map.set(["百度"],"baidu.com");
160 // console.log(map); // WeakMap{Array(1) => 'baidu.com', Array(1) => 'baidu.com'}
161
162 // WeakMap删除和判断元素
163 // let arr = [];
164 // let map = new WeakMap();
165 // map.set(arr,"baidu.com");
166 // console.log(map.has(arr)); // true
167 // console.log(map.delete(arr),map); // true WeakMap{}
168
169 /*7.7 WeakMap弱引用类型实验*/
170 // 弱类型指，其他引用删除后，WeakMap自动删除。
171 // 由于WeakMap的弱引用性，所以WeakMap不能进行循环遍历等值操作，主要用于保存对象数据。
172 // let obj = {name: "百度"};
173 // let web = obj;
174 // let map = new WeakMap();
175 // // WeakMap不占用内存引用计数器
176 // map.set(obj,"baidu.com");
177 // // 将两个内存引用计数器删除
178 // obj = null;
179 // web = null;
180 // setTimeout(() => {
181 // console.log(map);
182 // },10000); // WeakMap{}
183
184 </script>
185 </body>
186 </html>
