javascript里的条件判断


Posted in Javascript onFebruary 27, 2007

JavaScript 是一种可以在浏览器中运行的脚本语言,是一种弱语言(相对于C,C#,JAVA而言),只要是计算机语言就会使用到条件判断式,而JavaScript作为一种“弱”语言,它的条件判断常常令人困惑不解,特别是有其它强语言编程经历的人来说,更是不可理喻!高手和无惑的人别取笑,我自己也曾经有一段时间郁闷过。先写一个例子吧:

var s = "meizz";
if (s && s==true)
{
    alert("Is true");
}

    咱先不管上面的代码运行的结果正确与否,我给变量 s 赋的是字符型,而在后面的 if 条件判断式里是直接把变量 s 作为一个判断表达式写出的,若是在强语言里对字符型的变量要么是判断它的类型是否是字符型或者是判断这个变量的值是否等于某字符串,但在 javascript 里就是没有用类型判断(typeof)也没有值判断(==)而就是这么孤伶伶地在那里,就可以作为一个条件判断表达式。当然这种单独作为条件表达式不只是字符型变量,也可以是数字型变量,也可以是一个对象,也可以是一个函数或者方法等等。这就正是这种语法令人费解的地方。

    我测试统计了一下:在 JavaScript 里,不为空 "" 的字符串、不为 0 的数字、不为 null 的对象、不为 undefined 的对象属性、布尔型 true,单独作为判断式里的一个表达式时 JavaScript 通通认定为真(true),反之则为假(false)。

    原因为是JS脚本没有强变量类型,你前一句赋值 var s = "meizz"; 后一句你甚至马上可以写成 s = function(){}; ,中间没有任何的类型转换,而这些写法在强语言里是不可思议的,甚至是大逆不道的(根本就不支持这种语法),但在JS脚本里却是那么的自然。原因就是没有强制变量类型, 变量类型是动态的,也就是说变量本身是没有类型的,变量的值是有类型的。呵呵,这里扯到其它模块去了,嗯,关于变量类型我另外再写文章讨论吧。

    说到这里,就不难理解 if (s && .....这句的判断式了,同样的道理,我甚至可以 function s(){} 然后再用 if (s && .... 或者 var s = document.getElementById("ObjectId");  if (s && .... 这样语法在JS脚本里都是没错的,至于判断的结果可以参考上面的那段统计结果。

    现在再来讨论上面的那几句代码的运行结果,多个条件判断式的结果合成运行只有“与”和“或”,到于“非”因为它是一元运行符,只针对单个值,比如 if (!s) ... 至于条件式不只一个的时候条件式的结果只有与和或的运行。与(&&),或(||)。上面的那句条件式:if (s && s==true) 就是两个条件式的合成判断。至于与运算(只要一个值为false则值为false)或运算(只要一个值为true则值为true)这些运算细节我就不多说了,教科书比我的笔头强多了。现在来分析这个判断式:这是一个“与”运算。第一个判断式 s ,因为它的字符型值不为 "" ,在JS当然认为它等同于 true,第二个判断式是 s==true,显然这个不相等,值为 false,因为是“与”运算,当然整个条件判断式的结果是 false,所以不会运行 alert()。

    第三,我这里说说几个很特殊的条件判断。在没有任何声明(var)和赋值的情况下,直接拿一个变量来判断JS会抛出一个变量未定义的错误出来。比如:

if (ss) alert("条件判断结果为 true!");

运行这句代码就会出错。因为这个变量 ss 从未被声明赋值过,这种情况不等同于上述的 null "" undefined。这种情况一般会发生在什么地方呢?一是自己写代码不小心未声明,二就是对网页里没有的控件进行操作直接用ID来操作的时候,比如 if (InputId.value!="") ... ,若是网页里根本就没有 id="InputId" 的文本框或者在执行这句脚本操作的时候这个文本框还没有被浏览器加载,那也就抛出变量未定义的错误。

    结果的办法是:第一种情况用 typeof 判断。if (typeof(ss)=="undefined") alert("变量未定义");  ,第二种情况则不要直接使用ID来引用对象而使用标准的对象引用。例:

var e = document.getElementById("InputId");  //IE里以前是用 document.all.InputId
if (e && e.value!="") ;//...... 

这样就不会出这种错误了。

那么就上面这句代码有人会说一定要这样写呢,为什么不直接 

if(document.getElementById("InputId").value != "") ;//....

这样的代码不是更精练吗?城然代码是精简了,但错误也来了。只要网页里没有这个对象或者这个对象在脚本执行的时候还未被加载到,就会报错。原来是 document.getElementById("InputId") 返回了 null 值,而 null 显然是没有 value 属性的,而我那句代码也用到了 e.value 来取属性但就没有报错,原因在于C系列的语言在多个条件式里的另一外属性:多个条件判断式组合判断时,先看第一个条件式,若已经符合条件时,就不会再去判断第二个判断式;也就是在第一个条件判断式未达到标准时再会去判断第二个判断式,依此类推直至最后。if (e && e.value!="") 是两个判断式的组合判断,这是一个“与”运算,只要一个判断式为 false 则整个值都为 false。第一个判断式 e 由于不存在或者未加载到返回了 null,而在JS里 null 就等同于 false ,这样不用后面的判断也可得到整个组合判断的结果是 false 了,所以系统就不会再去判断后面的那句 e.value 了。这点与B系列语言不同,尤其要注意。在B语言中 if e and e.value!="" then 这样的语句是先把所有的判断式都运算一遍后最后再做组合的“与”运算。所以这句代码在JS里是正确的,若放在VBS里就不一定正确了。

    好了,肚里的货不多,文笔又比较烂,就写这么多了,望大家多多指正!

Javascript 相关文章推荐
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
javascript第一课
Feb 27 #Javascript
javascript编程起步(第三课)
Feb 27 #Javascript
javascript编程起步(第二课)
Feb 27 #Javascript
javascript编程起步(第五课)
Feb 27 #Javascript
javascript编程起步(第四课)
Feb 27 #Javascript
javascript编程起步(第六课)
Feb 27 #Javascript
javascript编程起步(第七课)
Feb 27 #Javascript
You might like
php adodb操作mysql数据库
2009/03/19 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
php&mysql 日期操作小记
2012/02/27 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
批处理与python代码混合编程的方法
2016/05/19 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
某科技软件测试面试题
2013/05/19 面试题
超市后勤自我鉴定
2014/01/17 职场文书
花店创业计划书范文
2014/02/07 职场文书
授权委托书样本
2014/04/03 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
药剂专业自荐书
2014/06/20 职场文书
六一儿童节开幕词
2015/01/29 职场文书
导游词之天津古文化街
2019/11/09 职场文书
python实现图片批量压缩
2021/04/24 Python
Python爬虫实战之爬取携程评论
2021/06/02 Python
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js