Set与WeakSet类型在JavaScript中的使用

  • A+
所属分类:Web前端
摘要

set类型与array与object对比分析: set元素检测与管理: 类型之间互相帮助才是好兄弟:

set类型与array与object对比分析:

<!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 arr = [1, 1, 1, 1, 1];         // console.table(arr);          // set集合         // let set = new Set([1, 2, 3, 4, 5]);         // console.log(set);          // 区分类型,相同类型的不可重复         // let set = new Set();         // set.add(1);         // set.add(1);         // set.add('1');         // console.log(set);          // set和object的区别         // 对象中:不同类型可隐式转换的也不可重复,否则前面的会被后面的覆盖         // let obj = {         //     1: 'cyy1',         //     '1': 'cyy2'         // };         // console.log(obj);          let obj = {             1: 'cyy1',             '1': 'cyy2'         };         // let cyy = {         //     obj: 'yaya'         // };         // console.log(cyy.obj);         // 变量需要用方括号         let cyy = {             [obj]: 'yaya'         };         // 对象作为属性名,会自动调用toString(),转为字符串         console.log(cyy);//[object Object]         console.log(obj.toString());         console.log(cyy[obj.toString()]);     </script> </body>  </html>

 

set元素检测与管理:

<!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 set = new Set('cyy');         // console.log(set);         // 字符串会转数组,且不可重复;相当于以下写法         // let set = new Set([...'cyy']);         // console.log(set);          //通常还是用数组形式         // 获取set长度         let set = new Set([1, 2, 3]);         console.log(set.size);         // 判断set是否含有某个值         console.log(set.has(1));         console.log(set.has(11));         // 删除set中的某个值         set.delete(2);         console.log(set);         // 获取set的值         console.log(set.values());         // 清空set         set.clear();         console.log(set.size);     </script> </body>  </html>

 

类型之间互相帮助才是好兄弟:

<!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>         // set转数组         // let set = new Set([1, 2, 3, 4]);         // console.log(Array.from(set));         // console.log([...set]);          // let set = new Set('123456789');         // let res = [...set].filter((item) => item < 5);         // console.log(new Set(res));          // 通过set帮助array去重         let arr = [1, 2, 3, 5, 2, 4, 1];         console.log([...new Set(arr)]);     </script> </body>  </html>

 

遍历set类型的方式:

<!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>         // set没有键名,key和value都是键值         // let set = new Set([11, 22, 33, 44]);         // console.log(set.keys());         // console.log(set.values());         // console.log(set.entries());          let set = new Set([11, 22, 33, 44]);         // set.forEach(function (value, index, arr) {         //     console.log(value, index, arr);         // });          for (let value of set) {             console.log(value);         }     </script> </body>  </html>

 

使用set处理网站关键词:

 

<!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>         body {             padding: 200px;         }                  ul {             list-style: none;             padding: 0;             margin: 0;         }                  li {             padding: 10px;             border: 1px solid #ddd;         }     </style> </head>  <body>     <input type="text" name="keyword">     <ul></ul>      <script>         // let obj = {         //     data: new Set(),         //     set keyword(value) {         //         this.data.add(value);         //     },         //     show() {         //         let ul = document.querySelector('ul');         //         ul.innerHTML = '';         //         this.data.forEach(function(value) {         //             ul.innerHTML += `<li>${value}</li>`;         //         });         //     }         // }          // let input = document.querySelector('[name=keyword]');         // input.addEventListener('blur', function() {         //     obj.keyword = this.value;         //     obj.show();         // });           let obj = {             data: new Set(),             keyword(value) {                 this.data.add(value);             },             show() {                 let ul = document.querySelector('ul');                 ul.innerHTML = '';                 this.data.forEach(function(value) {                     ul.innerHTML += `<li>${value}</li>`;                 });             }         }          let input = document.querySelector('[name=keyword]');         input.addEventListener('blur', function() {             obj.keyword(this.value);             obj.show();         });     </script> </body>  </html>

Set与WeakSet类型在JavaScript中的使用

 

 

并集-交集-差集,算法实现

<!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 a = new Set([1, 2, 3, 4, 5]);         let b = new Set([4, 5, 9, 6]);         // 并集         console.log(new Set([...a, ...b]));         // 差集,a有,b没有         console.log(new Set([...a].filter(function(item) {             return !b.has(item);         })));     </script> </body>  </html>

Set与WeakSet类型在JavaScript中的使用

 

 

WeakSet语法介绍:

<!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></div>     <div></div>      <script>         // WeakSet 跟 set 差不多,但是WeakSet的元素只能是引用类型         // let set = new WeakSet([1, 2]);         // let set = new WeakSet();         // set.add([1, 2, 3]);          let nodes = new WeakSet();         let divs = document.querySelectorAll('div');         divs.forEach(function(item) {             // console.log(item);             // WeakSet的元素可以是dom节点             nodes.add(item);         });         console.log(nodes);          // 删除元素         nodes.delete(divs[0]);         // nodes.delete(nodes[1]);         console.log(nodes);          // 判断是否含有元素         console.log(nodes);         console.log(nodes.has(divs[0]));         console.log(nodes.has(divs[1]));     </script> </body>  </html>

 

引用类型的垃圾回收原理:

<!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></div>     <div></div>      <script>         let a = {             name: 'cyy'         };         let b = a;         let arr = [a]; //被引用第三次         arr[0] = null; //解除该引用         // 此时该内存地址被a引用一次,被b引用一次,共引用2次         a = null;         console.log(b);         // 次数a的引用断开,该内存地址只被b引用1次         b = null;         // 此时该内存地址没有被引用,因此属于垃圾         console.log(a, b);         //系统会自动检测内存有没有被引用,没有的话会自动垃圾回收     </script> </body>  </html>

 

WeakSet弱引用类型:

<!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>         // WeakSet是弱引用类型,因此无法使用keys,values,以及迭代方法          // WeakSet不会增加引用次数         // let a = {         //     name: 'cyy'         // };         // let b = a;         // let set = new WeakSet();         // set.add(a);         // // 此时该内存被引用次数为2,         // a = null;         // b = null;         // // 此时该内存没有被引用,但是WeakSet并不知情,导致WeakSet内显示空元素         // console.log(set);          // WeakSet的弱引用特性会导致循环出问题,因此无法进行循环操作         // console.log(set.keys());         // console.log(set.values());          // let set = new WeakSet();         // set.add([1, 2, 3]);         // console.log(set.keys());         // console.log(set.values());         // for (const item of set) {         //     console.log(item);         // }         // console.log(set.size);           let a = {             name: 'cyy'         };         let b = a;         let set = new WeakSet();         set.add(a);         a = null;         b = null;         console.log(set);         // WeakSet在一定时间之后,也是能够读取到被回收的垃圾,然后同步清空         setTimeout(function() {             console.log(set);         }, 2000);     </script> </body>  </html>

 

todo任务列表中使用WeakSet:

<!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>         * {             margin: 0;             padding: 0;         }                  body {             padding: 200px;         }                  ul {             list-style: none;         }                  li {             width: 200px;             border: 1px solid orange;             position: relative;             height: 40px;             line-height: 40px;             margin-bottom: 10px;             padding: 10px;         }                  li a {             display: inline-block;             color: white;             position: absolute;             right: 5px;             top: 15px;             background: green;             border-radius: 5px;             width: 30px;             height: 30px;             line-height: 30px;             text-align: center;             text-decoration: none;         }                  li.remove {             opacity: .1;         }     </style> </head>  <body>     <ul>         <li>baidu.com             <a href="javascript:;">x</a>         </li>         <li>google.com             <a href="javascript:;">x</a>         </li>         <li>taobao.com             <a href="javascript:;">x</a>         </li>     </ul>      <script>         class Todo {             // 构造函数             constructor() {                 this.items = document.querySelectorAll('li');                 // console.log(this.items);                  this.lists = new WeakSet();                 // 只能用箭头函数,因为this指向不能变                 this.items.forEach((item) => this.lists.add(item));                 console.log(this.lists);             }             run() {                 this.addEvent();             }             addEvent() {                 this.items.forEach((item) => {                     let a = item.querySelector('a');                     // 只能用箭头函数,因为this指向不能变                     a.addEventListener('click', (e) => {                         // console.log(e.target);                         let li = e.target.parentElement;                         if (this.lists.has(li)) {                             li.classList.add('remove');                             this.lists.delete(li);                         } else {                             // 提示已删除                             // alert('todo已经删除');                              // 恢复被删除的                             li.classList.remove('remove');                             this.lists.add(li);                         }                     })                 })             }         }         new Todo().run();     </script> </body>  </html>

Set与WeakSet类型在JavaScript中的使用