JavaScript中Map的应用及Map中的bug-阿里云开发者社区

今天一同事让我解决一个关于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的代码，将它写成一个js文件，我这里命名为map.js，现在来看看如何使用，在页面中先加载这个脚本文件

<script src="map.js"></script>

测试页面

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<script src="map.js"></script>
</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">动漫人物</a></td>
<td width="100" class="cardNormal" id="td2" onclick="javascript:changeCss(2);"><a href="javascript:changeCard('pro')" class="cardLink">动漫人物1</a></td>
<td width="100" class="cardNormal" id="td3" onclick="javascript:changeCss(3);"><a href="javascript:changeCard('zfld')" class="cardLink">动漫人物2</a></td>
<td width="100" class="cardNormal" id="td3" onclick="javascript:changeCss(4);"><a href="javascript:changeCard('zxld')" class="cardLink">动漫人物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>

在测试的过程中发现一个bug，添加的时候是按你点击的顺序走的，但是一旦取消一个checkbox，那么这个map就会出现问题，取不到实际的值，一遇到null就直接结束了，想了半天没有想出办法，最后折中了一下，还是用array把这个问题解决了，也就是说不用map存储了，改用数组，代码如下

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遇到的问题，请联系我，谢谢！

本文转自sucre03 51CTO博客，原文链接：http://blog.51cto.com/sucre/450691，如需转载请自行联系原作者

JavaScript中Map的应用及Map中的bug

热门文章

最新文章

相关课程

相关电子书

相关实验场景