`
mwei
  • 浏览: 124189 次
  • 性别: Icon_minigender_1
  • 来自: 抽象空间
社区版块
存档分类
最新评论

使用JS构建简单Map

    博客分类:
  • js
阅读更多
最近使用源生的js处理页面数据,所谓源生的就是指没有经过包装的、最基本的JavaScript代码;
像使用ext,jQuery...说成非源生的代码;自己做个轮子:一个简单的map;
在js里,对象是属性的集合,属性是合法的js标识符,属性名是String类型;
属性可以有值,也可以没值(undefined),属性的值可以是原始类型,也可以是对象;
js里,函数也是对象,值为函数的属性是对象的方法;
可以在运行时为对象添加属性,这也是动态语言的一个特点,这样的特点可以使代码很灵活,同样也可以让代码很难维护;
当创建一个函数时,系统/引擎会自动给它添加一个属性prototype,如:
function Fn(){}
alert(typeof Fn.prototype); //object

此时,prototype指向一个对象,或prototype的值为一个对象,这也是默认的赋值;
Fn.prototype=1;
alert(typeof Fn.prototype); //number //这样就修改了prototype的值,不过意义不大

使用prototype可以设计继承机构,我现在还没有足够的内功和口才叙述它,
片面的理解就是一句话:相同类型的对象具备此类型prototype的属性;
下面就看看我的map吧
function getMap(){//初始化map_,给map_对象增加方法,使map_像个Map
	var map_=new Object();
	//属性加个特殊字符,以区别方法名,统一加下划线_
	map_.put=function(key,value){    map_[key]=value;} 
	map_.get=function(key){    return map_[key];}
	map_.remove=function(key){    delete map_[key];}	
	map_.keyset=function(){
		var ret="";
		for(var p in map_){    
			if(typeof p =='string' && p.substring(p.length-1)=="_"){ 
			    ret+=",";
				ret+=p;
			}
		}       	
		if(ret==""){
			return ret.split(","); //empty array
		}else{
			return ret.substring(1).split(","); 
		}
	}	
	return map_;
}
var map_=getMap();
map_.put('id_',"001");
map_.put('name_',"anna");
alert(map_.keyset()); //id_,name_
var keys=map_.keyset();
for(var i=0;i<keys.length;i++){    
    alert(map_.get(keys[i])); //001,then anna
}
map_.put("course_",new Array());
map_.get("course_").push("Math");
map_.get("course_").push("English");
map_.get("course_").push("Physics");
alert(map_.get("course_")); //Math,English,Physics

可以在此map_的基础之上构建复杂点的数据结构,如:树状结构;
js学习中...想看一些关于js优化、内存管理的书籍,了解的同仁可以推荐一下,OTZ


分享到:
评论

相关推荐

    javascript 中Map的使用

    3. Map的深拷贝:利用Map可以实现对象的深拷贝,通过递归将对象的所有属性转换为键值对存入Map,然后根据Map再构建新对象。 在实际开发中,Map常用于: - 保存索引映射关系,比如数组元素与其索引的对应。 - 维护多...

    百度地图MAP JS

    以上只是百度地图MAP JS的基本用法,实际上,它还提供了地理编码、逆地理编码、自定义图层、实时路况、搜索周边等功能,开发者可以根据需求灵活组合,构建出各种复杂的地图应用。在实际项目中,通常需要结合其他前端...

    使用javascript构建3D web 应用

    ### 使用JavaScript构建3D Web应用的关键知识点 #### 一、概览 在当前技术发展背景下,使用JavaScript构建3D Web应用已经成为一种趋势。这不仅能够快速搭建起属于自己的框架,还能帮助开发者快速开发出功能丰富的...

    jquery3.6.0.min.js+min.map.7z

    在部署前,通过构建工具如Webpack或Gulp自动将.js文件压缩成.min.js,并生成相应的.min.map文件。 总的来说,"jquery3.6.0.min.js"和"jquery-3.6.0.min.map"是jQuery库在3.6.0版本中用于生产环境和开发调试的重要...

    超好用map类型的js下载

    本文将深入探讨`Map`类型在JavaScript中的应用,并结合Echarts地图下钻功能,阐述如何利用`Map`类型处理地理数据,以及在实际项目中实现交互式地图的构建。 `Map`类型在ES6中被引入,它与传统的`Object`对象不同,`...

    《JavaScript构建Web和ArcGIS Server应用实战》源代码

    《JavaScript构建Web和ArcGIS Server应用实战》是一本深度探讨如何使用JavaScript开发Web GIS应用程序的专业书籍。这本书籍的源代码提供了丰富的示例和实践项目,帮助读者深入理解JavaScript在Web GIS开发中的应用。...

    echarts map-geo 使用实例

    本文将深入探讨如何使用 ECharts 的 `map` 与 `geo` 组件,以及它们在实际应用中的效果。 首先,`map` 类型的图表允许我们在地图上展示数据,它内置了多种世界和中国地图的配置,可以直接调用。而 `geo` 组件则提供...

    MapServer使用笔记

    OpenLayers是一个流行的开源JavaScript库,专门用于构建Web地图应用,它可以与MapServer交互,显示地图、处理查询、添加图层等功能。 在实际应用中,用户可以通过OpenLayers创建交互式地图界面,后台通过MapServer...

    何时使用Map来代替普通的JS对象1

    在JavaScript编程中,我们经常使用对象来存储和处理数据,但是JS对象存在一些限制,比如键必须是字符串或Symbol类型,这可能导致类型一致性丢失。ES6引入的`Map`对象就是为了克服这些限制,提供更灵活的数据存储方式...

    bootstrap-map-js-master.zip_ArcGIS api for JS_arcgis bootstrap_a

    Bootstrap Map JS Master是一款基于ArcGIS API for JavaScript与Bootstrap框架整合的开发工具包,它使得开发者能够更方便地在Web应用中构建美观且功能强大的地图界面。这个压缩包"bootstrap-map-js-master.zip"包含...

    5.(arcgis api for js篇)arcgis api for js接入openstreetmap(3D版).zip

    这个标题表明我们讨论的是如何使用ArcGIS API for JavaScript(arcgis api for js)来接入OpenStreetMap,并且是关于3D场景的应用。ArcGIS API for JavaScript是Esri公司提供的一个强大的地图开发库,用于构建交互式...

    使用Ant构建批量压缩js、css文件脚本

    Apache Ant是一个广泛使用的Java构建工具,它提供了灵活的构建脚本,可以执行编译、打包、测试等任务。在本场景中,我们将关注如何利用Ant来批量压缩JavaScript(js)和CSS(css)文件,以优化网页加载速度并减小...

    Ext Google Map 简易开发框架

    Ext Google Map简易开发框架是一种将流行的JavaScript库ExtJs与Google Maps API相结合的开发方式,用于构建功能丰富的地理信息系统。这个框架允许开发者轻松地在网页上展示地图,管理地图图层,控制图层的可见性,...

    纯jquery+css绘画地图线路图插件Subway Map

    jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互等任务。通过jQuery,开发者可以更加高效地实现地图元素的选择、添加、修改和删除。而CSS则负责地图的视觉呈现,包括线条颜色、形状...

    map33.js:一个JavaScript库,可使用three.js制作3D地图

    一个JavaScript库,用于使用构建3D地图 (您可以双击以添加缺少的图块) 安装 npm install map33 或者: yarn add map33 演示和用法 需要两个地图图块集,一个用于获取高程数据图块,另一个用于对根据所述高程数据...

    js代码-js -- 实现同步map函数

    在`main.js`文件中,可能包含了这个同步`map`函数的具体实现和使用示例。`README.txt`文件则可能包含了一些关于如何使用和理解这个功能的说明。如果你需要进一步的代码解释或示例,可以查看这两个文件的内容。

    javascript map()方法解析

    下面是一个简单的例子,我们有一个包含平方数的数组`array1`,我们使用`map()`方法将每个元素乘以2: ```javascript const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x =&gt; x * 2...

    googlemap 地图功能

    谷歌地图(Google Maps)是全球...总的来说,Google Maps JavaScript API是一个强大且灵活的工具,可以帮助开发者在网页应用中构建各种地图相关的功能。通过学习和实践,你可以创建出符合自己需求的定制化地图体验。

    谷歌地图GoogleMap

    总的来说,Google Map API为开发者提供了一个强大且灵活的平台,可以轻松地将地图功能整合到各种应用中,无论是简单的地理位置展示,还是复杂的导航和分析应用,都能通过API实现。然而,需要注意的是,使用API时要...

    基于Google Map API的简单地图

    总的来说,"基于Google Map API的简单地图"项目涵盖了定位用户、地图操作和标记地点等基本功能,通过学习和实践,开发者可以构建出更加丰富和交互性强的地图应用。Google Map API的强大和灵活性使其成为开发地图应用...

Global site tag (gtag.js) - Google Analytics