JavaScript中Map的应用及Map中的bug

2022-05-31 01:08:13

今天一同事让我解决一个关于JS的问题，想了想，还是用Map解决比较方面，先来看看JS中是如何定义Map的

map.js



    

  1. function Map() {    
    2. 

  2. 
 var struct = function(key, value) {    

    3. 

  3. 
  this.key = key;    

    4. 

  4. 
  this.value = value;    

    5. 

  5.  }    
    6. 

  6.      
    7. 

  7. 
 var put = function(key, value){    

    8. 

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

    9. 

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

    10. 

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

    11. 

  11. 
    return;    

    12. 

  12.    }    
    13. 

  13.   }    
    14. 

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

    15. 

  15.  }    
    16. 

  16.      
    17. 

  17. 
 var get = function(key) {    

    18. 

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

    19. 

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

    20. 

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

    21. 

  21.    }    
    22. 

  22.   }    
    23. 

  23. 
  return null;    

    24. 

  24.  }    
    25. 

  25.      
    26. 

  26. 
 var remove = function(key) {    

    27. 

  27. 
  var v;    

    28. 

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

    29. 

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

    30. 

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

    31. 

  31. 
    continue;    

    32. 

  32.    }    
    33. 

  33. 
   this.arr.unshift(v);    

    34. 

  34.   }    
    35. 

  35.  }    
    36. 

  36.      
    37. 

  37. 
 var size = function() {    

    38. 

  38. 
  return this.arr.length;    

    39. 

  39.  }    
    40. 

  40.      
    41. 

  41. 
 var isEmpty = function() {    

    42. 

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

    43. 

  43.  }     
    44. 

  44. 
 this.arr = new Array();    

    45. 

  45. 
 this.get = get;    

    46. 

  46. 
 this.put = put;    

    47. 

  47. 
 this.remove = remove;    

    48. 

  48. 
 this.size = size;    

    49. 

  49. 
 this.isEmpty = isEmpty;    

    50. 

  50. } 
    51. 



这就是定义Map的代码，将它写成一个js文件，我这里命名为map.js，现在来看看如何使用，在页面中先加载这个脚本文件




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


测试 页面


 




    

  1.  
    2. 

  2. 
<!--JSP初始化设置--> 

    3. 

  3. 
<html> 

    4. 

  4. 
<head> 

    5. 

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

    6. 

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

    7. 

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

    8. 

  8. 
</head> 

    9. 

  9. 
<body> 

    10. 

  10. 
<form name="form1" action="" method="post"> 

    11. 

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

    12. 

  12. 
  <tr> 

    13. 

  13. 
      <td height="20">哈哈</td> 

    14. 

  14. 
  </tr> 

    15. 

  15. 
</table> 

    16. 

  16.  
    17. 

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

    18. 

  18. 
  <tr> 

    19. 

  19. 
    <td>信息</td> 

    20. 

  20. 
   </tr> 

    21. 

  21. 
</table> 

    22. 

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

    23. 

  23. 
        <tr> 

    24. 

  24. 
          <td width="100" class="cardActive" id="td1" onclick="javascript:changeCss(1);"><a href="javascript:changeCard('base')" class="cardLink">动漫人物</a></td> 

    25. 

  25. 
          <td width="100" class="cardNormal" id="td2" onclick="javascript:changeCss(2);"><a href="javascript:changeCard('pro')" class="cardLink">动漫人物1</a></td> 

    26. 

  26. 
          <td width="100" class="cardNormal" id="td3" onclick="javascript:changeCss(3);"><a href="javascript:changeCard('zfld')" class="cardLink">动漫人物2</a></td> 

    27. 

  27. 
          <td width="100" class="cardNormal" id="td3" onclick="javascript:changeCss(4);"><a href="javascript:changeCard('zxld')" class="cardLink">动漫人物3</a></td> 

    28. 

  28. 
        </tr> 

    29. 

  29. 
  </table> 

    30. 

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

    31. 

  31. 
                             <tr class="trwhite">     

    32. 

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

    33. 

  33.                 小新  
    34. 

  34. 
                  </td>              

    35. 

  35. 
                  </tr> 

    36. 

  36. 
                 <tr class="trwhite">     

    37. 

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

    38. 

  38.                 火影  
    39. 

  39. 
                  </td>              

    40. 

  40. 
                  </tr> 

    41. 

  41. 
                 <tr class="trwhite">     

    42. 

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

    43. 

  43.                 葫芦娃  
    44. 

  44. 
                  </td>              

    45. 

  45. 
                  </tr> 

    46. 

  46.                   
    47. 

  47. 
</table> 

    48. 

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

    49. 

  49. 
                 <tr class="trwhite">     

    50. 

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

    51. 

  51.                 一休哥  
    52. 

  52. 
                  </td>              

    53. 

  53. 
                  </tr> 

    54. 

  54. 
                 <tr class="trwhite">     

    55. 

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

    56. 

  56.                 忍者神龟  
    57. 

  57. 
                  </td>              

    58. 

  58. 
                  </tr> 

    59. 

  59. 
                 <tr class="trwhite">     

    60. 

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

    61. 

  61.                 马良  
    62. 

  62. 
                  </td>              

    63. 

  63. 
                  </tr> 

    64. 

  64.                    
    65. 

  65. 
</table> 

    66. 

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

    67. 

  67. 
                 <tr class="trwhite">     

    68. 

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

    69. 

  69.                 孙悟空  
    70. 

  70. 
                  </td>              

    71. 

  71. 
                  </tr> 

    72. 

  72. 
                 <tr class="trwhite">     

    73. 

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

    74. 

  74.                 唐僧  
    75. 

  75. 
                  </td>              

    76. 

  76. 
                  </tr> 

    77. 

  77. 
                 <tr class="trwhite">     

    78. 

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

    79. 

  79.                 擎天柱  
    80. 

  80. 
                  </td>              

    81. 

  81. 
                  </tr> 

    82. 

  82.                    
    83. 

  83. 
</table> 

    84. 

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

    85. 

  85. 
                 <tr class="trwhite">     

    86. 

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

    87. 

  87.                 淘汰朗  
    88. 

  88. 
                  </td>              

    89. 

  89. 
                  </tr> 

    90. 

  90. 
                 <tr class="trwhite">     

    91. 

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

    92. 

  92.                 老龙王  
    93. 

  93. 
                  </td>              

    94. 

  94. 
                  </tr> 

    95. 

  95. 
                 <tr class="trwhite">     

    96. 

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

    97. 

  97.                 哪吒  
    98. 

  98. 
                  </td>              

    99. 

  99. 
                  </tr> 

    100. 

  100.                    
    101. 

  101. 
</table> 

    102. 

  102. 
<span id="data"></span>   

    103. 

  103. 
 </form> 

    104. 

  104. 
 </body> 

    105. 

  105. 
 <script> 

    106. 

  106.       var fieldId;  
    107. 

  107.       var fieldName;   
    108. 

  108. 
      var map = new Map();  

    109. 

  109. 
      var k = 0;  

    110. 

  110.    function EverChecked(obj){  
    111. 

  111. 
           var id="";  

    112. 

  112. 
           var name="";  

    113. 

  113. 
           var fieldId="";  

    114. 

  114. 
           var fieldName="";  

    115. 

  115.              
    116. 

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

    117. 

  117.             if(map.size()!=0){  
    118. 

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

    119. 

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

  120. 
                        if(id == "" || name == ""){  

    121. 

  121. 
                        id =obj.idd;  

    122. 

  122. 
                        name =obj.value;  

    123. 

  123.                         }else{  
    124. 

  124.                         id +=","+obj.idd;  
    125. 

  125.                         name +=","+obj.value;  
    126. 

  126.                         }  
    127. 

  127.                         }  
    128. 

  128.                }  
    129. 

  129.             }else{  
    130. 

  130.                         map.put(k,obj.value);  
    131. 

  131. 
                        kk=k+1;  

    132. 

  132.                         }  
    133. 

  133.  
    134. 

  134.             }else{  
    135. 

  135.                 map.remove(k);  
    136. 

  136.             }  
    137. 

  137. 
        fieldId.value = id;  

    138. 

  138. 
        name="";  

    139. 

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

    140. 

  140. 
            if(name == ""){  

    141. 

  141. 
                    name =map.get(j);  

    142. 

  142.                 }  
    143. 

  143.                 else{  
    144. 

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

  145.                 }  
    146. 

  146.         }  
    147. 

  147. 
        fieldName.value =name;  

    148. 

  148.    }  
    149. 

  149.      
    150. 

  150.      
    151. 

  151.    function changeCard(id){  
    152. 

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

    153. 

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

    154. 

  154.         if(list.item(i).is){  
    155. 

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

    156. 

  156.         }  
    157. 

  157.     }  
    158. 

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

    159. 

  159.     //alert(list.size());  
    160. 

  160. }  
    161. 

  161.  function changeCss(status){  
    162. 

  162.  
    163. 

  163. 
if(status==1) {  

    164. 

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

    165. 

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

    166. 

  166. 
            t1.className="cardActive";  

    167. 

  167. 
            t2.className="cardNormal";  

    168. 

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

    169. 

  169.             if(t3!=""&&t3!=null){  
    170. 

  170. 
            t3.className="cardNormal";  

    171. 

  171.             };  
    172. 

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

    173. 

  173.             if(t4!=""&&t4!=null){  
    174. 

  174. 
            t4.className="cardActive";  

    175. 

  175.             };  
    176. 

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

    177. 

  177.             if(t5!=""&&t5!=null){  
    178. 

  178. 
            t5.className="cardNormal";  

    179. 

  179.             };  
    180. 

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

    181. 

  181.             if(t6!=""&&t6!=null){  
    182. 

  182. 
            t6.className="cardNormal";  

    183. 

  183.             };  
    184. 

  184.         }else   
    185. 

  185. 
        if(status==2) {  

    186. 

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

    187. 

  187. 
            t1.className="cardNormal";  

    188. 

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

    189. 

  189. 
            t2.className="cardActive";  

    190. 

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

    191. 

  191.             if(t3!=""&&t3!=null){  
    192. 

  192. 
            t3.className="cardNormal";  

    193. 

  193.             };  
    194. 

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

    195. 

  195.             if(t4!=""&&t4!=null){  
    196. 

  196. 
            t4.className="cardNormal";  

    197. 

  197.             };  
    198. 

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

    199. 

  199.             if(t5!=""&&t5!=null){  
    200. 

  200. 
            t5.className="cardNormal";  

    201. 

  201.             };  
    202. 

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

    203. 

  203.             if(t6!=""&&t6!=null){  
    204. 

  204. 
            t6.className="cardNormal";  

    205. 

  205.             };  
    206. 

  206.         }else   
    207. 

  207. 
        if(status==3) {  

    208. 

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

    209. 

  209. 
            t1.className="cardNormal";  

    210. 

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

    211. 

  211. 
            t2.className="cardNormal";  

    212. 

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

    213. 

  213. 
            t3.className="cardActive";  

    214. 

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

    215. 

  215.             if(t4!=""&&t4!=null){  
    216. 

  216. 
            t4.className="cardNormal";  

    217. 

  217.             };  
    218. 

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

    219. 

  219.             if(t5!=""&&t5!=null){  
    220. 

  220. 
            t5.className="cardNormal";  

    221. 

  221.             };  
    222. 

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

    223. 

  223.             if(t6!=""&&t6!=null){  
    224. 

  224. 
            t6.className="cardNormal";  

    225. 

  225.             };  
    226. 

  226.         }else   
    227. 

  227. 
        if(status==4) {  

    228. 

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

    229. 

  229. 
            t1.className="cardNormal";  

    230. 

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

    231. 

  231. 
            t2.className="cardNormal";  

    232. 

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

    233. 

  233. 
            t3.className="cardNormal";  

    234. 

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

    235. 

  235.             if(t4!=""&&t4!=null){  
    236. 

  236. 
            t4.className="cardActive";  

    237. 

  237.             };  
    238. 

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

    239. 

  239.             if(t5!=""&&t5!=null){  
    240. 

  240. 
            t5.className="cardNormal";  

    241. 

  241.             };  
    242. 

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

    243. 

  243.             if(t6!=""&&t6!=null){  
    244. 

  244. 
            t6.className="cardNormal";  

    245. 

  245.             };  
    246. 

  246.         }  
    247. 

  247.     }  
    248. 

  248. 
   </script> 

    249. 

  249. 
    </html>   

    250. 



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


 




    

  1. function EverChecked(obj){  
    2. 

  2. 
           var id="";  

    3. 

  3. 
           var name="";  

    4. 

  4. 
           var fieldId="";  

    5. 

  5. 
           var fieldName="";  

    6. 

  6. 
           var insertData = 1;//1插入，0不插入  

    7. 

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

    8. 

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

    9. 

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

    10. 

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

    11. 

  11.                             insertData = 0;  
    12. 

  12. 
                            break;  

    13. 

  13.                             }  
    14. 

  14.                    }  
    15. 

  15.                 }  
    16. 

  16. 
                if(insertData==1){        

    17. 

  17. 
                if(id == "" || name == ""){  

    18. 

  18.                         id =obj.idd;  
    19. 

  19. 
                        }else{  

    20. 

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

    21. 

  21.                         }  
    22. 

  22.                           
    23. 

  23.                         alert(k);  
    24. 

  24.                         map[k]=obj.value;  
    25. 

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

    26. 

  26.                         k=k+1;  
    27. 

  27.                         alert(map.length);  
    28. 

  28.                         }  
    29. 

  29. 
            }else{  

    30. 

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

    31. 

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

    32. 

  32.                         map[i]=0;  
    33. 

  33. 
                        break;  

    34. 

  34.                         }  
    35. 

  35.                 }  
    36. 

  36.             }  
    37. 

  37.         fieldId.value = id;  
    38. 

  38. 
        name="";  

    39. 

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

    40. 

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

    41. 

  41. 
            if(map[j]!=0){  

    42. 

  42. 
                if(name == ""){  

    43. 

  43.                     name =map[j];  
    44. 

  44. 
                }else{  

    45. 

  45. 
                    name +=","+map[j];  

    46. 

  46.                 }  
    47. 

  47. 
                    alert(j+"==="+map[j]);  

    48. 

  48.             }  
    49. 

  49.           
    50. 

  50.         }  
    51. 

  51.           
    52. 

  52. 
        if(name!=null&&name!=""){  

    53. 

  53.         fieldName.value =name;  
    54. 

  54.             alert(name);  
    55. 

  55.         }  
    56. 

  56.       
    57. 

  57.           
    58. 

  58.    } 
    59. 



还是js本身的东西好用，如果有人能解决我用map遇到的问题，请联系我，谢谢！








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

下一篇：阿里云公共镜像、自定义镜像、共享镜像和镜像市场有何区别？