繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 总结两个Javascript的哈稀对象的一些编程技巧
- Javascript
- JavaScript 序列化对象实现代码
- 替代window.event.srcElement效果的可兼容性的函数
- div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容
- IE和Firefox下event事件杂谈
- javascript option onclick事件ie解决方案 兼容ie,firefox
- javascript demo 基本技巧
- 用js实现层随着内容大小动态渐变改变 推荐
- JS 的应用开发初探(mootools)
- JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)
- JQuery Tips(4) 一些关于提高JQuery性能的Tips
- jQuery 淡入淡出、展开收缩菜单实现代码
- js控制div及网页相关属性的代码
- javascript 翻页测试页(动态创建标签并自动翻页)
- Js获取table当前tr行的值的代码
- IE 上下滚动展示模仿Marquee机制
- jQuery解决iframe高度自适应代码
- jQuery 连续列表实现代码
- 利用jQuery的$.event.fix函数统一浏览器event事件处理
- Javascript和Ajax中文乱码吐血版解决方案
- js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE
总结两个Javascript的哈稀对象的一些编程技巧
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 155 ::
收藏到网摘: n/a
我喜欢从最基础的内容讲起，然后慢慢深入，高手可能要给点耐心啊。
先看一个最简单的应用。在下面的代码中，我们需要实现一个功能，就是点击每个按钮显示相应的网址
复制代码 代码如下:
<input type="button" value="百度" onclick="javascript:showUrl(this)">
<input type="button" value="Google" onclick="javascript:showUrl(this)">
<input type="button" value="微软" onclick="javascript:showUrl(this)">
<input type="button" value="博客园" onclick="javascript:showUrl(this)">
<input type="button" value="阿舜的博客" onclick="javascript:showUrl(this)">那么。怎么写这个 showUrl函数呢? 我想大多数人可能会这样写.
<script type="text/javascript">
// by Go_Rush(阿舜) from http://ashun.cnblogs.com/
function showUrl(element){
var url;
switch (element.value){
case "百度": url="http://www.baidu.com/" ;break;
case "Google": url="http://www.google.com/" ;break;
case "微软": url="http://www.microsoft.com/";break;
case "博客园": url="http://www.cnblogs.com/" ;break;
case "阿舜的博客": url="http://ashun.cmblogs.com/" ;break;
default: url=""
}
alert(url)
}
</script>
这样写不太好，原因有二:
1.写太长，很麻烦，用if, switch 语句来写,如果有100个条件，那岂不要写100个语句
2.不便于维护和扩展，如果需求经常变化，那些数据从数据库来怎么办，每变一下都要改程序的逻辑结构
对JavaScript比较有经验的程序员肯定不会这样写，一般用数组来实现。 可以是二维数组，也可以是双数组
1.双数组方法
复制代码 代码如下:
<script type="text/javascript">
// by Go_Rush(阿舜) from http://ashun.cnblogs.com/
var arrText=["百度","Google","微软","博客园","阿舜的博客"];
var arrUrl=["http://www.baidu.com/","http://www.google.com/","http://www.microsoft.com/","http://www.cnblogs.com/","http://ashun.cmblogs.com/"]
function showUrl(element){ //用双数组方法
var value=element.value;
for(var i=0;i<arrText.length;i++){
if (arrText[i]===value) return alert(arrUrl[i])
}
}
</script>
2. 二维数组方法
复制代码 代码如下:
<script type="text/javascript">
// by Go_Rush(阿舜) from http://ashun.cnblogs.com/
var arr=[
["百度" ,"http://www.baidu.com/"],
["Google" ,"http://www.google.com/"],
["微软" ,"http://www.microsoft.com/"],
["博客园" ,"http://www.cnblogs.com/"],
["阿舜的博客" ,"http://ashun.cmblogs.com/"]
]；
function showUrl(element){ //用二维数组方法
var value=element.value;
for(var i=0;i<arr.length;i++){
if (arr[i][0]===value) return alert(arr[i][1])
}
}
</script>
以上两种方法借用数组作为数据结构，实现了程序要求的功能，而且为以后的扩展，变动做好了充分的准备
但是，效率呢？ 每次都要遍历数组，每次都要判断。。。。
下面，我来介绍一种不用数组，不用循环遍历，也不要判断比较的方法。
先来一段：
复制代码 代码如下:
<script type="text/javascript">
// by Go_Rush(阿舜) from http://ashun.cnblogs.com/
var hash={
"百度" :"http://www.baidu.com/",
"Google" :"http://www.google.com/",
"微软" :"http://www.microsoft.com/",
"博客园" :"http://www.cnblogs.com/",
"阿舜的博客" :"http://ashun.cmblogs.com/"
};
function showUrl(element){ //使用哈稀对象
alert(hash[element.value])
}
</script>
看到没有，以前要用循环的，要用判断的函数，现在只要一行代码就OK了，而且扩展性还是最好的。
如果您对JavaScript比较熟悉，您一定会对数组情有独钟，因为它确实是一种非常方便，应用非常广泛的
数据结构，但是对于哈稀对象这个青苹果，哪怕您只啃过它一口，你一定永远不会忘记它的甜美。
他作为一种数据结构，在许多场合可以简化编程，在海量数据面前，他的性能要远远高于数组。(这个在
我日后的po文里面会提到的，请关注)
他作为一种对象，可以在JavaScript实现类，模拟面向对象编程。
以上讲得非常简单，仅作为抛砖引入，大家有兴趣的可以在回复里面谈谈自己的应用心得啊。
临走之前再讲个例子－－－－判断上传的文件是否为图像文件.
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
请注意那个set函数，当我们实现这个函数后，就可以像python一样使用集合对象了，是不是很方便呢 [Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
评论 (0) All
