當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript中Map的应用及Map中的bug

發(fā)布時(shí)間：2024/4/17 javascript 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript中Map的应用及Map中的bug 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

今天一同事讓我解決一個(gè)關(guān)于JS的問題，想了想，還是用Map解決比較方面，先來看看JS中是如何定義Map的

map.js

function?Map()?{?? ?

?var?struct?=?function(key,?value)?{?? ?

??this.key?=?key;?? ?

??this.value?=?value;?? ?

?}?? ?

??? ?

?var?put?=?function(key,?value){?? ?

??for?(var?i?=?0;?i?<?this.arr.length;?i++)?{?? ?

???if?(?this.arr[i].key?===?key?)?{?? ?

????this.arr[i].value?=?value;?? ?

????return;?? ?

???}?? ?

??}?? ?

???this.arr[this.arr.length]?=?new?struct(key,?value);?? ?

?}?? ?

??? ?

?var?get?=?function(key)?{?? ?

??for?(var?i?=?0;?i?<?this.arr.length;?i++)?{?? ?

???if?(?this.arr[i].key?===?key?)?{?? ?

?????return?this.arr[i].value;?? ?

???}?? ?

??}?? ?

??return?null;?? ?

?}?? ?

??? ?

?var?remove?=?function(key)?{?? ?

??var?v;?? ?

??for?(var?i?=?0;?i?<?this.arr.length;?i++)?{?? ?

???v?=?this.arr.pop();?? ?

???if?(?v.key?===?key?)?{?? ?

????continue;?? ?

???}?? ?

???this.arr.unshift(v);?? ?

??}?? ?

?}?? ?

??? ?

?var?size?=?function()?{?? ?

??return?this.arr.length;?? ?

?}?? ?

??? ?

?var?isEmpty?=?function()?{?? ?

??return?this.arr.length?<=?0;?? ?

?}??? ?

?this.arr?=?new?Array();?? ?

?this.get?=?get;?? ?

?this.put?=?put;?? ?

?this.remove?=?remove;?? ?

?this.size?=?size;?? ?

?this.isEmpty?=?isEmpty;?? ?

這就是定義Map的代碼，將它寫成一個(gè)js文件，我這里命名為map.js，現(xiàn)在來看看如何使用，在頁面中先加載這個(gè)腳本文件

測試?頁面

?

<html>?

<head>?

<META?HTTP-EQUIV="Content-Type"?CONTENT="text/html;?charset=utf-8">?

<META?HTTP-EQUIV="Pragma"?CONTENT="no-cache">?

</head>?

<body>?

<form?name="form1"?action=""?method="post">?

<table?width="100%"?border="0"?align="center"?cellpadding="0"?cellspacing="0"??class="yourPlace"?id=control?>?

??<tr>?

??????<td?height="20">哈哈</td>?

??</tr>?

</table>?

<table?width="330"?border="0"?align="center"?cellpadding="0"?cellspacing="0"?class="tabtitle">?

??<tr>?

????<td>信息</td>?

???</tr>?

</table>?

??<table?width="330"??border="0"?align="center"?cellpadding="0"?cellspacing="0"?style="border-collapse:collapse;">?

????????<tr>?

??????????<td?width="100"?class="cardActive"?id="td1"?onclick="javascript:changeCss(1);"><a?href="javascript:changeCard('base')"?class="cardLink">動(dòng)漫人物</a></td>?

??????????<td?width="100"?class="cardNormal"?id="td2"?onclick="javascript:changeCss(2);"><a?href="javascript:changeCard('pro')"?class="cardLink">動(dòng)漫人物1</a></td>?

??????????<td?width="100"?class="cardNormal"?id="td3"?onclick="javascript:changeCss(3);"><a?href="javascript:changeCard('zfld')"?class="cardLink">動(dòng)漫人物2</a></td>?

??????????<td?width="100"?class="cardNormal"?id="td3"?onclick="javascript:changeCss(4);"><a?href="javascript:changeCard('zxld')"?class="cardLink">動(dòng)漫人物3</a></td>?

????????</tr>?

??</table>?

<table?width="330"?border="0"?align="center"?cellpadding="3"?cellspacing="0"?class="tabout"?style="display:block"?id="base"?is="1">?

?????????????????????????????<tr?class="trwhite">??? ?

???????????????????<td?class="tdFormInputMid"?><input?name="infoLinkIds"?type="checkbox"?idd="1"?value="小新"?onClick="EverChecked(this);">?

????????????????小新 ?

??????????????????</td>???????????? ?

??????????????????</tr>?

?????????????????<tr?class="trwhite">??? ?

???????????????????<td?class="tdFormInputMid"?><input?name="infoLinkIds"?type="checkbox"?idd="2"?value="火影"?onClick="EverChecked(this);">?

????????????????火影 ?

??????????????????</td>???????????? ?

??????????????????</tr>?

?????????????????<tr?class="trwhite">??? ?

???????????????????<td?class="tdFormInputMid"?><input?name="infoLinkIds"?type="checkbox"?idd="3"?value="葫蘆娃"?onClick="EverChecked(this);">?

????????????????葫蘆娃 ?

??????????????????</td>???????????? ?

??????????????????</tr>?

???????????????? ?

</table>?

<table?width="330"?border="0"?align="center"?cellpadding="3"?cellspacing="0"?class="tabout"?style="display:none"?id="pro"?is="1">?

?????????????????<tr?class="trwhite">??? ?

???????????????????<td?class="tdFormInputMid"?><input?name="infoLinkIds"?type="checkbox"?idd="20"?value="一休哥"?onClick="EverChecked(this);">?

????????????????一休哥 ?

??????????????????</td>???????????? ?

??????????????????</tr>?

?????????????????<tr?class="trwhite">??? ?

???????????????????<td?class="tdFormInputMid"?><input?name="infoLinkIds"?type="checkbox"?idd="45"?value="忍者神龜"?onClick="EverChecked(this);">?

????????????????忍者神龜 ?

??????????????????</td>???????????? ?

??????????????????</tr>?

?????????????????<tr?class="trwhite">??? ?

???????????????????<td?class="tdFormInputMid"?><input?name="infoLinkIds"?type="checkbox"?idd="4"?value="馬良"?onClick="EverChecked(this);">?

????????????????馬良 ?

??????????????????</td>???????????? ?

??????????????????</tr>?

????????????????? ?

</table>?

<table?width="330"?border="0"?align="center"?cellpadding="3"?cellspacing="0"?class="tabout"?style="display:none"?id="zfld"?is="1">?

?????????????????<tr?class="trwhite">??? ?

???????????????????<td?class="tdFormInputMid"?><input?name="infoLinkIds"?type="checkbox"?idd="2"?value="孫悟空"?onClick="EverChecked(this);">?

????????????????孫悟空 ?

??????????????????</td>???????????? ?

??????????????????</tr>?

?????????????????<tr?class="trwhite">??? ?

???????????????????<td?class="tdFormInputMid"?><input?name="infoLinkIds"?type="checkbox"?idd="10"?value="唐僧"?onClick="EverChecked(this);">?

????????????????唐僧 ?

??????????????????</td>???????????? ?

??????????????????</tr>?

?????????????????<tr?class="trwhite">??? ?

???????????????????<td?class="tdFormInputMid"?><input?name="infoLinkIds"?type="checkbox"?idd="26"?value="擎天柱"?onClick="EverChecked(this);">?

????????????????擎天柱 ?

??????????????????</td>???????????? ?

??????????????????</tr>?

????????????????? ?

</table>?

<table?width="330"?border="0"?align="center"?cellpadding="3"?cellspacing="0"?class="tabout"?style="display:none"?id="zxld"?is="1">?

?????????????????<tr?class="trwhite">??? ?

???????????????????<td?class="tdFormInputMid"?><input?name="infoLinkIds"?type="checkbox"?idd="37"?value="淘汰朗"?onClick="EverChecked(this);">?

????????????????淘汰朗 ?

??????????????????</td>???????????? ?

??????????????????</tr>?

?????????????????<tr?class="trwhite">??? ?

???????????????????<td?class="tdFormInputMid"?><input?name="infoLinkIds"?type="checkbox"?idd="51"?value="老龍王"?onClick="EverChecked(this);">?

????????????????老龍王 ?

??????????????????</td>???????????? ?

??????????????????</tr>?

?????????????????<tr?class="trwhite">??? ?

???????????????????<td?class="tdFormInputMid"?><input?name="infoLinkIds"?type="checkbox"?idd="63"?value="哪吒"?onClick="EverChecked(this);">?

????????????????哪吒 ?

??????????????????</td>???????????? ?

??????????????????</tr>?

????????????????? ?

</table>?

<span?id="data"></span>? ?

?</form>?

?</body>?

?<script>?

??????var?fieldId; ?

??????var?fieldName;? ?

??????var?map?=?new?Map(); ?

??????var?k?=?0; ?

???function?EverChecked(obj){ ?

???????????var?id=""; ?

???????????var?name=""; ?

???????????var?fieldId=""; ?

???????????var?fieldName=""; ?

??????????? ?

????????????if(obj.checked==true){ ?

????????????if(map.size()!=0){ ?

???????????????for(var?m=0;m<map.size();m++){ ?

????????????????????if(map.get(m)!=obj.value){?? ?

????????????????????????if(id?==?""?||?name?==?""){ ?

????????????????????????id?=obj.idd; ?

????????????????????????name?=obj.value; ?

????????????????????????}else{ ?

????????????????????????id?+=","+obj.idd; ?

????????????????????????name?+=","+obj.value; ?

????????????????????????} ?

???????????????} ?

????????????}else{ ?

????????????????????????map.put(k,obj.value); ?

????????????????????????kk=k+1; ?

????????????????????????} ?

????????????}else{ ?

????????????????map.remove(k); ?

????????????} ?

????????fieldId.value?=?id; ?

????????name=""; ?

????????for(var?j=0;j<map.size();j++){ ?

????????????if(name?==?""){ ?

????????????????????name?=map.get(j); ?

????????????????} ?

????????????????else{ ?

????????????????????name?+=","+map.get(j); ?

????????????????} ?

????????} ?

????????fieldName.value?=name; ?

???} ?

??? ?

???function?changeCard(id){ ?

????var?list=document.getElementsByTagName("table"); ?

????for(var?i=0;i<list.length;i++){ ?

????????if(list.item(i).is){ ?

????????????list.item(i).style.display="none"; ?

????????} ?

????} ?

????document.getElementById(id).style.display="block"; ?

????//alert(list.size()); ?

} ?

?function?changeCss(status){ ?

if(status==1)?{ ?

????????????var?t1?=?document.getElementById("td1"); ?

????????????var?t2?=?document.getElementById("td2"); ?

????????????t1.className="cardActive"; ?

????????????t2.className="cardNormal"; ?

????????????var?t3?=?document.getElementById("td3"); ?

????????????if(t3!=""&&t3!=null){ ?

????????????t3.className="cardNormal"; ?

????????????}; ?

????????????var?t4?=?document.getElementById("td4"); ?

????????????if(t4!=""&&t4!=null){ ?

????????????t4.className="cardActive"; ?

????????????}; ?

????????????var?t5?=?document.getElementById("td5"); ?

????????????if(t5!=""&&t5!=null){ ?

????????????t5.className="cardNormal"; ?

????????????}; ?

????????????var?t6?=?document.getElementById("td6"); ?

????????????if(t6!=""&&t6!=null){ ?

????????????t6.className="cardNormal"; ?

????????????}; ?

????????}else? ?

????????if(status==2)?{ ?

????????????var?t1?=?document.getElementById("td1"); ?

????????????t1.className="cardNormal"; ?

????????????var?t2?=?document.getElementById("td2"); ?

????????????t2.className="cardActive"; ?

????????????var?t3?=?document.getElementById("td3"); ?

????????????if(t3!=""&&t3!=null){ ?

????????????t3.className="cardNormal"; ?

????????????}; ?

????????????var?t4?=?document.getElementById("td4"); ?

????????????if(t4!=""&&t4!=null){ ?

????????????t4.className="cardNormal"; ?

????????????}; ?

????????????var?t5?=?document.getElementById("td5"); ?

????????????if(t5!=""&&t5!=null){ ?

????????????t5.className="cardNormal"; ?

????????????}; ?

????????????var?t6?=?document.getElementById("td6"); ?

????????????if(t6!=""&&t6!=null){ ?

????????????t6.className="cardNormal"; ?

????????????}; ?

????????}else? ?

????????if(status==3)?{ ?

????????????var?t1?=?document.getElementById("td1"); ?

????????????t1.className="cardNormal"; ?

????????????var?t2?=?document.getElementById("td2"); ?

????????????t2.className="cardNormal"; ?

????????????var?t3?=?document.getElementById("td3"); ?

????????????t3.className="cardActive"; ?

????????????var?t4?=?document.getElementById("td4"); ?

????????????if(t4!=""&&t4!=null){ ?

????????????t4.className="cardNormal"; ?

????????????}; ?

????????????var?t5?=?document.getElementById("td5"); ?

????????????if(t5!=""&&t5!=null){ ?

????????????t5.className="cardNormal"; ?

????????????}; ?

????????????var?t6?=?document.getElementById("td6"); ?

????????????if(t6!=""&&t6!=null){ ?

????????????t6.className="cardNormal"; ?

????????????}; ?

????????}else? ?

????????if(status==4)?{ ?

????????????var?t1?=?document.getElementById("td1"); ?

????????????t1.className="cardNormal"; ?

????????????var?t2?=?document.getElementById("td2"); ?

????????????t2.className="cardNormal"; ?

????????????var?t3?=?document.getElementById("td3"); ?

????????????t3.className="cardNormal"; ?

????????????var?t4?=?document.getElementById("td4"); ?

????????????if(t4!=""&&t4!=null){ ?

????????????t4.className="cardActive"; ?

????????????}; ?

????????????var?t5?=?document.getElementById("td5"); ?

????????????if(t5!=""&&t5!=null){ ?

????????????t5.className="cardNormal"; ?

????????????}; ?

????????????var?t6?=?document.getElementById("td6"); ?

????????????if(t6!=""&&t6!=null){ ?

????????????t6.className="cardNormal"; ?

????????????}; ?

????????} ?

????} ?

???</script>?

????</html>???

在測試的過程中發(fā)現(xiàn)一個(gè)bug，添加的時(shí)候是按你點(diǎn)擊的順序走的，但是一旦取消一個(gè)checkbox，那么這個(gè)map就會(huì)出現(xiàn)問題，取不到實(shí)際的值，一遇到null就直接結(jié)束了，想了半天沒有想出辦法，最后折中了一下，還是用array把這個(gè)問題解決了，也就是說不用map存儲(chǔ)了，改用數(shù)組，代碼如下

function?EverChecked(obj){ ?

???????????var?id=""; ?

???????????var?name=""; ?

???????????var?fieldId=""; ?

???????????var?fieldName=""; ?

???????????var?insertData?=?1;//1插入，0不插入 ?

????????????if(obj.checked==true){ ?

????????????????if(map.length!=0){ ?

???????????????????for(var?m=0;m<map.length;m++){ ?

????????????????????????if(map[m]==obj.value){ ?

????????????????????????????insertData?=?0; ?

????????????????????????????break; ?

????????????????????????????} ?

???????????????????} ?

????????????????} ?

????????????????if(insertData==1){?????? ?

????????????????if(id?==?""?||?name?==?""){ ?

????????????????????????id?=obj.idd; ?

????????????????????????}else{ ?

????????????????????????id?+=","+obj.idd; ?

????????????????????????} ?

???????????????????????? ?

????????????????????????alert(k); ?

????????????????????????map[k]=obj.value; ?

????????????????????????alert(k+":"+obj.value); ?

????????????????????????k=k+1; ?

????????????????????????alert(map.length); ?

????????????????????????} ?

????????????}else{ ?

????????????????for(var?i=0;i<map.length;i++){ ?

????????????????if(map[i]==obj.value){ ?

????????????????????????map[i]=0; ?

????????????????????????break; ?

????????????????????????} ?

????????????????} ?

????????????} ?

????????fieldId.value?=?id; ?

????????name=""; ?

????????for(var?j=0;j<map.length;j++){ ?

????????????alert(j+":OO"+map[j]); ?

????????????if(map[j]!=0){ ?

????????????????if(name?==?""){ ?

????????????????????name?=map[j]; ?

????????????????}else{ ?

????????????????????name?+=","+map[j]; ?

????????????????} ?

????????????????????alert(j+"==="+map[j]); ?

????????????} ?

???????? ?

????????} ?

???????? ?

????????if(name!=null&&name!=""){ ?

????????fieldName.value?=name; ?

????????????alert(name); ?

????????} ?

???? ?

???????? ?

???}?

還是js本身的東西好用，如果有人能解決我用map遇到的問題，請(qǐng)聯(lián)系我，謝謝！

本文轉(zhuǎn)自sucre03 51CTO博客，原文鏈接：http://blog.51cto.com/sucre/450691，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的JavaScript中Map的应用及Map中的bug的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Introduction or Why
下一篇： AngularJS 无限滚动加载数据控件