js模仿java的Map集合详解_javascript技巧

java.util 中的集合类包含 Java 中某些最常用的类。最常用的集合类是 List 和 Map。List 的具体实现包括 ArrayList 和 Vector,它们是可变大小的列表,比较适合构建、存储和操作任何类型对象元素列表。List 适用于按数值索引访问元素的情形。
Map 提供了一个更通用的元素存储方法。Map 集合类用于存储元素对(称作“键”和“值”),其中每个键映射到一个值。从概念上而言,您可以将 List 看作是具有数值键的 Map。而实际上,除了 List 和 Map 都在定义 java.util 中外,两者并没有直接的联系。本文将着重介绍核心 Java 发行套件中附带的 Map,同时还将介绍如何采用或实现更适用于您应用程序特定数据的专用 Map。
了解完java中的Map后,直接上代码了!

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>测试map</title>
</head>
<style type="text/css">
</style>
<script type="text/javascript">
/*
 * Map对象,实现Map功能
 * size() 获取Map元素个数
 * isEmpty() 判断Map是否为空
 * clear() 删除Map所有元素
 * put(key, value) 向Map中增加元素(key, value)
 * remove(key) 删除指定key的元素,成功返回true,失败返回false
 * get(key) 获取指定key的元素值value,失败返回null
 * element(index) 获取指定索引的元素(使用element.key,element.value获取key和value),失败返回null
 * containsKey(key) 判断Map中是否含有指定key的元素
 * containsValue(value) 判断Map中是否含有指定value的元素
 * keys() 获取Map中所有key的数组(array)
 * values() 获取Map中所有value的数组(array)
 *
 */
function Map(){
  this.elements = new Array(); 

  //获取Map元素个数
  this.size = function() {
    return this.elements.length;
  }, 

  //判断Map是否为空
  this.isEmpty = function() {
    return (this.elements.length < 1);
  }, 

  //删除Map所有元素
  this.clear = function() {
    this.elements = new Array();
  }, 

  //向Map中增加元素(key, value)
  this.put = function(_key, _value) {
    if (this.containsKey(_key) == true) {
      if(this.containsValue(_value)){
        if(this.remove(_key) == true){
          this.elements.push( {
            key : _key,
            value : _value
          });
        }
      }else{
        this.elements.push( {
          key : _key,
          value : _value
        });
      }
    } else {
      this.elements.push( {
        key : _key,
        value : _value
      });
    }
  }, 

  //删除指定key的元素,成功返回true,失败返回false
  this.remove = function(_key) {
    var bln = false;
    try {
      for (i = 0; i < this.elements.length; i++) {
        if (this.elements[i].key == _key){
          this.elements.splice(i, 1);
          return true;
        }
      }
    }catch(e){
      bln = false;
    }
    return bln;
  }, 

  //获取指定key的元素值value,失败返回null
  this.get = function(_key) {
    try{
      for (i = 0; i < this.elements.length; i++) {
        if (this.elements[i].key == _key) {
          return this.elements[i].value;
        }
      }
    }catch(e) {
      return null;
    }
  }, 

  //获取指定索引的元素(使用element.key,element.value获取key和value),失败返回null
  this.element = function(_index) {
    if (_index < 0 || _index >= this.elements.length){
      return null;
    }
    return this.elements[_index];
  }, 

  //判断Map中是否含有指定key的元素
  this.containsKey = function(_key) {
    var bln = false;
    try {
      for (i = 0; i < this.elements.length; i++) {
        if (this.elements[i].key == _key){
          bln = true;
        }
      }
    }catch(e) {
      bln = false;
    }
    return bln;
  }, 

  //判断Map中是否含有指定value的元素
  this.containsValue = function(_value) {
    var bln = false;
    try {
      for (i = 0; i < this.elements.length; i++) {
        if (this.elements[i].value == _value){
          bln = true;
        }
      }
    }catch(e) {
      bln = false;
    }
    return bln;
  }, 

  //获取Map中所有key的数组(array)
  this.keys = function() {
    var arr = new Array();
    for (i = 0; i < this.elements.length; i++) {
      arr.push(this.elements[i].key);
    }
    return arr;
  }, 

  //获取Map中所有value的数组(array)
  this.values = function() {
    var arr = new Array();
    for (i = 0; i < this.elements.length; i++) {
      arr.push(this.elements[i].value);
    }
    return arr;
  };
}
//测试map
alert('测试map');
var map=new Map();
map.put(0,0);
map.put(1,1);
map.put(2,2);
alert('map的大小为:'+map.size());
for(var i=0;i<map.size();i++){
  alert('map的key'+i+'对应的value值为'+map.get(i));
}
alert('获取map中不存在的键'+map.get('获取map中不存在的键'));
alert('map中的所有键的长度'+map.keys().length);
for(var i=0;i<map.keys().lenght;i++){
  alert('map中的键值'+map.keys()[i]);
}
alert('map中的所有的value值的长度'+map.values().length);
for(var i=0;i<map.values().length;i++){
  alert('map中的value的值'+map.values()[i]);
}
alert('判断map中的值value是否存在3'+map.containsValue(3));
</script>
<body>
测试map
</body>
</html> 

运行效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索java
, js
map
java map集合详解、map集合详解、javascript闭包详解、javascript 集合、javascript详解,以便于您获取更多的相关知识。

时间: 2024-12-26 17:04:26

js模仿java的Map集合详解_javascript技巧的相关文章

js匿名函数作为函数参数详解_javascript技巧

由衷的感叹,js真是烦. 学到现在,渐渐理解了什么是:语言都是通用的,没有好不好,只有擅长不擅长. 继承,多态,甚至指针,c能实现,c++,java有,javascript(和java是雷锋和雷峰塔的区别,名字上不知道坑了多少人)也能变通实现. 温故知新,今天又回味了一遍,匿名函数作为函数参数. 代码很短,五脏俱全. <!DOCTYPE html> <html lang="en"> <head> </head> <body>

基于js对象,操作属性、方法详解_javascript技巧

一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很

JS JSOP跨域请求实例详解_javascript技巧

在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu

原生js封装的一些jquery方法(详解)_javascript技巧

用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl

JS触发服务器控件的单击事件(详解)_javascript技巧

如下所示: <script src="../Js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#a_doClick").click(function () { $("#<%=btnTest.ClientID%&g

D3.js实现折线图的方法详解_javascript技巧

前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>

js验证框架之RealyEasy验证详解_javascript技巧

使用Really_easy_field_validation_with_Prototype进行表单验证,具体内容如下 1.第一步当然是先引入js和css文件. <link href="${ ctx}/skin/css/validation.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="${ c

JS组件Bootstrap Select2使用方法详解_javascript技巧

在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的单选.多选.分组等功能这里就不多做介绍了,multiselect这方面是强项.重点介绍下select2的一些特性效果:一.特性效果1.多选效果 可以设置最多只能选几个 2.图文结合的效果 3.远程搜索功能(即在用户输入搜索内容时动态去后台取数据) 输入内容前 输入空格搜索出全部 滚动条滑动到底部自动

vue.js表格组件开发的实例详解_javascript技巧

前言 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件开发的基础 组件可以扩展 HTML 元素,封装可重用的代码.我理解为功能模块的模板吧. 对于vue来说,组件是这个样子的,我们在html里面写 <div id="example"> <my-compone