总结两个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实现类,模拟面向对象编程。
 以上讲得非常简单,仅作为抛砖引入,大家有兴趣的可以在回复里面谈谈自己的应用心得啊。
临走之前再讲个例子----判断上传的文件是否为图像文件.

// 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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

请注意那个set函数,当我们实现这个函数后,就可以像python一样使用集合对象了,是不是很方便呢

(0)

相关推荐

  • JavaScript编程的10个实用小技巧

    在这篇文章中,我将列出10个Javascript实用小技巧,主要面向Javascript新手和中级开发者.希望每个读者都能至少从中学到一个有用的技巧. 1.变量转换 看起来很简单,但据我所看到的,使用构造函数,像Array()或者Number()来进行变量转换是常用的做法.始终使用原始数据类型(有时也称为字面量)来转换变量,这种没有任何额外的影响的做法反而效率更高. 复制代码 代码如下: var myVar   = "3.14159",str     = ""+ m

  • 分享9点个人认为比较重要的javascript 编程技巧

    1.巧用判断: 在js中,NaN,undefined,Null,0,"" 在转换为bool的时候,是false,所以,可以这样写. 复制代码 代码如下: if(!obj)  {} 表示一个对象如果为false的时候所做的事情,因为如果obj为以上任何一个,那么就是false,!false即是true,这样,就不需要 if(obj==null || obj == NaN ....). 2.巧用运算符: 有一个很经典的技巧,得到时间戳. 复制代码 代码如下: var dataspan =

  • JavaScript编程开发中的五个实用小技巧

    真是五个很quick的小提示: 只在<form>元素上使用submit事件 如果要在form中绑定事件处理程序时,应该只在<form>元素上绑定submit事件,而不是给提交按钮绑定click事件. March:这个方式固然很好,但是,公司开发时使用了Web Flow,一个页面就一个大form,而里面可能有若干个提交按钮,所以不得不把部分事件处理程序绑定在了提交按钮的click事件上. 可点击的都应该是链接 不要给除锚元素(<a>)以外的元素绑定click事件.这一点对

  • 45个JavaScript编程注意事项、技巧大全

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是很多新手踏入编程世界的第一个语言.既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人.能够编写结构清晰.性能高效的JavaScript代码的开发人员,现如今已成了招聘市场最受追捧的人. 在这篇文章里,我将分享一些JavaScript的技巧.秘诀和最佳实践,除了

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

    我喜欢从最基础的内容讲起,然后慢慢深入,高手可能要给点耐心啊. 先看一个最简单的应用.在下面的代码中,我们需要实现一个功能,就是点击每个按钮显示相应的网址 复制代码 代码如下: <input type="button" value="百度" onclick="javascript:showUrl(this)">  <input type="button" value="Google" on

  • Javascript调试之console对象——你不知道的一些小技巧

    前言 写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量. 但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法.由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示. 不同级别日志 通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示. 不同级别的日志

  • javascript面向对象之访问对象属性的两种方式分析

    本文实例分析了javascript面向对象之访问对象属性的两种方式.分享给大家供大家参考.具体如下: javascript面向对象的访问对象属性的两种方式.如下代码所示: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function Person(){}; var p1 = new Person(); p1.name="王美人"; document.

  • JavaScript isArray()函数判断对象类型的种种方法

    1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 typeof 的能力有限,其对于Date.RegExp类型返回的都是"object".如: 复制代码 代码如下: typ

  • JavaScript 中有关数组对象的方法(详解)

    JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象----函数(js中的一等对象).数组(键值的有序集合). 数组元素的添加 arrayObj.push([item1 [item2 [. . . [itemN ]]]]); 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

  • JavaScript 基于原型的对象(创建、调用)

    JavaScript中的对象有三种 1,内部对象 如Array,Boolean,Data,Math,Number,Object,RegExp,String对象等 这些对象系统给我们提供了各自的属性与方法供调用. 2,基于类的对象 用类的方式实现对象的引用,这些类需要我们自己定义 3,基于原型的对象 提供有关如何使用 JavaScript 基于原型的对象模型的指南,并且提供指向特定信息的链接,这些信息描述基于原型的对象的自定义构造函数和继承. 在我们写js代码的时候,内部对象是不可避免的要引用,但

  • JavaScript定义类和对象的方法

    本文实例讲述了JavaScript定义类和对象的方法.分享给大家供大家参考.具体方法如下: 在JS中,类和对象有多种不同的写法,因为本人对JS也不怎么熟,所以就本人的理解来写,如果哪位朋友发现有不对,请告之,共同学习. JS定义一个类有两种定法(我只知道这两种): 1. 定义函数的方式: 定义: 复制代码 代码如下: function classA(a) {      this.aaa=a;  //添加一个属性      this.methodA=function(ppp)  //添加一个方法

  • [js高手之路]图解javascript的原型(prototype)对象,原型链实例

    我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this.userName = uName; } CreateObj.prototype.showUserName = function(){ return this.userName; } var obj1 = new CreateObj('ghostwu'); var obj2 = new CreateObj('卫庄')

  • 浅谈JavaScript的内置对象和浏览器对象

    在javascript中对象通常包括两种类型:内置对象和浏览器对象,此外,用户还可以自定义对象. 对象包含两个要素: 1. 用来描述对象特性的一组数据,也就是若干变量,通常称为属性. 2. 用来操作对象特性的若干动作,也就是若干函数,通常称为方法. 浏览器对象 对象 含义 anchor 当前文档中设置了name属性的超链接 applet 当前文档中的小程序 area 客户端图形映射中的区域 button 表单中的按钮 checkbook 表单中的复选框 document 当前窗口中的HTML文档

  • 深入理解JavaScript单体内置对象

    JavaScript中定义了两个单体内置对象:Global和Math. Global对象 Global对象是JavaScript中最特别的一个对象.不属于任何其他对象的属性和方法,最终都是它的属性和方法.实际上,没有全局变量或全局作用域,所有在全局作用域中定义的属性和函数,都是Global对象的属性. Global对象包含了一些有用的方法: 1.URI编码方法 Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码,encodeURI()主要用

随机推荐