文章詳情頁(yè)

Map與WeakMap類型在JavaScript中的使用詳解

瀏覽：3日期：2023-06-15 10:53:33

map類型特點(diǎn)與創(chuàng)建方法：

<!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> // 對(duì)象的鍵名會(huì)自動(dòng)轉(zhuǎn)為字符串 // let obj = { // 1: ’cyy1’, // ’1’: ’cyy2’ // }; // console.log(obj); // 對(duì)象的鍵名是對(duì)象時(shí)，會(huì)自動(dòng)轉(zhuǎn)為字符串 // 讀取時(shí)也要先轉(zhuǎn)為字符串再讀取 // 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); // 構(gòu)造函數(shù)創(chuàng)建時(shí)加入數(shù)據(jù) let map = new Map([ [’name’, ’cyy’], [’age’, 18] ]); console.log(map); // 支持鏈?zhǔn)讲僮? 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類型數(shù)據(jù)：

<!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類型轉(zhuǎn)換操作：

<!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()); // ...是展開(kāi)語(yǔ)法 console.log(...new_map.values()); </script></body></html>

map類型管理DOM節(jié)點(diǎn)：

<!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中壓入數(shù)據(jù) 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類型控制網(wǎng)站表單提交：

<!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()'> 接受協(xié)議： <input type='checkbox' name='agreement' error='請(qǐng)接受協(xié)議'> 我是學(xué)生： <input type='checkbox' name='student' error='網(wǎng)站只對(duì)學(xué)生開(kāi)放'> <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]) => {// 短路操作，前面為真，則不會(huì)執(zhí)行后面// 前面會(huì)假，則執(zhí)行后面config.status || alert(config.error);return config.status;// console.log(config); }); } </script></body></html>

Map與WeakMap類型在JavaScript中的使用詳解

WeakMap的語(yǔ)法使用：

<!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的鍵只能是引用對(duì)象 // 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、迭代循環(huán)都用不了 let map = new WeakMap(); // console.log(map.keys()); for (const iterator of map) { console.log(iterator); } </script></body></html>

WeakMap弱引用類型體驗(yàn)：

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <link rel='stylesheet' > <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開(kāi)發(fā)選課組件：

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <link rel='stylesheet' > <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門(mén)課</strong> <p id='list'> </p> </section> </main> <script> class Lesson { // 構(gòu)造函數(shù) 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()}門(mén)課`;// 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中的使用詳解

到此這篇關(guān)于Map與WeakMap類型在JavaScript中的使用的文章就介紹到這了,更多相關(guān)Map與WeakMap類型在JavaScript中的使用內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！

JavaScript

上一條：關(guān)于JavaScript中異步/等待的用法與理解下一條：原生JavaScript實(shí)現(xiàn)五子棋游戲

相關(guān)文章：

1. JSP中Servlet的Request與Response的用法與區(qū)別2. IntelliJ IDEA刪除類的方法步驟3. vue cli4下環(huán)境變量和模式示例詳解4. Django視圖類型總結(jié)5. Xml簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理6. Intellij IDEA 關(guān)閉和開(kāi)啟自動(dòng)更新的提示?7. Python Selenium XPath根據(jù)文本內(nèi)容查找元素的方法8. python如何編寫(xiě)類似nmap的掃描工具9. 解析原生JS getComputedStyle10. javascript使用alert實(shí)現(xiàn)一個(gè)精美的彈窗

排行榜

					
					JSP中Servlet的Request與Response的用法與區(qū)別
vue cli4下環(huán)境變量和模式示例詳解
IntelliJ IDEA刪除類的方法步驟
Intellij IDEA 關(guān)閉和開(kāi)啟自動(dòng)更新的提示?
Xml簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
Django視圖類型總結(jié)
Spring @Profile注解實(shí)現(xiàn)多環(huán)境配置
SpringBoot Redis自適應(yīng)配置的實(shí)現(xiàn)(Cluster Standalone Sentinel)
摩托羅拉開(kāi)發(fā)手機(jī)版開(kāi)源Java
android webview獲取html代碼和根據(jù)id獲取value實(shí)例
Spring IDE 1.2.4發(fā)布
				

国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

Map與WeakMap類型在JavaScript中的使用詳解