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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
</style>
</head>
<body>
<script>
// 对象的键名会自动转为字符串
// let obj = {
// 1: 'cyy1',
// '1': 'cyy2'
// };
// console.log(obj);
// 对象的键名是对象时，会自动转为字符串
// 读取时也要先转为字符串再读取
// let obj = {
// name: 'cyy'
// };
// let obj2 = {
// obj: 'cyy2',
// [obj]: 'cyy3'
// };
// console.log(obj2);
// console.log(obj2[obj.toString()]);
// map类型，什么都可以作为键，键名可以是任何类型
// let map = new Map();
// map.set('name', 'cyy');
// map.set(function() {}, 'cyy2');
// map.set({}, 'cyy3');
// map.set(1, 'cyy4');
// console.log(map);
// 构造函数创建时加入数据
let map = new Map([
['name', 'cyy'],
['age', 18]
]);
console.log(map);
// 支持链式操作
let str = 'cyy';
let str2 = str.toUpperCase().substr(1, 2);
console.log(str2);
map.set('11', 11).set('22', 22);
console.log(map);
</script>
</body>
</html>
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
</style>
</head>
<body>
<script>
let obj = {
name: 'cyy'
};
let map = new Map();
map.set(obj, 'obj');
console.log(map.has(obj));
console.log(map);
console.log(map.get(obj));
console.log(map.delete('abc'));
console.log(map.delete(obj));
map.clear();
console.log(map);
</script>
</body>
</html>
|
遍历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
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
</style>
</head>
<body>
<script>
let map = new Map([
[1, 11],
[2, 22]
]);
// console.log(map.keys());
// console.log(map.values());
// console.log(map.entries());
// for (let k of map.keys()) {
// console.log(k);
// }
// for (let v of map.values()) {
// console.log(v);
// }
// for (let e of map.entries()) {
// console.log(e);
// }
// for (let [k, v] of map.entries()) {
// console.log(`${k}--${v}`);
// }
map.forEach((item, key) => {
console.log(item + '--' + key);
})
</script>
</body>
</html>
|
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
34
35
36
37
38
39
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
</style>
</head>
<body>
<script>
let map = new Map([
['name', 'cyy'],
['age', '18']
]);
// console.log(...map);
// console.log([...map]);
// console.log([...map.entries()]);
// console.log([...map.keys()]);
// console.log([...map.values()]);
// let arr = [...map].filter(item => item[1].includes('cyy'));
let arr = [...map].filter(item => {
return item[1].includes('cyy');
});
// console.log(arr);
let new_map = new Map(arr);
console.log(new_map);
console.log(new_map.values());
// ...是展开语法
console.log(...new_map.values());
</script>
</body>
</html>
|
map类型管理DOM节点：
|
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
34
35
36
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
</style>
</head>
<body>
<div name="cyy1">cyy1</div>
<div name="cyy2">cyy2</div>
<script>
let map = new Map();
let divs = document.querySelectorAll('div');
divs.forEach(item => {
// 往map中压入数据
map.set(item, {
content: item.getAttribute('name')
});
});
// console.log(map);
map.forEach((config, elem) => {
// console.log(config, elem);
elem.addEventListener('click', function() {
console.log(config.content);
});
})
</script>
</body>
</html>
|
使用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
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
</style>
</head>
<body>
<form action="#" onsubmit="return post()">
接受协议：
<input type="checkbox" name="agreement" error="请接受协议"> 我是学生：
<input type="checkbox" name="student" error="网站只对学生开放">
<input type="submit" value="提交">
</form>
<script>
function post() {
let map = new Map();
let inputs = document.querySelectorAll('[error]');
console.log(inputs);
inputs.forEach(item => {
map.set(item, {
error: item.getAttribute('error'),
status: item.checked
});
});
// console.log(map);
return [...map].every(([elem, config]) => {
// 短路操作，前面为真，则不会执行后面
// 前面会假，则执行后面
config.status || alert(config.error);
return config.status;
// console.log(config);
});
}
</script>
</body>
</html>
|
WeakMap的语法使用：
|
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
</style>
</head>
<body>
<div>cyy</div>
<div>cyy2</div>
<script>
// WeakMap的键只能是引用对象
// let map = new WeakMap();
// map.set('name');
// console.log(map);
// map.set([]);
// console.log(map);
// let map = new WeakMap();
// let divs = document.querySelectorAll('div');
// divs.forEach(item => map.set(item, item.innerHTML));
// console.log(map);
// WeakMap也是弱引用类型
// let arr = [];
// let map = new WeakMap();
// map.set(arr, 'cyy');
// map.delete(arr);
// console.log(map.has(arr));
// console.log(map);
// 弱引用类型，values、keys、entries、迭代循环都用不了
let map = new WeakMap();
// console.log(map.keys());
for (const iterator of map) {
console.log(iterator);
}
</script>
</body>
</html>
|
WeakMap弱引用类型体验：
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
</style>
</head>
<body>
<script>
let a = { name: 'cyy' };
let b = a;
let map = new WeakMap();
map.set(a, 'cuu2');
console.log(map);
a = null;
b = null;
console.log(map);
setTimeout(function () {
console.log(map);
}, 1000);
</script>
</body>
</html>
|
使用WeakMap开发选课组件：
|
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
width: 100%;
display: flex;
flex: 1;
}
section {
border: 2px solid #ddd;
width: 50%;
padding: 10px;
}
ul {
list-style: none;
}
li {
padding: 10px;
border: 2px solid orange;
margin-bottom: 5px;
position: relative;
}
a {
display: inline-block;
position: absolute;
right: 10px;
width: 20px;
height: 20px;
background: green;
color: white;
text-decoration: none;
line-height: 20px;
text-align: center;
}
#list span {
background: green;
border-radius: 5px;
padding: 5px;
color: white;
margin: 5px;
}
#list {
margin-top: 20px;
}
</style>
</head>
<body>
<main>
<section>
<ul>
<li><span>html</span><a href="javascript:;">＋</a></li>
<li><span>css</span><a href="javascript:;">＋</a></li>
<li><span>js</span><a href="javascript:;">＋</a></li>
</ul>
</section>
<section>
<strong id="count">共选了2门课</strong>
<p id="list">
<!-- <span>111</span> -->
</p>
</section>
</main>
<script>
class Lesson {
// 构造函数
constructor() {
this.lis = document.querySelectorAll('li');
this.countElem = document.getElementById('count');
this.listElem = document.getElementById('list');
// console.log(this.lis, this.countElem, this.listElem);
this.map = new WeakMap();
}
run() {
this.lis.forEach(li => {
li.querySelector('a').addEventListener('click', event => {
let a = event.target;
// console.log(li);
// console.log(event.target.parentElement);
const state = li.getAttribute('select');
if (state) {
// 移除
li.removeAttribute('select');
this.map.delete(li);
a.style.backgroundColor = 'green';
a.innerHTML = '＋';
} else {
// 添加
li.setAttribute('select', true);
this.map.set(li);
a.style.backgroundColor = 'red';
a.innerHTML = '-';
}
// console.log(this.map);
this.render();
});
})
}
render() {
this.countElem.innerHTML = `共选了${this.count()}门课`;
// console.log(this.count());
this.listElem.innerHTML = this.list();
}
count() {
return [...this.lis].reduce((count, li) => {
return count += this.map.has(li) ? 1 : 0;
}, 0);
}
list() {
let lis = [...this.lis].filter(li => {
return this.map.has(li);
}).map(li => {
return `<span>${li.querySelector('span').innerHTML}</span>`;
}).join('');
// console.log(lis);
return lis;
}
}
new Lesson().run();
</script>
</body>
</html>
|
到此这篇关于Map与WeakMap类型在JavaScript中的使用的文章就介绍到这了,更多相关Map与WeakMap类型在JavaScript中的使用内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://www.cnblogs.com/chenyingying0/archive/2020/11/17/13995123.html