JavaScript--判空判等

寫這個(gè)鼎兽,其實(shí)是有一次送測(cè)時(shí)提的bug,當(dāng)時(shí)對(duì)這個(gè)問題不解铣除,后來花了點(diǎn)時(shí)間理解了之后谚咬,才知道大概是怎么回事。
先看下當(dāng)初的代碼吧(大概的):

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

獲取id為consumerType的value通孽,判斷其是否為0序宦。問題就出在這個(gè)0判斷上。id為consumerType的那個(gè),是一個(gè)可輸入互捌,也可從后端傳過來潘明。當(dāng)時(shí)這個(gè)值為空,但是這個(gè)相等判斷就為true秕噪,然后就緊接著跟著一段操作钳降。
為什么這個(gè)地方會(huì)錯(cuò)呢,我們逐步分析腌巾。

1遂填、JavaScript中的類型

JavaScript中的類型是松散類型,也是弱類型澈蝙。就是聲明一個(gè)變量后吓坚,只是分配一個(gè)內(nèi)存出來,可以對(duì)這個(gè)變量賦整數(shù)(向這個(gè)內(nèi)存寫入整數(shù)或者其他類型)灯荧,也可以賦時(shí)間礁击,也可以賦數(shù)組。同時(shí)不同的類型之間有一定的轉(zhuǎn)換關(guān)系逗载。
松散類型:

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

弱類型:

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

JavaScript有6種數(shù)據(jù)類型哆窿,分別是number、string厉斟、object挚躯、Boolean、function擦秽、undefined码荔。

"undefined" 如果值未定義              Undefined
"boolean"   如果這個(gè)值是布爾值         Boolean
"string"    如果這個(gè)值是字符串         String
“number”    如果這個(gè)值是數(shù)值類型       Number
“object”    如果這個(gè)值是對(duì)象或null    Object
“function”  如果這個(gè)值是函數(shù)          Function

想知道類型,用typeof

2感挥、typeof

知道了幾種類型目胡,那么如果我想知道這個(gè)對(duì)象的類型,那么使用typeof即可知道其類型链快。

但是還有一種,非基礎(chǔ)類型:

var a = [];

數(shù)組類型眉尸,怎么知道呢域蜗?也有,instanceof噪猾。

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

instanceof與Java中的instanceof作用類似吧霉祸。

3、相等判斷

3.1袱蜡、等號(hào)的類型

在JavaScript中丝蹭,等號(hào)的類型有兩種:相等、全等

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

相等用于基本類型判斷坪蚁,全等用于對(duì)象判斷奔穿。

3.2 相等隱式類型轉(zhuǎn)換

對(duì)于相等為何上面 a == b還可以成立呢镜沽,原因是有以下隱式類型轉(zhuǎn)換:

- 如果一個(gè)運(yùn)算數(shù)是 Boolean 值,在檢查相等性之前贱田,把它轉(zhuǎn)換成數(shù)字值缅茉。false 轉(zhuǎn)換成 0,true 為 1男摧。
- 如果一個(gè)運(yùn)算數(shù)是字符串蔬墩,另一個(gè)是數(shù)字,在檢查相等性之前耗拓,要嘗試把字符串轉(zhuǎn)換成數(shù)字拇颅。
- 如果一個(gè)運(yùn)算數(shù)是對(duì)象,另一個(gè)是字符串乔询,在檢查相等性之前樟插,要嘗試把對(duì)象轉(zhuǎn)換成字符串。
- 如果一個(gè)運(yùn)算數(shù)是對(duì)象哥谷,另一個(gè)是數(shù)字岸夯,在檢查相等性之前,要嘗試把對(duì)象轉(zhuǎn)換成數(shù)字们妥。

在轉(zhuǎn)換的同時(shí)猜扮,還有以下原則:

- 值 null 和 undefined 相等。
- 相等性檢查時(shí)监婶, null 和 undefined 不會(huì)轉(zhuǎn)換成其他值旅赢。
- 若某個(gè)運(yùn)算數(shù)是 NaN,等號(hào)將返回 false惑惶,非等號(hào)將返回 true煮盼。
- 如果兩個(gè)運(yùn)算數(shù)都是對(duì)象,那么比較的是它們的引用值带污。如果兩個(gè)運(yùn)算數(shù)指向同一對(duì)象僵控,那么等號(hào)返回 true,否則兩個(gè)運(yùn)算數(shù)不等

在這可以看出鱼冀,NaN == NaN 為false(這個(gè)邏輯也是醉了)报破。

那么對(duì)下面的代碼,可以想想結(jié)果:

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 對(duì)象判等

js的對(duì)象判等采用的是值&&地址一致千绪,才判等充易,因此對(duì)象判等尤其需要注意。

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內(nèi)判斷兩個(gè)對(duì)象相等呢荸型?直接對(duì)對(duì)象進(jìn)行判斷已經(jīng)證明是不可行的盹靴,那么就只有對(duì)其中的屬性進(jìn)行逐個(gè)遍歷進(jìn)行判斷。

不過在實(shí)際開發(fā)的過程中,極少在前端進(jìn)行對(duì)象的相等判斷稿静。而且知道了java對(duì)象的相等判斷原則后梭冠,就更不會(huì)在前端做相等判斷了(場(chǎng)景不多,并且個(gè)人感覺在前端做這種邏輯判斷不太靠譜)自赔。

4 全等判斷

全等號(hào)是使用三個(gè)等號(hào)判斷妈嘹,只有在運(yùn)算數(shù)就相等的情況下,才返回 true绍妨。

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

5润脸、日期相等判斷

從另一個(gè)角度來說,日期時(shí)間類型也是一個(gè)對(duì)象他去。那么看完上面的介紹毙驯,你肯定就知道了,作為日期對(duì)象灾测,肯定不能簡單的用 == 進(jìn)行判等爆价。有兩種思路:
1)將該時(shí)間字符串轉(zhuǎn)換成時(shí)間對(duì)象。

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)逐個(gè)比較其中的年月日媳搪。

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

當(dāng)然了,如果有時(shí)分秒秦爆,也是一樣的邏輯序愚。

6、實(shí)例

6.1 數(shù)組下標(biāo)處理

背景描述:開發(fā)一個(gè)可自由新增行等限、刪除行的代碼
在新增行的時(shí)候爸吮,找到一個(gè)未使用過的行下標(biāo):

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為找到的行下標(biāo)。這樣看是不是沒問題望门。實(shí)際上有問題形娇,由于可能進(jìn)行了刪除操作,那么其中第i行可能不存在筹误,代碼應(yīng)改為如下:

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 頁面空字段判斷

在開發(fā)的時(shí)候桐早,經(jīng)常遇到一個(gè)問題,就是判斷頁面的input厨剪、select等輸入勘畔、選擇框判斷是否有值。
這里丽惶,一樣有2種開發(fā)思路
1)自定義標(biāo)簽
這個(gè)也是之前一次同事的技術(shù)開發(fā)分享時(shí)提到的。
自定義一個(gè)標(biāo)簽爬立,isNotNull,在進(jìn)行submit的時(shí)候?qū)λ袚碛羞@類標(biāo)簽的輸入框都進(jìn)行類似的校驗(yàn)钾唬。
這樣做的好處很明顯,在業(yè)務(wù)有變化的時(shí)候,只需要移除或者重新校驗(yàn)帶有該標(biāo)簽的所有輸入框即可抡秆。
2)逐個(gè)校驗(yàn)
根據(jù)id或者name奕巍,逐個(gè)獲取進(jìn)行校驗(yàn),類似于以下的代碼:

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

7儒士、后話

寫這篇文章的時(shí)候的止,距離發(fā)生這個(gè)問題已經(jīng)過了很久了。當(dāng)時(shí)記下了這個(gè)問題着撩,時(shí)過境遷诅福,問題的出處都已經(jīng)找不到了。
這篇文章寫的比較淺拖叙,僅供大家一看氓润。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市薯鳍,隨后出現(xiàn)的幾起案子咖气,更是在濱河造成了極大的恐慌,老刑警劉巖挖滤,帶你破解...
    沈念sama閱讀 219,270評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件崩溪,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡斩松,警方通過查閱死者的電腦和手機(jī)伶唯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來砸民,“玉大人抵怎,你說我怎么就攤上這事×氩危” “怎么了反惕?”我有些...
    開封第一講書人閱讀 165,630評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長演侯。 經(jīng)常有香客問我姿染,道長,這世上最難降的妖魔是什么秒际? 我笑而不...
    開封第一講書人閱讀 58,906評(píng)論 1 295
  • 正文 為了忘掉前任悬赏,我火速辦了婚禮,結(jié)果婚禮上娄徊,老公的妹妹穿的比我還像新娘闽颇。我一直安慰自己,他們只是感情好寄锐,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,928評(píng)論 6 392
  • 文/花漫 我一把揭開白布兵多。 她就那樣靜靜地躺著尖啡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪剩膘。 梳的紋絲不亂的頭發(fā)上衅斩,一...
    開封第一講書人閱讀 51,718評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音怠褐,去河邊找鬼畏梆。 笑死,一個(gè)胖子當(dāng)著我的面吹牛奈懒,可吹牛的內(nèi)容都是我干的奠涌。 我是一名探鬼主播,決...
    沈念sama閱讀 40,442評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了股毫?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,345評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤达皿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后贿肩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體峦椰,經(jīng)...
    沈念sama閱讀 45,802評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,984評(píng)論 3 337
  • 正文 我和宋清朗相戀三年汰规,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了汤功。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,117評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡溜哮,死狀恐怖滔金,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情茂嗓,我是刑警寧澤餐茵,帶...
    沈念sama閱讀 35,810評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站述吸,受9級(jí)特大地震影響忿族,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蝌矛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,462評(píng)論 3 331
  • 文/蒙蒙 一道批、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧入撒,春花似錦隆豹、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽簿煌。三九已至,卻和暖如春鉴吹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背惩琉。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評(píng)論 1 272
  • 我被黑心中介騙來泰國打工豆励, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人瞒渠。 一個(gè)月前我還...
    沈念sama閱讀 48,377評(píng)論 3 373
  • 正文 我出身青樓良蒸,卻偏偏與公主長得像,于是被迫代替她去往敵國和親伍玖。 傳聞我的和親對(duì)象是個(gè)殘疾皇子嫩痰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,060評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • FreeCodeCamp - Basic JavaScript 寫在前面: 我曾經(jīng)在進(jìn)谷前刷過這一套題,不過當(dāng)時(shí)只...
    付林恒閱讀 16,445評(píng)論 5 28
  • Comment your JavaScript Code JavaScript中的注釋方式有以下兩種: 使用 //...
    歸云丶閱讀 1,103評(píng)論 0 0
  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿:20170802 前言: 排版 ...
    庭說閱讀 10,989評(píng)論 6 13
  • 今天的課題是:知窍箍,情串纺,意。 簡簡單單三個(gè)字椰棘,表述了寫作時(shí)候的文字作用纺棺,“知”是知識(shí),對(duì)于一個(gè)事物邪狞,它是什么祷蝌,它與其...
    kww007閱讀 420評(píng)論 0 0
  • 1.事情的起因 教育戲劇培訓(xùn)第五天,我們組上了一堂研討課帆卓,大家對(duì)于我在課堂上用的一個(gè)技術(shù)“最高指示”很感興趣巨朦。 “...
    好奇的表哥閱讀 546評(píng)論 0 1