JavaScript數據類型之Undefined類型

JavaScript數據類型之Undefined類型詳解

、Undefined類型

Undefined類型只有一個值，即特殊的undefined值。在使用var聲明變量但未對其加以初始化時，這個變量的值就是undefined，例如：

var message;
alert(message==undefined); //true

這個例子只生命了變量message，但未對其進行初始化。比較這個變量與undefined字面量，結果表明它們是相等的。這個例子與下面的例子是等價的：

var message=undefined;
alert(message==undefined); //true

這個例子使用undefined值顯式初始化了變量message。但我們沒有必要這么做，因為未經初始化的值默認就會取得undefined值。

一般而言，不存在需要顯式地把一個變量設置為undefined值的情況。字面值undefined的主要目的是用于比較，而ECMA-262第3版之前的版本中并沒有規定這個值。第3版引入這個值是為了正式區分空對象指針與未經初始化的變量。

二、未初始化的變量與尚未定義的變量

不過，未初始化的變量與尚未定義的變量是不一樣的，看看下面這個例子：

var message;
//var age;
alert(message); //"undefined"
alert(age); //產生錯誤

運行以上代碼，第一個警告框會顯示變量message的值，即“undefined”。而第二個警告框，由于傳遞給alert()函數的是尚未聲明的變量age，則會導致拋出一個錯誤。對于尚未聲明過的變量，只能執行一項操作，即使用typeof操作符檢測其數據類型（對未經聲明的變量調用delete不會導致錯誤，但這樣做沒什么實際意義，而且在嚴格模式下確實會導致錯誤）。

然而，令人困惑的是：對未經初始化的變量執行typeof操作符會返回undefined值，而對未聲明的變量執行typeof操作符同樣也會返回undefined值。來看下面的例子：

var message;
//var age
alert(typeof message); //"undefined"
alert(typeof age); //"undefined"

結果表明，對未經初始化和未聲明的變量執行typeof操作符都返回了undefined值，這個結果有其邏輯上的合理性。因為雖然這兩種變量從技術角度看有本質區別，但實際上無論對哪種變量也不可能執行真正的操作。

即便未初始化的變量會自動被賦予undefined值，但顯示地初始化變量依然是明智的選擇。如果能夠做到這一點，那么當typeof操作符返回“undefined”值時，我們就知道被檢測的變量還沒有被聲明，而不是尚未初始化。

篇文章給童靴們講解了typeof操作符的用法，從這篇開始我們分六篇詳細講解js數據類型。

Undefined 類型

Undefined只有一個特殊的值，就是undefined。在使用var變量聲明變量但是并沒有給其初始化時，它的值就是undefined。

var message;
console.log(message==undefined); //true

上面的栗子只聲明了一個變量message，沒有給它初始化。我們在控制臺輸出變量message與字面量undefined比較后的結果是相等的。這個栗子與下面的栗子等價的：

var message=undefined;
console.log(message==undefined); //true

上面的栗子給message初始化一個值undefined，結果也是一樣的。不過我們不需要如此麻煩，一個沒有初始化的值默認會取undefined值。

童靴們還要注意的是，沒有初始化的變量和尚未定義的變量還是不一樣的。我們舉個栗子區分一下：

//var age;
console.log(age) //產生錯誤

var name；
console.log(name); //undefined

上面栗子中第一段代碼，因為age是注釋的，并沒有聲明變量age，所以在控制臺中輸出會導致一個錯誤：

控制臺報錯

第二段代碼聲明了一個變量name，所以在控制臺中會顯示name的值undefined：

對尚未聲明的變量，我們只能執行一項操作就是typeof操作符檢測其類型。另大家都疑惑的是，未初始化的變量執行typeof操作符返回的值是undefined，而沒有聲明的變量執行typeof操作符也會返回undefined。

var name;
//var age
console.log(typeof name) //undefined
console.log(typeof age) //undefined

這種結果可能童靴們會疑惑，其實還是有一定邏輯上的合理性的。雖然它們在技術角度看有本質的區別，但是這兩種變量都是不可能執行真正的操作。

愛學習的孩子運氣不會差哦~

關注小白前端，持續收到文章推送！

vue與axios直接在html文件中使用的時候，位于axios的請求中的this指向并不是指向vue,而是指向window，如果在請求中直接用this獲取data中的數據會出現undefined的問題，解決思路是將ES5的函數語法更換為箭頭函數即可解決此問題，深層的原因就得深入去了解箭頭函數和普通函數之間的區別了！

案例：

new Vue({
	el: '#app',
	data:{
		carousels: [], 
    },
    created() {
      axios.get('/api/banners/').then(function (response) {
      	   // 這里的this.carousels是undefined，因此上下邊的賦值是不起作用的
           this.carousels=res.data
       }).catch(function (error) {
           console.log(err)
       });
     },
 })

以上案例可以發現在axios中使用this獲取data中的值是獲取不到的，這就是this的指向問題造成的，他不是指向vue，只需要修改如下，將function函數改為箭頭函數即可解決！

修改代碼如下：

new Vue({
	el: '#app',
	data:{
		carousels: [], 
    },
    created() {
      axios.get('/api/banners/').then(res=> {
           this.carousels=res.data
       }).catch(err=> {
           console.log(err)
       });
     },
 })

到此問題就解決了！

在線咨詢

上一篇：terraform providers 國內不容易那
下一篇：網頁中實現文件上傳下載的三種解決方案(推薦)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript數據類型之Undefined類型

Undefined 類型

您的項目需求