JavaScript代碼里的判斷小結(jié)
比較判斷
比較判斷是比較兩個(gè)值,返回一個(gè)布爾值,表示是否滿足比較條件。JavaScript一共提供了8個(gè)比較運(yùn)算符,這里主要說(shuō)一下嚴(yán)格相等運(yùn)算符和相等運(yùn)算符的區(qū)別
嚴(yán)格相等運(yùn)算符===
判斷 返回 兩個(gè)值類型不同 false 兩個(gè)值都是null/undefined/true/false true 兩個(gè)值其中之一為NaN false 兩個(gè)值都為數(shù)值且值相等 true 兩個(gè)值都為字符串,且值相等 true 兩個(gè)值都指向同一個(gè)引用類型 true 1 === "1" // false true === true // true undefined === undefined // true null === null // true 1 === 1 // true NaN === NaN // false +0 === -0 // true ({} === {}) // false [] === [] // false (function (){} === function (){}) // false var v1 = {}; var v2 = v1; //兩個(gè)值引用同一個(gè)對(duì)象 v1 === v2 // true
嚴(yán)格相等運(yùn)算符有一個(gè)對(duì)應(yīng)的嚴(yán)格不相等運(yùn)算符(!==),兩者的運(yùn)算結(jié)果正好相反
相等運(yùn)算符==
if 相等運(yùn)算符比較相同類型的數(shù)據(jù)時(shí),同嚴(yán)格相等運(yùn)算符 else if 相等運(yùn)算符比較不同類型的數(shù)據(jù)時(shí): 原始類型的數(shù)據(jù)會(huì)轉(zhuǎn)換成數(shù)值類型,把字符串和布爾值都轉(zhuǎn)為數(shù)值,再進(jìn)行比較 null == undefined 返回true 一個(gè)是對(duì)象,另一個(gè)是數(shù)字或者字符串,把對(duì)象轉(zhuǎn)成基本類型值再比較 else false 123 == 123; //true '123' == 123; //true,'123'會(huì)轉(zhuǎn)成成數(shù)值123 false == 0; //true,false 轉(zhuǎn)成數(shù)值就是0 'a' == 'A'; //false,轉(zhuǎn)換后的編碼不一樣 123 == {}; //false,執(zhí)行toString()或valueOf()會(huì)改變 123 == NaN; //false,只要有NaN,都是false {} == {}; //false,比較的是他們的地址,每個(gè)新創(chuàng)建對(duì)象的引用地址都不同 null == undefined //true 'NaN' == NaN //false 123 == NaN //false NaN == NaN //false false == 0 //true true == 1 //true true == 2 //false undefined == 0 //false null == 0 //false '123' == 123 //true '123' === 123 //false
相等運(yùn)算符有一個(gè)對(duì)應(yīng)的不相等運(yùn)算符(!=),兩者的運(yùn)算結(jié)果正好相反
!!判斷
!!相當(dāng)于Boolean
,寫代碼時(shí)用!!轉(zhuǎn)化為Boolean
類型做判斷非常好用
!!'xzavier'; // true !!''; // false !!'0'; // true !!'1'; // true !!'-1' // true !!0 // false !!undefined // false !!null // false !!NaN // false !!{}; // true !!{name:'xz'} // true !![]; // true !![1,2,3]; // true !!true; // true
!判斷
取反運(yùn)算符 ! 用于將布爾值變?yōu)橄喾粗?,即true變成false,false變成true。對(duì)于非布爾值的數(shù)據(jù),取反運(yùn)算符會(huì)自動(dòng)將其轉(zhuǎn)為布爾值。規(guī)則是,以下六個(gè)值取反后為true,其他值取反后都為false
undefined null false 0(包括+0和-0) NaN 空字符串('') !undefined // true !null // true !false // true !0 // true !NaN // true !"" // true !54 // false !'hello' // false ![] // false ![1,2,3] // false !{} // false !{name:'xz'} // false
[]和{}判斷
對(duì)于[]和{},我們?cè)跇I(yè)務(wù)代碼中肯定會(huì)對(duì)其做判斷,如上
!!{}; // true !!{name:'xz'} // true !![]; // true !![1,2,3]; // true
不能用!!和!做判斷,對(duì)于數(shù)組,我們用它的length
屬性做判斷
[].length // 0 false [1,2,3].length // 3 true
對(duì)象的話,可以采用jQuery的方法$.isEmptyObject(obj)
,也可以js封裝一個(gè)方法,就模仿jQuery 寫一個(gè)
function isEmptyObject(obj) { var name; for ( name in obj ) { return false; } return true; } isEmptyObject({}); //true isEmptyObject({name: 'xzavier'}); false
推薦一個(gè)工具庫(kù)underscore
,它也有個(gè)方法isEmpty(object)
const _ = require('underscore'); _.isEmpty({}); // true
&&判斷
用在條件表達(dá)式中,規(guī)則是:
num1 && num2 true true true true false false false true false false false false
用在語(yǔ)句中,規(guī)則是 :
result = expression1 && expression2
如果expression1的計(jì)算結(jié)果為false,則result為expression1。否則result為expression2
(1 - 1) && ( x += 1) // 0 (2 > 1) && ( 5 + 5) // 10 (2 + 1) && ( 5 + 5) // 10
||判斷
用在條件表達(dá)式中,規(guī)則是:
num1 || num2 true true true true false true false true true false false false
用在語(yǔ)句中,規(guī)則是:
如果第一個(gè)運(yùn)算子的布爾值為true,則返回第一個(gè)運(yùn)算子的值,且不再對(duì)第二個(gè)運(yùn)算子求值
如果第一個(gè)運(yùn)算子的布爾值為false,則返回第二個(gè)運(yùn)算子的值
||運(yùn)算符一般在業(yè)務(wù)代碼中做條件表達(dá)式判斷和容錯(cuò)處理,我們?cè)谌?shù)據(jù)時(shí)取不到的情況下,又不能影響后面的業(yè)務(wù)代碼,就需要進(jìn)行容錯(cuò)。||就是一個(gè)非常好的容錯(cuò)寫法,相當(dāng)于提供一個(gè)備用數(shù)據(jù)。
var data = undefined || backup_data; //請(qǐng)求出錯(cuò),數(shù)據(jù)為undefined時(shí),就去備用數(shù)據(jù)backup_data
三目判斷
規(guī)則:
condition ? expression1 : expression2; function absN(xzavier) { return xzavier > 0 ? xzavier : -xzavier; } absN(-123); //123 absN(123); //123
如果第一個(gè)表達(dá)式的布爾值為true,則返回第二個(gè)表達(dá)式的值,否則返回第三個(gè)表達(dá)式的值。
總結(jié)
以上就是為大家整理JavaScript代碼里的判斷的全部?jī)?nèi)容個(gè),希望本文的內(nèi)容對(duì)大家使用Javascript能有所幫助。
相關(guān)文章
js實(shí)現(xiàn)前端界面導(dǎo)航欄下拉列表
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)前端界面導(dǎo)航欄下拉列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08Javascript控制div屬性動(dòng)態(tài)變化實(shí)例分析
這篇文章主要介紹了Javascript控制div屬性動(dòng)態(tài)變化,以實(shí)例形式較為詳細(xì)的分析了JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù)、時(shí)、分、秒)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)倒計(jì)時(shí),精確到天數(shù)、時(shí)、分、秒,還為大家分享了parseInt() 函數(shù)的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11使用JavaScript校驗(yàn)URL的方法小結(jié)
JavaScript中如何校驗(yàn)一個(gè)URL?最近遇到幾次需要校驗(yàn)URL的,所以本文給大家整理一下幾個(gè)校驗(yàn)URL的方法,文中有詳細(xì)的代碼講解和圖文參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12JS 動(dòng)態(tài)加載js文件和css文件 同步/異步的兩種簡(jiǎn)單方式
下面小編就為大家?guī)?lái)一篇JS 動(dòng)態(tài)加載js文件和css文件 同步/異步的兩種簡(jiǎn)單方式。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09Javascript檢查圖片大小不要讓大圖片撐破頁(yè)面
用Javascript判斷圖片大小,其實(shí)只要寫一個(gè)簡(jiǎn)單的函數(shù)就可以了,使用其他語(yǔ)言進(jìn)行判斷,過(guò)程比較復(fù)雜,用 Javascript 判斷輕松搞定2014-11-11利用JS做網(wǎng)頁(yè)特效_大圖輪播(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇利用JS做網(wǎng)頁(yè)特效_大圖輪播(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08BootStrap模態(tài)框閃退問(wèn)題實(shí)例代碼詳解
這篇文章主要介紹了BootStrap模態(tài)框閃退問(wèn)題實(shí)例代碼詳解,需要的朋友可以參考下2018-12-12