寫(xiě)出更好的JavaScript之undefined篇(上)
我們寫(xiě)JavaScript程序的時(shí)候總有需要用到“未定義”的時(shí)候,比方說(shuō)我們要知道某一個(gè)值是不是已經(jīng)經(jīng)過(guò)賦值,或者我們希望消除某一個(gè)已經(jīng)賦予的值,我們就可能這樣做:
output(myVar === undefined);
myVar = undefined;
然而這樣做并不太好,如果我們嘗試“讀”(或者比較)一個(gè)不存在的變量,就會(huì)引發(fā)一個(gè)異常。
比方說(shuō)如果因?yàn)樵O(shè)計(jì)得不夠周全,執(zhí)行上面的代碼的時(shí)候還沒(méi)有定義過(guò)myVar這個(gè)變量,上面的代碼就會(huì)出錯(cuò);
另外在較早的瀏覽器版本上,也不存在undefined這個(gè)預(yù)定義值,所以為了提高兼容性和容錯(cuò)性,我們可以這樣做:
output(typeof(myVar) == "undefined");
myVar = void(0);
typeof運(yùn)算符是JavaScript的語(yǔ)言功能,雖然上面的代碼看起來(lái)像是這樣的一種東西:
output(oneFunction(myVar) == "undefined");
myVar = void(0);
但這兩者有一個(gè)重要區(qū)別——當(dāng)myVar不存在的時(shí)候,前者可以正確執(zhí)行,并返回字符串"undefined";而后者不管內(nèi)部構(gòu)造是什么樣的,都會(huì)引發(fā)異常。
void則是另一個(gè)語(yǔ)言功能,這個(gè)運(yùn)算符的意義是向腳本的其它部分隱藏它的傳入?yún)?shù);而假如有一個(gè)語(yǔ)句試圖得到void“運(yùn)算”的結(jié)果,它就只能得到“未定義”。
因?yàn)関oid的這個(gè)特性,void最常見(jiàn)的功能就有兩種:一是像上面的代碼中那樣將“未定義”值賦予給其它變量/屬性;另一種就是像下面這樣:
<a href="javascript:void(favList.push(curItem));">添加到收藏列表</a>
其中favList是一個(gè)JavaScript數(shù)組,而curItem是一個(gè)已經(jīng)定義的對(duì)象——數(shù)組的push方法會(huì)返回執(zhí)行push操作以后數(shù)組的長(zhǎng)度,在這個(gè)例子里面這個(gè)長(zhǎng)度對(duì)我們來(lái)說(shuō)一點(diǎn)用都沒(méi)有,但如果放任它不管的話(huà),瀏覽器就可能會(huì)跳轉(zhuǎn)到一個(gè)幾乎為空白的腳本結(jié)果頁(yè)面,只顯示push的返回值,比方說(shuō)“3”。
因此需要用一個(gè)void運(yùn)算符來(lái)“欺騙”瀏覽器:這里啥都沒(méi)有。
現(xiàn)在把目光回到對(duì)“未定義”的使用上,就會(huì)發(fā)現(xiàn)前面我們用來(lái)同“未定義”比較的“高容錯(cuò)性”的typeof運(yùn)算符,用起來(lái)有點(diǎn)麻煩:總共需要多寫(xiě)“typeof()""”這樣10個(gè)字符。
雖然我們是成天跟麻煩打交道的程序員,但這也不能說(shuō)明我們不該想辦法減少麻煩啊~各種開(kāi)發(fā)工具其實(shí)不都是為了把編程工作變得簡(jiǎn)單才出現(xiàn)的么?
所以說(shuō)如果明確知道一個(gè)變量一定一定絕對(duì)絕對(duì)已經(jīng)聲明過(guò),就可以把這個(gè)變量直接和已知的“未定義”相比較,比方說(shuō)這樣:
output(myVar === void(0));
相比于使用typeof運(yùn)算符,后面這個(gè)辦法除了少打幾個(gè)字符,還有一些好處:可以避免難以察覺(jué)的拼寫(xiě)錯(cuò)誤(比方說(shuō)把“undefined”寫(xiě)成“undefinied”什么的) 。
到這里,最常見(jiàn)的關(guān)于“undefined”/“未定義”的技巧,已經(jīng)介紹完了。
在下一篇里面,我會(huì)介紹另一些不太常見(jiàn)的技巧。
相關(guān)文章
JS實(shí)現(xiàn)鼠標(biāo)滑過(guò)鏈接改變網(wǎng)頁(yè)背景顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)滑過(guò)鏈接改變網(wǎng)頁(yè)背景顏色的方法,涉及js響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素屬性的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
詳解JavaScript數(shù)組過(guò)濾相同元素的5種方法
本篇文章主要介紹了詳解JavaScript數(shù)組過(guò)濾相同元素的5種方法,詳細(xì)的介紹了5種實(shí)用方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-05-05
uniapp 微信默認(rèn)地圖選點(diǎn)功能實(shí)現(xiàn)
這篇文章主要介紹了uniapp 微信默認(rèn)地圖選點(diǎn)功能實(shí)現(xiàn),本文通過(guò)實(shí)例代碼效果圖展示給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
JS利用window.print()實(shí)現(xiàn)網(wǎng)頁(yè)打印功能
print作為瀏覽已經(jīng)比較成熟的技術(shù)可以經(jīng)常被用來(lái)打印頁(yè)面的部分內(nèi)容。本文將在JS中調(diào)用window.print()方法實(shí)現(xiàn)網(wǎng)頁(yè)打印功能,感興趣的可以跟隨小編一起學(xué)習(xí)一下2022-04-04
layer彈出層的關(guān)閉問(wèn)題詳解之在執(zhí)行完畢后關(guān)閉當(dāng)前彈出層
在前端頁(yè)面中用layer打開(kāi)窗口供用戶(hù)輸入或選擇是非常常見(jiàn)的用法,但是有時(shí)為了完成一次操作,需要彈出多個(gè)窗口進(jìn)行選擇、輸入或者提示,因此在關(guān)閉窗口的時(shí)候需要實(shí)現(xiàn)指定關(guān)閉任意窗口,需要的朋友可以參考下2023-10-10
原生Js 實(shí)現(xiàn)的簡(jiǎn)單無(wú)縫滾動(dòng)輪播圖的示例代碼
這篇文章主要介紹了原生Js 實(shí)現(xiàn)的簡(jiǎn)單無(wú)縫滾動(dòng)輪播圖的示例代碼,幫助大家更好的理解喝學(xué)習(xí)使用js,感興趣的朋友可以了解下2021-05-05
使用Javascript實(shí)現(xiàn)復(fù)制粘貼功能的示例代碼
本篇文章記錄如何通過(guò)js代碼實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板,之后可以粘貼到需要的地方的功能,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
mqtt.js?無(wú)法連接/錯(cuò)誤提示?WebSocket?connection?to?‘ws://xxxxx‘?
這篇文章主要介紹了mqtt.js?無(wú)法連接/錯(cuò)誤提示?WebSocket?connection?to?‘ws://xxxxx‘?failed:,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01
javascript如何操作HTML下拉列表標(biāo)簽
下拉列表在網(wǎng)站前端開(kāi)發(fā)中經(jīng)常遇到,如何操作html下拉列表標(biāo)簽,本篇文章給大家詳解javascript如何操作html下拉列表標(biāo)簽,需要的朋友可以來(lái)參考下2015-08-08

