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>
并集-交集-差集，演算法實作
<!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>
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/222068.html
標籤：JavaScript
上一篇：this系結
下一篇：企業作業流設計原則及注意事項