我喜欢从最基础的内容讲起,然后慢慢深入,高手可能要给点耐心啊。
先看一个最简单的应用。在下面的代码中,我们需要实现一个功能,就是点击每个按钮显示相应的网址
复制代码 代码如下:
<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
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
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
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>
以上两种方法借用数组作为数据结构,实现了程序要求的功能,而且为以后的扩展,变动做好了充分的准备
但是,效率呢? 每次都要遍历数组,每次都要判断。。。。
下面,我来介绍一种不用数组,不用循环遍历,也不要判断比较的方法。
先来一段:
复制代码 代码如下: