先看一个最简单的应用。在下面的代码中,我们需要实现一个功能,就是点击每个按钮显示相应的网址
<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实现类,模拟面向对象编程。
以上讲得非常简单,仅作为抛砖引入,大家有兴趣的可以在回复里面谈谈自己的应用心得啊。
临走之前再讲个例子----判断上传的文件是否为图像文件.
<script type="text/javascript">
// by Go_Rush(阿舜) from http://ashun.cnblogs.com/
//获取扩展名
function getExtName(url){
if (!/\./.test(url)) return "";
var arr=url.split(".");
return arr[arr.length-1].toLowerCase();
}
/*********方法1*******/
function isImageFile1(url){
var ext=getExtName(url)
return ext=="jpg" || ext=="bmp" ||ext=="gif" || ext=="png" || ext=="jpeg"
}
/*********方法2********/
function set(){
for(var i=0,hash={};i<arguments.length;i++) hash[arguments[i]]=1
return hash
}
function isImageFile2(url){
return getExtName(url) in set("jpg","gif","pnp","jpeg","bmp")
}
/*********方法2********/
var url="go_rush.gif"
alert(isImageFile1(url))
alert(isImageFile2(url))
</script>
请注意那个set函数,当我们实现这个函数后,就可以像python一样使用集合对象了,是不是很方便呢
分享到:
相关推荐
先看一个最简单的应用。在下面的代码中,我们需要实现一个功能,就是点击每个按钮显示相应的网址 代码如下:<input type=”button” value=”百度” onclick=”[removed]showUrl(this)”> <input type...
本指南将深入探讨JavaScript的高效编程和函数式编程这两个重要主题,帮助开发者提升技能,实现更优雅、更可维护的代码。 《Effective JavaScript(中文版).pdf》这本书是JavaScript编程的经典之作,它包含了68个具体...
在本篇标题为“Javascript实用小技巧”的文章中,作者分享了一系列实用的JavaScript代码片段,旨在帮助学习JavaScript的人士掌握一些提高编程效率的技巧。文章内容涉及了JavaScript的Function对象的apply和call方法...
函数组合是将两个或更多函数串联起来,形成一个新的函数。这种方式可以使代码更加模块化,每个函数只关注一个特定任务,而整个流程由组合函数定义。 五、柯里化 柯里化是将接受多个参数的函数转换为一系列接受单个...
JavaScript-DOM编程艺术是关于如何使用JavaScript操作网页文档对象模型(Document Object Model,简称DOM)的技术。DOM是一种标准,它提供了表示和操作HTML或XML文档的接口。通过DOM,JavaScript可以访问和修改网页...
为了解决这个问题,开发者引入了“命名空间”的概念,尽管JavaScript本身并不直接支持命名空间,但可以通过对象模拟实现。 命名空间的主要目的是为了组织代码,避免全局作用域中的名称冲突。在JavaScript中,我们...
《突破JavaScript编程实例五十讲》是一本专注于JavaScript实践应用的教程,旨在帮助开发者提升JavaScript编程技巧,通过五十个具体的实例来深入理解这门强大的脚本语言。这些实例涵盖了JavaScript的基础语法、面向...
此外,如果你需要批量添加的对象是来自JSON格式的数据,你可能需要先使用`JSON.parse()`转换JSON字符串为JavaScript对象。例如: ```javascript let jsonStr = '[{"key1": "value1"}, {"key2": "value2"}]'; let ...
根据给定的文件标题“javascript 取两个日期的差值”以及描述“求两个日期的差值,在平常用的应该很多的吧,希望能给你带来帮助...”,我们可以明确地了解到,该文章的主要目的是讲解如何用JavaScript计算两个日期...
本篇文章将深入探讨JavaScript中数组的一些算法和技巧,帮助开发者更好地理解和利用这些功能。 1. 数组的创建与初始化 - `let arr = [];` 用空括号创建一个空数组。 - `let arr = new Array();` 也可以创建空数组...
两份PDF文档——"JavaScript语言精髓与编程实践.pdf"和"js_正则表达式实战.pdf",将分别从JavaScript语言的整体理解和正则表达式的实战技巧两个角度,为读者提供全面的学习资料。 总之,这是一本对JavaScript开发者...
韩顺平老师的JavaScript笔记全面涵盖了基础语法、面向对象编程以及DOM编程,这些都是学习JavaScript时至关重要的知识点。 首先,基础语法是JavaScript学习的基石。包括变量声明(var、let、const)、数据类型(如...
《高性能JavaScript编程》是著名前端开发者Nicholas C. Zakas所著的一本经典书籍,英文原版名为"High Performance JavaScript"。这本书深入探讨了如何优化...这是一本值得每个JavaScript开发者深入研究的书籍。
1. **JavaScript对象转换为JSON字符串**:这个过程通常称为`JSON.stringify()`,它可以将一个JavaScript对象转换成一个JSON格式的字符串。例如: ```javascript let obj = { name: 'John', age: 30 }; let json...
例如,000032.pdg可能详细讲解了如何使用变量存储和交换两个数值。 接着,函数是JavaScript中复用代码的关键,包括函数的定义、参数传递、返回值以及匿名函数。000153.pdg可能涉及到了闭包这一高级特性,它在内存...
jsp编程的一些小技巧总结,绝对实用。包括JSP编程中常用的js技术。 1.JSP编程中常用的js技术 2. 在下拉列表框里选择一个值后跳出新窗口? 3. 在JSP中启动execl? 4. 两级下拉列表框联动菜单? 5. java中如何把一个目录...
标题中提到的“JavaScript 应用技巧集合[推荐]”,指出了文章的主要内容是关于JavaScript的编程技巧和实践方法。这些技巧有助于开发者提高JavaScript编程效率和代码质量。在描述中,则明确指出文章是作者对收集到的...
本文将深入探讨一些日常常用的JavaScript脚本技巧。 1. **变量声明与类型转换**: - `var`, `let` 和 `const`:在ES6中,我们有了新的变量声明方式。`var` 是传统的全局或局部变量,而 `let` 和 `const` 是块级...
JavaScript对象,数组,字符串,使用正则表达式操纵字符串,客户端,控制文档结构的模型,JavaScript事件驱动模型,CSS,Cookie,XML和JSON,Ajax,深入JavaScript面向对象编程,深入JavaScript函数式编程,深入...
通过学习这个压缩包中的文档,开发者不仅能深入理解JavaScript对象的核心概念,还能掌握对象的高级特性和实践技巧,这对于提升JavaScript编程技能大有裨益。无论你是初学者还是经验丰富的开发者,这些资源都将是你...