欢迎光临
我的个人博客网站

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>

Map与WeakMap类型在JavaScript中的使用

 

 

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中的使用

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » Map与WeakMap类型在JavaScript中的使用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏