Map与WeakMap类型在JavaScript中的使用
map类型特点与创建方法：
<!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类型增删改查操作：
<!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类型数据：
<!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类型转换操作：
<!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节点：
<!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类型控制网站表单提交：
<!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的语法使用：
<!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弱引用类型体验：
<!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开发选课组件：
<!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>
赞 (0)