总结两个Javascript的哈稀对象的一些编程技巧
博客几天没有更新了,主要是项目比较忙,还有女朋友店里生意也特别好,周末我还要去档口卖衣服
哎,真忙,今天决定中午不睡觉了,po文一篇先........
我喜欢从最基础的内容讲起,然后慢慢深入,高手可能要给点耐心啊。
先看一个最简单的应用。在下面的代码中,我们需要实现一个功能,就是点击每个按钮显示相应的网址
input type="button" value="百度" οnclick="javascript:showurl(this)">
input type="button" value="google" οnclick="javascript:showurl(this)">
input type="button" value="微软" οnclick="javascript:showurl(this)">
input type="button" value="博客园" οnclick="javascript:showurl(this)">
input type="button" value="阿舜的博客" οnclick="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;iarrtext.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;iarr.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={};iarguments.length;i++) hash[arguments[i]]=1
return hash
}
function isimagefile2(url){
returngetextname(url) in set("jpg","gif","pnp","jpeg","bmp")
}
/*********方法2********/
var url="go_rush.gif"
alert(isimagefile1(url))
alert(isimagefile2(url))
script>
请注意那个set函数,当我们实现这个函数后,就可以像python一样使用集合对象了,是不是很方便呢
======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/
总结两个Javascript的哈稀对象的一些编程技巧相关推荐
- JavaScript深入之变量对象
JavaScript深入系列第四篇,具体讲解执行上下文中的变量对象与活动对象.全局上下文下的变量对象是什么?函数上下文下的活动对象是如何分析和执行的?还有两个思考题帮你加深印象,快来看看吧! 前言 在 ...
- 详解Javascript中的Object对象
本文地址:http://luopq.com/2016/02/28/Object-in-Javascript/,转载请注明 Object是在javascript中一个被我们经常使用的类型,而且JS中的所 ...
- JavaScript函数与Window对象
JavaScript函数与Window对象 一.函数的使用 函数的含义:类似于Java中的方法,是完成特定任务的代码语句块 ◆常用系统函数: parseInt ("字符串") ...
- JavaScript权威指南--window对象
知识要点 window对象及其客户端javascript所扮演的核心角色:它是客户端javascript程序的全局对象.本章介绍window对象的属性和方法,这些属性定义了不同的API,但是只有一部分 ...
- QT通过JavaScript动态创建QML对象
QT通过JavaScript动态创建QML对象 通过JavaScript动态创建QML对象 动态创建对象 动态创建组件 从QML字符串创建对象 维护动态创建的对象 动态删除对象 通过JavaScrip ...
- javascript权威指南(6) - 对象
JavaScript对象可以从一个称为原型的对象继承属性,这种"原型式继承"(prototypal inheritance)是JavaScript的核心特征.除了字符串.数字.tr ...
- JavaScript之基础-9 JavaScript String(内置对象、String概述、字符串常用操作、模式匹配)...
一.JavaScript 内置对象 内置对象 - 什么是内置对象? 内置对象就是ECMAScript标准中已经定义好的,由浏览器厂商已经实现的标准对象 - 内置对象中封装了专门的数据和操作数据常用的A ...
- 广州蓝景分享—前端开发JavaScript中的Array对象与其他数组
各位小伙伴好,今天我们广州蓝景与大家分享一些前端技术知识. JavaScript中的Array对象与其他编程语言中的数组一样,可以将多个项目的集合存储在单个变量名下,并具有用于执行常见数组操作的成员. ...
- javascript百炼成仙 第一章 掌握JavaScript基础1.7 对象数据类型
听到这句话,叶小凡一顿,动作停止了下来. 对象数据类型,这在JavaScript基础修炼要诀中只是提了一下,但是并没有细讲,这个对象数据类型一直以来都深深地勾起了叶小凡的好奇心. "小娃娃, ...
最新文章
- Ubuntu18.04中pyhton默认版本从2.7换为3.x
- XenApp_XenDesktop_7.6实战篇之九:SQL Server数据库服务器规划及部署
- [Domino]Java访问Domino必需配置的服务器设置
- 03.Mybatis优化
- python 安装win32com_python调用win32com.client时提示:No module named win32com.client
- 招募3DGIS技术合伙人
- 网络运维中静态路由 三层交换技术 动态路由 OSPF协议的配置
- Android游戏开发---碰撞检测
- Sequence operation HDU - 3397
- pandas 玩转 Excel 操作总结
- dockers安装ES
- 李亚普洛夫稳定、一致稳定、一致渐近稳定、局部渐近稳定、全局渐近稳定区分
- 新手入门树莓派必做的四件事
- 最近一段时间百度统计后台出现大量不明来源违禁词,站长怎么办?
- chrome和firefox在linux,我为什么使用Firefox浏览器而不是Chrome
- 怎样理解光纤衰减和损耗?
- linux上如何删除文件名乱码的文件
- mt6589+android+4.4,联发科,MT6589,Android 4.4,CM11,刷机,
- 【css】丝滑波浪按钮一半流动覆盖字体和背景颜色
- linux下配置网络打印机
热门文章
- vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: ‘/carsend‘. This may cause an update err
- 《企业级私有网盘系统owncloud》
- ROS导航到目标点后不返回到达信息,cmd_tel一直发布速度0,0,0问题原因
- 人力资源管理五项工具
- 鸟哥的Linux私房菜学习笔记(2)登录与在线求助
- android 打印机怎么拿到蓝牙地址,Android 商米蓝牙打印机的使用方式
- 2019湖南大学计算机考研分数线,湖南大学2019年考研分数线湖大复试过线多少分...
- Word文档有些地方不能编辑?
- Windows 10 安装 Linux 子系统(Windows Subsystem for Linux)
- centos lump搭建笔记