写这个，其实是有一次送测时提的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、后话
写这篇文章的时候，距离发生这个问题已经过了很久了。当时记下了这个问题，时过境迁，问题的出处都已经找不到了。
这篇文章写的比较浅，仅供大家一看。
网友评论