- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- JS中的Map与WeakMap类型的用法是什么？
JS中的Map与WeakMap类型的用法是什么？
Admin 2021-10-29 群英技术资讯 328 次浏览
这篇文章主要给大家分享JS中的Map与WeakMap类型的用法，文中示例代码介绍的非常详细，对大家学习Map与WeakMap类型的使用和创建等操作有一定的帮助，感兴趣的朋友可以参考，希望大家阅读完这篇文章能有所收获，下面我们一起来学习一下吧。
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>
关于JS中的Map与WeakMap类型的使用就介绍到这，上述Map与WeakMap类型使用的示例有一定的借鉴价值，需要的朋友可以了解看看，希望本文能对大家有帮助，想要了解更多大家可以关注其它的相关文章。
文本转载自脚本之家
标签：
map与weakmap
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
最新WebComponent开发教程
这篇文章主要为大家介绍了2023年了该了解下WebComponent使用教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
-
axios的基本使用是怎样，如何解决跨域问题
本篇文章主要旨在帮助正在学vue3或者准备学vue3的同学了解网络请求axios该如何使用，防止接触了一点点vue3的同学会有个疑问。有兴趣的小伙伴可以关注一下
-
React高阶组件怎样实现，使用的好处是什么
什么是 React 高阶组件？聊聊怎么使用React高阶组件创建一个面包屑导航，希望对大家有所帮助！
-
jQuery什么方法让select 不可编辑？
这篇文章给大家分享的是jQuery实现select不可编辑但可传值的方法。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
-
用JavaScript写九宫格抽奖的思路及方法是什么
用JavaScript写一个九宫格的抽奖盘，供大家参考，具体内容如下点击中间的块，选中奖品的亮块会在边缘的8个块循环；选中后，弹出选中的内容；代码参考：HTML文件:bodydiv class=box ul id=jiangPin lia href=javascript:viod(0); span奖
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
