Map与WeakMap类型在JavaScript中的使用详解
作者：陈莺莺呀
这篇文章主要介绍了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>
到此这篇关于Map与WeakMap类型在JavaScript中的使用的文章就介绍到这了,更多相关Map与WeakMap类型在JavaScript中的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！