JavaScript--判空判等

写这个,其实是有一次送测时提的bug,当时对这个问题不解,后来花了点时间理解了之后,才知道大概是怎么回事。
先看下当初的代码吧(大概的):

var consumerType = $("#consumerType").val();
if(0 == consumerType){
    ……
}

获取id为consumerType的value,判断其是否为0。问题就出在这个0判断上。id为consumerType的那个,是一个可输入,也可从后端传过来。当时这个值为空,但是这个相等判断就为true,然后就紧接着跟着一段操作。
为什么这个地方会错呢,我们逐步分析。

1、JavaScript中的类型

JavaScript中的类型是松散类型,也是弱类型。就是声明一个变量后,只是分配一个内存出来,可以对这个变量赋整数(向这个内存写入整数或者其他类型),也可以赋时间,也可以赋数组。同时不同的类型之间有一定的转换关系。
松散类型:

var s ;
s = 1;
s = 'adsa';
s = {};

弱类型:

var s = 1;
var v = 'a';
var sv = 1 + 'a';

JavaScript有6种数据类型,分别是number、string、object、Boolean、function、undefined。

"undefined" 如果值未定义              Undefined
"boolean"   如果这个值是布尔值         Boolean
"string"    如果这个值是字符串         String
“number”    如果这个值是数值类型       Number
“object”    如果这个值是对象或null    Object
“function”  如果这个值是函数          Function

想知道类型,用typeof

2、typeof

知道了几种类型,那么如果我想知道这个对象的类型,那么使用typeof即可知道其类型。

但是还有一种,非基础类型:

var a = [];

数组类型,怎么知道呢?也有,instanceof。

var a = [];
console.log(a instanceof Array) //返回true

instanceof与Java中的instanceof作用类似吧。

3、相等判断

3.1、等号的类型

在JavaScript中,等号的类型有两种:相等、全等

var a = 1;
var b = '1';
console.log(a == b);  
console.log(a != b);
console.log(a === b);
console.log(a !== b);

相等用于基本类型判断,全等用于对象判断。

3.2 相等隐式类型转换

对于相等为何上面 a == b还可以成立呢,原因是有以下隐式类型转换:

- 如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。
- 如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。
- 如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。
- 如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。

在转换的同时,还有以下原则:

- 值 null 和 undefined 相等。
- 相等性检查时, null 和 undefined 不会转换成其他值。
- 若某个运算数是 NaN,等号将返回 false,非等号将返回 true。
- 如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等

在这可以看出,NaN == NaN 为false(这个逻辑也是醉了)。

那么对下面的代码,可以想想结果:

var a = '';
var b = 0;
var c = null;
var d;
console.log(a == b);
console.log(a == c);
console.log(a == d);
console.log(b == c);
console.log(b == d);
console.log(c == d);
console.log(a == NaN);

以及下面的代码:

var a = 11, b = '22';
var c = a + b;
console.log(c);

var d = 11, e = '5';
var f = d - e;
console.log(typeof f);

3.3 对象判等

js的对象判等采用的是值&&地址一致,才判等,因此对象判等尤其需要注意。

var obj1 = {
    name: "zzz",
    sex : "1"
}

var obj2 = {
    name: "ccc",
    sex : "2"
}

var obj3 = obj1;

//true
console.log(obj1 == obj3);

//true
console.log(obj1 === obj3);

//false
console.log(obj2 == obj3);

//false
console.log(obj2 === obj3);

那么如何在JavaScript内判断两个对象相等呢?直接对对象进行判断已经证明是不可行的,那么就只有对其中的属性进行逐个遍历进行判断。

不过在实际开发的过程中,极少在前端进行对象的相等判断。而且知道了java对象的相等判断原则后,就更不会在前端做相等判断了(场景不多,并且个人感觉在前端做这种逻辑判断不太靠谱)。

4 全等判断

全等号是使用三个等号判断,只有在运算数就相等的情况下,才返回 true。

var sNum = "66";
var iNum = 66;
console.log(sNum == iNum);
console.log(sNum === iNum);

5、日期相等判断

从另一个角度来说,日期时间类型也是一个对象。那么看完上面的介绍,你肯定就知道了,作为日期对象,肯定不能简单的用 == 进行判等。有两种思路:
1)将该时间字符串转换成时间对象。

var startTime = $("#startTime").val();
var endTime = $("#endTime").val();
var starttime = new Date(startTime);
var endtime = new Date(endTime);
var deviation = parseInt((endtime.getTime() - starttime.getTime()) / 1000);
if(0 != deviation){
    ……
}

2)逐个比较其中的年月日。

function isEqualDay (date1,date2) {
    return date1.getFullYear() === date2.getFullYear()
            && date1.getMonth() === date2.getMonth()
            && date1.getDate()  === date2.getDate() ;
}

当然了,如果有时分秒,也是一样的逻辑。

6、实例

6.1 数组下标处理

背景描述:开发一个可自由新增行、删除行的代码
在新增行的时候,找到一个未使用过的行下标:

var table = document.querySelector('#thresholdTable tbody');
var rowCount = table.rows.length;
for(var i=0;;i++){
    var down = document.getElementsByName("useThresholdList["+i+"].amountDown");
    rowCount = i;
    break;
}

其中rowCount为找到的行下标。这样看是不是没问题。实际上有问题,由于可能进行了删除操作,那么其中第i行可能不存在,代码应改为如下:

var table = document.querySelector('#thresholdTable tbody');
var rowCount = table.rows.length;
for(var i=0;;i++){
    var down = document.getElementsByName("useThresholdList["+i+"].amountDown");
    if(undefined != down && '' != down && undefined != down[0]){
        continue;
    }
    rowCount = i;
    break;
}

6.2 页面空字段判断

在开发的时候,经常遇到一个问题,就是判断页面的input、select等输入、选择框判断是否有值。
这里,一样有2种开发思路
1)自定义标签
这个也是之前一次同事的技术开发分享时提到的。
自定义一个标签,isNotNull,在进行submit的时候对所有拥有这类标签的输入框都进行类似的校验。
这样做的好处很明显,在业务有变化的时候,只需要移除或者重新校验带有该标签的所有输入框即可。
2)逐个校验
根据id或者name,逐个获取进行校验,类似于以下的代码:

if(undefined != down 
    && '' != down 
    && undefined != down[0]){
    ……
}

7、后话

写这篇文章的时候,距离发生这个问题已经过了很久了。当时记下了这个问题,时过境迁,问题的出处都已经找不到了。
这篇文章写的比较浅,仅供大家一看。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339

推荐阅读更多精彩内容