`
ymfhcn
  • 浏览: 31249 次
  • 来自: 湖南
最近访客 更多访客>>
社区版块
存档分类
最新评论

总结两个Javascript的哈稀对象的一些编程技巧(转)

阅读更多
先看一个最简单的应用。在下面的代码中,我们需要实现一个功能,就是点击每个按钮显示相应的网址
<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一样使用集合对象了,是不是很方便呢
分享到:
评论

相关推荐

    总结两个Javascript的哈稀对象的一些编程技巧

    先看一个最简单的应用。在下面的代码中,我们需要实现一个功能,就是点击每个按钮显示相应的网址 代码如下:&lt;input type=”button” value=”百度” onclick=”[removed]showUrl(this)”&gt; &lt;input type...

    javascript指南和函数式编程

    本指南将深入探讨JavaScript的高效编程和函数式编程这两个重要主题,帮助开发者提升技能,实现更优雅、更可维护的代码。 《Effective JavaScript(中文版).pdf》这本书是JavaScript编程的经典之作,它包含了68个具体...

    Javascript 实用小技巧

    在本篇标题为“Javascript实用小技巧”的文章中,作者分享了一系列实用的JavaScript代码片段,旨在帮助学习JavaScript的人士掌握一些提高编程效率的技巧。文章内容涉及了JavaScript的Function对象的apply和call方法...

    一本关于JavaScript中函数式编程的书

    函数组合是将两个或更多函数串联起来,形成一个新的函数。这种方式可以使代码更加模块化,每个函数只关注一个特定任务,而整个流程由组合函数定义。 五、柯里化 柯里化是将接受多个参数的函数转换为一系列接受单个...

    javaScript-DOM编程艺术

    JavaScript-DOM编程艺术是关于如何使用JavaScript操作网页文档对象模型(Document Object Model,简称DOM)的技术。DOM是一种标准,它提供了表示和操作HTML或XML文档的接口。通过DOM,JavaScript可以访问和修改网页...

    javascript高级编程JavaScript.pdf

    为了解决这个问题,开发者引入了“命名空间”的概念,尽管JavaScript本身并不直接支持命名空间,但可以通过对象模拟实现。 命名空间的主要目的是为了组织代码,避免全局作用域中的名称冲突。在JavaScript中,我们...

    突破JavaScript编程实例五十讲

    《突破JavaScript编程实例五十讲》是一本专注于JavaScript实践应用的教程,旨在帮助开发者提升JavaScript编程技巧,通过五十个具体的实例来深入理解这门强大的脚本语言。这些实例涵盖了JavaScript的基础语法、面向...

    javascript批量添加对象

    此外,如果你需要批量添加的对象是来自JSON格式的数据,你可能需要先使用`JSON.parse()`转换JSON字符串为JavaScript对象。例如: ```javascript let jsonStr = '[{"key1": "value1"}, {"key2": "value2"}]'; let ...

    javascript 取两个日期的差值

    根据给定的文件标题“javascript 取两个日期的差值”以及描述“求两个日期的差值,在平常用的应该很多的吧,希望能给你带来帮助...”,我们可以明确地了解到,该文章的主要目的是讲解如何用JavaScript计算两个日期...

    JavaScript中数组的一些算法和技巧总结

    本篇文章将深入探讨JavaScript中数组的一些算法和技巧,帮助开发者更好地理解和利用这些功能。 1. 数组的创建与初始化 - `let arr = [];` 用空括号创建一个空数组。 - `let arr = new Array();` 也可以创建空数组...

    js_正则表达式实战JavaScript语言精髓与编程实践

    两份PDF文档——"JavaScript语言精髓与编程实践.pdf"和"js_正则表达式实战.pdf",将分别从JavaScript语言的整体理解和正则表达式的实战技巧两个角度,为读者提供全面的学习资料。 总之,这是一本对JavaScript开发者...

    韩顺平javascript笔记(最全整理 dom编程 oop 基础语法)

    韩顺平老师的JavaScript笔记全面涵盖了基础语法、面向对象编程以及DOM编程,这些都是学习JavaScript时至关重要的知识点。 首先,基础语法是JavaScript学习的基石。包括变量声明(var、let、const)、数据类型(如...

    《高性能JavaScript编程》.Nicholas.C.Zakas著.英文版

    《高性能JavaScript编程》是著名前端开发者Nicholas C. Zakas所著的一本经典书籍,英文原版名为"High Performance JavaScript"。这本书深入探讨了如何优化...这是一本值得每个JavaScript开发者深入研究的书籍。

    纯javascript实现json与对象的互相转换项目

    1. **JavaScript对象转换为JSON字符串**:这个过程通常称为`JSON.stringify()`,它可以将一个JavaScript对象转换成一个JSON格式的字符串。例如: ```javascript let obj = { name: 'John', age: 30 }; let json...

    JavaScript编程50例

    例如,000032.pdg可能详细讲解了如何使用变量存储和交换两个数值。 接着,函数是JavaScript中复用代码的关键,包括函数的定义、参数传递、返回值以及匿名函数。000153.pdg可能涉及到了闭包这一高级特性,它在内存...

    JSP实用技巧集合,jsp编程的一些小技巧总结

    jsp编程的一些小技巧总结,绝对实用。包括JSP编程中常用的js技术。 1.JSP编程中常用的js技术 2. 在下拉列表框里选择一个值后跳出新窗口? 3. 在JSP中启动execl? 4. 两级下拉列表框联动菜单? 5. java中如何把一个目录...

    JavaScript 应用技巧集合[推荐]

    标题中提到的“JavaScript 应用技巧集合[推荐]”,指出了文章的主要内容是关于JavaScript的编程技巧和实践方法。这些技巧有助于开发者提高JavaScript编程效率和代码质量。在描述中,则明确指出文章是作者对收集到的...

    JS技巧——日常常用JAVASCRIPT脚本

    本文将深入探讨一些日常常用的JavaScript脚本技巧。 1. **变量声明与类型转换**: - `var`, `let` 和 `const`:在ES6中,我们有了新的变量声明方式。`var` 是传统的全局或局部变量,而 `let` 和 `const` 是块级...

    JavaScript征途

    JavaScript对象,数组,字符串,使用正则表达式操纵字符串,客户端,控制文档结构的模型,JavaScript事件驱动模型,CSS,Cookie,XML和JSON,Ajax,深入JavaScript面向对象编程,深入JavaScript函数式编程,深入...

    javascript对象大全

    通过学习这个压缩包中的文档,开发者不仅能深入理解JavaScript对象的核心概念,还能掌握对象的高级特性和实践技巧,这对于提升JavaScript编程技能大有裨益。无论你是初学者还是经验丰富的开发者,这些资源都将是你...

Global site tag (gtag.js) - Google Analytics