世界不止0和1 還有...
Map
Map
Map是一組鍵值對的結構，用于解決以往不能用物件做為鍵的問題
具有極快的查找速度
函式、物件、基本型別都可以作為鍵或值
1.宣告定義
可以接受一個陣列作為引數，該陣列的成員是一個表示鍵值對的陣列，
使用set 方法添加元素，支持鏈式操作
使用建構式new Map創建的原理如下
對于鍵是物件的Map， 鍵保存的是記憶體地址，值相同但記憶體地址不同的視為兩個鍵，
2.獲取數量
獲取資料數量
3.元素檢測
檢測元素是否存在
4.讀取元素
5.洗掉元素
使用 delete() 方法洗掉單個元素
使用clear方法清除Map所有元素
6.遍歷資料
使用 keys()/values()/entries() 都可以回傳可遍歷的迭代物件，
使用for/of遍歷操作，直播遍歷Map 等同于使用entries() 函式
使用forEach遍歷操作
7.陣列轉換
可以使用展開語法 或 Array.form 靜態方法將Set型別轉為陣列，這樣就可以使用陣列處理函式了
8.節點集合
map的key可以為任意型別，下面使用DOM節點做為鍵來記錄資料，
9.實體操作
當不接受協議時無法提交表單，并根據自定義資訊提示用戶，
<form action="" onsubmit="return post()">
接受協議:
<input type="checkbox" name="agreement" message="請接受接受協議" />
我是學生:
<input type="checkbox" name="student" message="網站只對學生開放" />
<input type="submit" />
</form>
</body>
<script>
function post() {
let map = new Map();
let inputs = document.querySelectorAll("[message]");
//使用set設定資料
inputs.forEach(item =>
map.set(item, {
message: item.getAttribute("message"),
status: item.checked
})
);
//遍歷Map資料
return [...map].every(([item, config]) => {
config.status || alert(config.message);
return config.status;
});
}
</script>WeakMap
1.宣告定義
以下操作由于鍵不是物件型別將產生錯誤
將DOM節點保存到WeakSet
2.基本操作
3.垃圾回收
WakeMap的鍵名物件不會增加參考計數器，如果一個物件不被參考了會自動洗掉，
下例當hd洗掉時記憶體即清除，因為WeakMap是弱參考不會產生參考計數
當垃圾回收時因為物件被洗掉，這時WakeMap也就沒有記錄了
4.選課案例
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 20px;
width: 100vw;
display: flex;
box-sizing: border-box;
}
div {
border: solid 2px #ddd;
padding: 10px;
flex: 1;
}
div:last-of-type {
margin-left: -2px;
}
ul {
list-style: none;
display: flex;
width: 200px;
flex-direction: column;
}
li {
height: 30px;
border: solid 2px #e67e22;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
color: #333;
transition: 1s;
}
a {
border-radius: 3px;
width: 20px;
height: 20px;
text-decoration: none;
text-align: center;
background: #16a085;
color: white;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
margin-right: 5px;
}
.remove {
border: solid 2px #eee;
opacity: 0.8;
color: #eee;
}
.remove a {
background: #eee;
}
p {
margin-top: 20px;
}
p span {
display: inline-block;
background: #16a085;
padding: 5px;
color: white;
margin-right: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
</style>
<body>
<div>
<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>
</div>
<div>
<strong id="count">共選了2門課</strong>
<p id="lists"></p>
</div>
</body>
<script>
class Lesson {
constructor() {
this.lis = document.querySelectorAll("ul>li");
this.countELem = document.getElementById("count");
this.listElem = document.getElementById("lists");
this.map = new WeakMap();
}
run() {
this.lis.forEach(item => {
item.querySelector("a").addEventListener("click", event => {
const elem = event.target;
const state = elem.getAttribute("select");
if (state) {
elem.removeAttribute("select");
this.map.delete(elem.parentElement);
elem.innerHTML = "+";
elem.style.backgroundColor = "green";
} else {
elem.setAttribute("select", true);
this.map.set(elem.parentElement, true);
elem.innerHTML = "-";
elem.style.backgroundColor = "red";
}
this.render();
});
});
}
count() {
return [...this.lis].reduce((count, item) => {
return (count += this.map.has(item) ? 1 : 0);
}, 0);
}
lists() {
return [...this.lis]
.filter(item => {
return this.map.has(item);
})
.map(item => {
return `<span>${item.querySelector("span").innerHTML}</span>`;
});
}
render() {
this.countELem.innerHTML = `共選了${this.count()}課`;
this.listElem.innerHTML = this.lists().join("");
}
}
new Lesson().run();
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/295193.html
標籤：其他