在ES6之前JavaScript 里面本身没有map对象,但是用JavaScript的Array、Object来模拟实现Map的数据结构。

现在已经有Map对象了,这里记录一下之前的写法

Array方法

  1. /*
  2. * MAP对象,实现MAP功能
  3. *
  4. * 接口:
  5. * size() 获取MAP元素个数
  6. * isEmpty() 判断MAP是否为空
  7. * clear() 删除MAP所有元素
  8. * put(key, value) 向MAP中增加元素(key, value)
  9. * remove(key) 删除指定KEY的元素,成功返回True,失败返回False
  10. * get(key) 获取指定KEY的元素值VALUE,失败返回NULL
  11. * element(index) 获取指定索引的元素(使用element.key,element.value获取KEY和VALUE),失败返回NULL
  12. * containsKey(key) 判断MAP中是否含有指定KEY的元素
  13. * containsValue(value) 判断MAP中是否含有指定VALUE的元素
  14. * values() 获取MAP中所有VALUE的数组(ARRAY)
  15. * keys() 获取MAP中所有KEY的数组(ARRAY)
  16. *
  17. * 例子:
  18. * var map = new Map();
  19. *
  20. * map.put("key", "value");
  21. * var val = map.get("key")
  22. * ……
  23. *
  24. */
  25. function Map() {
  26. this.elements = new Array();
  27.  
  28. //获取MAP元素个数
  29. this.size = function() {
  30. return this.elements.length;
  31. }
  32.  
  33. //判断MAP是否为空
  34. this.isEmpty = function() {
  35. return(this.elements.length < 1);
  36. }
  37.  
  38. //删除MAP所有元素
  39. this.clear = function() {
  40. this.elements = new Array();
  41. }
  42.  
  43. //向MAP中增加元素(key, value)
  44. this.put = function(_key, _value) {
  45. this.elements.push( {
  46. key : _key,
  47. value : _value
  48. });
  49. }
  50.  
  51. //删除指定KEY的元素,成功返回True,失败返回False
  52. this.remove = function(_key) {
  53. var bln = false;
  54. try{
  55. for(i = 0; i < this.elements.length; i++) {
  56. if(this.elements[i].key == _key) {
  57. this.elements.splice(i, 1);
  58. return true;
  59. }
  60. }
  61. } catch(e) {
  62. bln = false;
  63. }
  64. return bln;
  65. }
  66.  
  67. //获取指定KEY的元素值VALUE,失败返回NULL
  68. this.get = function(_key) {
  69. try{
  70. for(i = 0; i < this.elements.length; i++) {
  71. if(this.elements[i].key == _key) {
  72. return this.elements[i].value;
  73. }
  74. }
  75. } catch(e) {
  76. return null;
  77. }
  78. }
  79.  
  80. //获取指定索引的元素(使用element.key,element.value获取KEY和VALUE),失败返回NULL
  81. this.element = function(_index) {
  82. if(_index < 0 || _index >= this.elements.length) {
  83. return null;
  84. }
  85. return this.elements[_index];
  86. }
  87.  
  88. //判断MAP中是否含有指定KEY的元素
  89. this.containsKey = function(_key) {
  90. varbln = false;
  91. try{
  92. for(i = 0; i < this.elements.length; i++) {
  93. if(this.elements[i].key == _key) {
  94. bln = true;
  95. }
  96. }
  97. } catch(e) {
  98. bln = false;
  99. }
  100. return bln;
  101. }
  102.  
  103. //判断MAP中是否含有指定VALUE的元素
  104. this.containsValue = function(_value) {
  105. var bln = false;
  106. try{
  107. for(i = 0; i < this.elements.length; i++) {
  108. if(this.elements[i].value == _value) {
  109. bln = true;
  110. }
  111. }
  112. } catch(e) {
  113. bln = false;
  114. }
  115. return bln;
  116. }
  117.  
  118. //获取MAP中所有VALUE的数组(ARRAY)
  119. this.values = function() {
  120. var arr = new Array();
  121. for(i = 0; i < this.elements.length; i++) {
  122. arr.push(this.elements[i].value);
  123. }
  124. return arr;
  125. }
  126.  
  127. //获取MAP中所有KEY的数组(ARRAY)
  128. this.keys = function() {
  129. var arr = new Array();
  130. for(i = 0; i < this.elements.length; i++) {
  131. arr.push(this.elements[i].key);
  132. }
  133. return arr;
  134. }
  135. }
  136.  
  137. var map = new Map();
  138.  
  139. map.put("key1", "value1");
  140. map.put("key2", "value2");
  141. map.put("key3", "value3");
  142.  
  143. //var val = map.get("key1");
  144. // var val = map.containsKey("key1");
  145. // var val = map.element(2).value;
  146.  
  147. var arr=map.keys();
  148. for(var i=0;i<arr.length;i++){
  149. alert(map.get(arr[i]));
  150. }
  151. // alert(val);

Object方法

  1. <script type=text/javascript charset=utf-8>
  2. /***************模拟java里的map集合***************/
  3. function Map(){
  4. var obj = {};//空对象,存放键值对
  5.  
  6. //put方法,存值
  7. this.put = function(key,value){
  8. obj[key] = value;
  9. }
  10.  
  11. //size方法,返回大小
  12. this.size = function(){
  13. var count = 0;
  14. for(var att in obj){
  15. count++;
  16. }
  17. return count;
  18. }
  19.  
  20. //get方法,根据key获得value
  21. this.get = function(key){
  22. if(obj[key] || obj[key] === 0 || obj[key] === false){
  23. return obj[key];
  24. }else{
  25. return null;
  26. }
  27. }
  28.  
  29. //删除方法,根据key删除
  30. this.remove = function(key){
  31. if (obj[key] || obj[key] === 0 || obj[key] === false) {
  32. delete obj[key];
  33. }
  34. }
  35.  
  36. //遍历map
  37. this.each = function(fn){
  38. for(var att in obj){
  39. fn(att,obj[att]);
  40. }
  41. }
  42. }
  43.  
  44. var m = new Map();
  45. m.put('001','BeiJing');
  46. m.put('002','ShangHai');
  47. //document.write(m.size());
  48. //m.remove('001');
  49. //alert(m.get('001'));
  50. m.each(function(key,value){
  51. alert(key + ':' + value);
  52. });
  53.  
  54. </script>

ES6之前模拟Map数据结构的写法的更多相关文章

  1. js ES6 Set和Map数据结构详解

    这篇文章主要介绍了ES6学习笔记之Set和Map数据结构,结合实例形式详细分析了ECMAScript中基本数据结构Set和Map的常用属性与方法的功能.用法及相关注意事项,需要的朋友可以参考下   本 ...

  2. es6 Set 和Map 数据结构

    ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个数据结构,用来生成Set 数据结构. const s = new Set(); [2,3,5,4 ...

  3. es6入门7--Set Map数据结构

    本文作为ES6入门第十三章的学习整理笔记,可能会包含少部分个人的理解推测,若想阅读更详细的介绍,还请阅读原文ES6入门 一.set数据结构 1.set不接受重复值 ES6新增了Set构造函数用于创建s ...

  4. ES6 set和map数据结构对对象数组去重简单实现

    自从有了es6的set数据结构,数组的去重可以简单用一行代码实现,比如下面的方式 let arr = [1, 2, 2, 3, 4] function unique (arr) { return [. ...

  5. ES6 之 Set数据结构和Map数据结构 Iterator和for...of循环

    ECMAScript 6 入门 Set数据结构 基本用法 ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. va ...

  6. es6学习笔记-set和map数据结构

    ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); [2, 3 ...

  7. ES6的新特性(12)——Set 和 Map 数据结构

    Set 和 Map 数据结构 Set 基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. co ...

  8. es6的Set和Map数据结构

    Set 和 Map 数据结构 Set WeakSet Map WeakMap Set § ⇧ 基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set ...

  9. ES6中的Set与Map数据结构

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一 ...

随机推荐

  1. vue---设置缩进为4个空格

    在使用vue-cli的时候,我们发现,默认编辑的时候,使用的缩进都是2个空格,即使是是编辑器设置了4个空格,在编译的时候,还是以2个空格进行缩进,那么如果将vue设置为4个空格呢? 具体方法在根目录找 ...

  2. 使用python语言操作MongoDB

    MongoDB是一个跨平台的NoSQL,基于Key-Value形式保存数据.其储存格式非常类似于Python的字典,因此用Python操作MongoDB会非常的容易. pymongo的两种安装命令 p ...

  3. POJ-1157 LITTLE SHOP OF FLOWERS(动态规划)

    LITTLE SHOP OF FLOWERS Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 19877 Accepted: 91 ...

  4. OpenCV学习笔记之课后习题练习3-4

    练习:创建一个大小为100*100的三通道RGB图像.将它的元素全部置0.使用指针算法以(20,5)与(40,20)为顶点绘制一个绿色平面. 参考博文:blog.csdn.net/qq_2077736 ...

  5. C++创建窗口程序初步

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  6. Jmeter之正则

    正则转换网站:http://tool.oschina.net/regex/ 后置处理器,正则表达式提取器,写正则 待匹配文本框:放你的源文件或源代码,正则表达式:也就是你关联的那句匹配结果:根据匹配结 ...

  7. EasyUI 基本的拖动和放置

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Ba ...

  8. SQL Server表分区-水平分区

    SQL Server表分区,sql server水平分区 转自:http://www.cnblogs.com/knowledgesea/p/3696912.html  根据时间的,直接上T-SQL代码 ...

  9. git快速入门 push/clone/reset/merge/切换分支全都有

    本文介绍git快速入门,从安装/创建init / 发布push/版本回退reset / branch分支切换/合并分支merge 这些基本的操作都有涉及,方便新人快速入手,有需要的朋友mark一下.首 ...

  10. rplidar跑cartographer

    一.Cartographer编译 cartographer依赖的大型第三方库很少,编译时基本没有依赖项问题,基本按照官方文档的步骤来,略作修改.使用的环境是Ubuntu16.04+ROS Kineti ...