JavaScript中直接寫undefined的錯誤及用法剖析
介紹
眾所周知,在JavaScript 語言中,一個沒有被賦值的變量會有個默認值 undefined
,而 undefined
作為全局對象的一個屬性經(jīng)常會用作一些賦值返回,邏輯判斷等業(yè)務場景中??杀酒谝f的是,盡量不要直接去拼寫 undefined
了,因為那是不太嚴謹?shù)男袨?,可能出現(xiàn)很多意外情況。
原因
我們經(jīng)常在判斷某個變量是否等于 undefined
,如下:
function test(value) { if (value === undefined) { return `value is undefined`; } return `value is not undefined`; } let value; test(value); // 'value is undefined'
這樣看上去沒有什么毛病,而且 window.undefined
的 writable
為 false
這意味著它是只讀的沒發(fā)寫入修改,你在 window
下,修改 undefined
也是無濟于事。
undefined = "hello world"; console.log(undefined); // undefined
對這樣是沒錯,看似萬無一失。但是還有一種情況沒有考慮到,那就是 undefined
它是 window
對象的一個全局屬性,那么我們可以局部也起一個也叫 undefined
的變量給它賦值,那么問題就來了。如下:
function test(value) { let undefined = "hello world"; if (value === undefined) { return `value is undefined`; } return `value is not undefined`; } let value; test(value); // 'value is not undefined'
我們可以看到驗證入?yún)⑹欠袷?undefined
的方法就出現(xiàn)了bug。因為,我們把 undefined
賦了一個新值,在這個作用域下找到的所有 undefined
都是那個新的值,這樣我們就沒法通過這種方式去驗證判斷 undefined
了。
解決
不賣關子了,我們通常會用 void 0
或者 void(0)
來去直接替代 undefined
,因為他返回的也是 undefined
。
function test(value) { let undefined = "hello world"; if (value === void 0) { return `value is undefined`; } return `value is not undefined`; } let value; test(value); // 'value is undefined'
void
運算符是對給定的表達式進行求值,然后返回 undefined
。而且, void
是不能重新定義的,不然會報語法錯誤,這樣也保證了用 void
來代替 undefined
的不會出現(xiàn)被重定義而造成的bug。
function func() { var void = function() {}; return void(0); } // Uncaught SyntaxError: Unexpected token 'void'
結語
其實在很早之前,很多大廠的前端規(guī)范都會寫到用 void 0
去代替 undefined
作為準則,去防止一些意外發(fā)生。對于大型項目來說,這點嚴謹也是值得考慮的。 PS:隨著前端工程化的推進,打包和校驗時都會規(guī)避掉這個問題,但我們依然要認識到這個寫法背后的原因,養(yǎng)成習慣,雖然后面遇到的可能性概率幾乎為0。
以上就是不要在JavaScript中直接寫undefined了的詳細內容,更多關于JavaScript undefined的資料請關注腳本之家其它相關文章!
相關文章
JavaScript+HTML實現(xiàn)學生信息管理系統(tǒng)
這篇文章主要介紹了JavaScript實現(xiàn)學生信息管理系統(tǒng),文中有非常詳細的代碼示例,對正在學習js的小伙伴們有一定的幫助,需要的朋友可以參考下2021-04-04實現(xiàn)基于飛書webhook監(jiān)聽github代碼提交
這篇文章主要為大家介紹了實現(xiàn)基于飛書webhook監(jiān)聽github代碼提交示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01await vs return vs return await關鍵區(qū)別
這篇文章主要為大家介紹了await vs return vs return await關鍵區(qū)別解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12