手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >总结两个Javascript的哈稀对象的一些编程技巧
总结两个Javascript的哈稀对象的一些编程技巧
摘要:我喜欢从最基础的内容讲起,然后慢慢深入,高手可能要给点耐心啊。先看一个最简单的应用。在下面的代码中,我们需要实现一个功能,就是点击每个按钮显...

我喜欢从最基础的内容讲起,然后慢慢深入,高手可能要给点耐心啊。

先看一个最简单的应用。在下面的代码中,我们需要实现一个功能,就是点击每个按钮显示相应的网址

复制代码 代码如下:

<inputtype="button"value="百度"onclick="javascript:showUrl(this)">

<inputtype="button"value="Google"onclick="javascript:showUrl(this)">

<inputtype="button"value="微软"onclick="javascript:showUrl(this)">

<inputtype="button"value="博客园"onclick="javascript:showUrl(this)">

<inputtype="button"value="阿舜的博客"onclick="javascript:showUrl(this)">那么。怎么写这个showUrl函数呢?我想大多数人可能会这样写.

<scripttype="text/javascript">

//byGo_Rush(阿舜)fromhttp://ashun.cnblogs.com/

functionshowUrl(element){

varurl;

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.双数组方法

复制代码 代码如下:

<scripttype="text/javascript">

//byGo_Rush(阿舜)fromhttp://ashun.cnblogs.com/

vararrText=["百度","Google","微软","博客园","阿舜的博客"];

vararrUrl=["http://www.baidu.com/","http://www.google.com/","http://www.microsoft.com/","http://www.cnblogs.com/","http://ashun.cmblogs.com/"]

functionshowUrl(element){//用双数组方法

varvalue=element.value;

for(vari=0;i<arrText.length;i++){

if(arrText[i]===value)returnalert(arrUrl[i])

}

}

</script>

2.二维数组方法

复制代码 代码如下:

<scripttype="text/javascript">

//byGo_Rush(阿舜)fromhttp://ashun.cnblogs.com/

vararr=[

["百度","http://www.baidu.com/"],

["Google","http://www.google.com/"],

["微软","http://www.microsoft.com/"],

["博客园","http://www.cnblogs.com/"],

["阿舜的博客","http://ashun.cmblogs.com/"]

];

functionshowUrl(element){//用二维数组方法

varvalue=element.value;

for(vari=0;i<arr.length;i++){

if(arr[i][0]===value)returnalert(arr[i][1])

}

}

</script>

以上两种方法借用数组作为数据结构,实现了程序要求的功能,而且为以后的扩展,变动做好了充分的准备

但是,效率呢?每次都要遍历数组,每次都要判断。。。。

下面,我来介绍一种不用数组,不用循环遍历,也不要判断比较的方法。

先来一段:

复制代码 代码如下:

<scripttype="text/javascript">

//byGo_Rush(阿舜)fromhttp://ashun.cnblogs.com/

varhash={

"百度":"http://www.baidu.com/",

"Google":"http://www.google.com/",

"微软":"http://www.microsoft.com/",

"博客园":"http://www.cnblogs.com/",

"阿舜的博客":"http://ashun.cmblogs.com/"

};

functionshowUrl(element){//使用哈稀对象

alert(hash[element.value])

}

</script>

看到没有,以前要用循环的,要用判断的函数,现在只要一行代码就OK了,而且扩展性还是最好的。

如果您对JavaScript比较熟悉,您一定会对数组情有独钟,因为它确实是一种非常方便,应用非常广泛的

数据结构,但是对于哈稀对象这个青苹果,哪怕您只啃过它一口,你一定永远不会忘记它的甜美。

他作为一种数据结构,在许多场合可以简化编程,在海量数据面前,他的性能要远远高于数组。(这个在

我日后的po文里面会提到的,请关注)

他作为一种对象,可以在JavaScript实现类,模拟面向对象编程。

以上讲得非常简单,仅作为抛砖引入,大家有兴趣的可以在回复里面谈谈自己的应用心得啊。

临走之前再讲个例子----判断上传的文件是否为图像文件.

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]请注意那个set函数,当我们实现这个函数后,就可以像python一样使用集合对象了,是不是很方便呢

【总结两个Javascript的哈稀对象的一些编程技巧】相关文章:

仅30行代码实现Javascript中的MVC

简介JavaScript中的setTime()方法的使用

JavaScript Array对象详解

Backbone.js的一些使用技巧

JavaScript编程学习技巧汇总

JavaScript实现列表分页功能特效

javascript中clipboardData对象用法

javascript中this的四种用法

JavaScript获得指定对象大小的方法

实现高性能JavaScript之执行与加载

精品推荐
分类导航