這篇文章主要為大家展示了JS中如何準(zhǔn)確判斷變量類型，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來看看吧。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)與策劃設(shè)計(jì),新津縣網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:新津縣等地區(qū)。新津縣做網(wǎng)站價(jià)格咨詢:028-86922220

這是一個(gè)高頻面試題，我們開發(fā)中也進(jìn)程會(huì)遇到，今天我們來實(shí)現(xiàn)一個(gè)函數(shù)getValType(val)用來獲取一個(gè)變量的類型。從1. JS基礎(chǔ)變量類型。2. Js中判斷變量的函數(shù)。 3. 實(shí)現(xiàn)getValType函數(shù)。3個(gè)方面來分析實(shí)現(xiàn)。

Js基礎(chǔ)變量類型

在 JS 中，有 5 種基本數(shù)據(jù)類型和 1 種復(fù)雜數(shù)據(jù)類型，基本數(shù)據(jù)類型有：Undefined, Null, Boolean, Number和String；復(fù)雜數(shù)據(jù)類型是Object，Object中還細(xì)分了很多具體的類型，比如：Array, Function, Date等等。

判斷變量的函數(shù)

我們先定義一組變量來用下面的函數(shù)來測試：

var allVarMap = {
 // 數(shù)字
 num:123,
 // Infinity
 num1: 1 / 0,
 // NaN
 num2: null / 0,
 // 字符串
 str: 'abcdef',
 // 布爾類型
 bool: true,
 // 數(shù)組
 arr :[1, 2, 3, 4],
 // json對象
 json :{name:'wenzi', age:25},
 // 函數(shù)
 func:function(){ console.log('this is function'); },
 // 箭頭函數(shù)
 func1: () => {console.log('arrow function')},
 // undefined類型
 und:undefined,
 // null類型
 nul:null,
 // date類型
 date:new Date(),
 // 正則表達(dá)式
 reg :/^[a-zA-Z]{5,20}$/,
 // 異常類型
 error:new Error()
}

typeof判斷變量類型

typeof運(yùn)算符用于判斷對象的類型，但是對于一些創(chuàng)建的對象，它們都會(huì)返回object。我們用該函數(shù)來判斷上面的結(jié)果：

var results = []
for (let i in allVarMap) {
	results.push(typeof allVarMap[i])
}
console.log(results.join())
// number,number,number,string,boolean,object,object,function,function,undefined,object,object,object,object

可以看到，NaN和Infinity都檢查為number類型，其他的 string,function,boolean,undefined包括箭頭函數(shù)都能正確檢查出來，但是對于reg,date,null都得到了object。看來還需要具體的判斷。

instanceof檢查

ECMAScript 引入了另一個(gè) Java 運(yùn)算符 instanceof 來解決這個(gè)問題。instanceof 運(yùn)算符與typeof 運(yùn)算符相似，用于識(shí)別正在處理的對象的類型。instanceof運(yùn)算符用來判斷一個(gè)構(gòu)造函數(shù)的prototype屬性所指向的對象是否存在另外一個(gè)要檢測對象的原型鏈上。與 typeof 方法不同的是，instanceof方法要求開發(fā)者明確地確認(rèn)對象為某特定類型。

console.log(allVarMap.date instanceof Date) // true
console.log(allVarMap.func instanceof Function) // true

可以看到instanceof可以正確判斷出date,func的類型，但是前提是已知該變量的類型，所以這里不符合我們的預(yù)期。

使用Object.prototype.toString.call

定義：首先，取得對象的一個(gè)內(nèi)部屬性[[Class]]，然后依據(jù)這個(gè)屬性，返回一個(gè)類似于”[object Array]“的字符串作為結(jié)果（看過ECMA標(biāo)準(zhǔn)的應(yīng)該都知道，[[]]用來表示語言內(nèi)部用到的、外部不可直接訪問的屬性，稱為“內(nèi)部屬性”）。利用這個(gè)方法，再配合call，我們可以取得任何對象的內(nèi)部屬性[[Class]]，然后把類型檢測轉(zhuǎn)化為字符串比較，以達(dá)到我們的目的。
我們看看下面的函數(shù)運(yùn)行結(jié)果：

var results = []
for (let i in allVarMap) {
	results.push(Object.prototype.toString.call(allVarMap[i]))
}
console.log(results.join())
// [object Number],[object Number],[object Number],[object String],[object Boolean],[object Array],[object Object],[object Function],[object Function],[object Undefined],[object Null],[object Date],[object RegExp],[object Error]

實(shí)現(xiàn)getValType函數(shù)

根據(jù)上面的分析，我們可以先用typeOf函數(shù)判斷出基礎(chǔ)類型number,string,function,boolean,undefined。然后如果結(jié)果是object，我們再用Object.prototype.toString.call來判斷出具體的類型。

var getVarType = function (val = 0) {
	var type = typeof val
	// object需要使用Object.prototype.toString.call判斷
	if (type === 'object') {
		var typeStr = Object.prototype.toString.call(val)
		// 解析[object String]
		typeStr = typeStr.split(' ')[1]
		type = typeStr.substring(0, typeStr.length - 1)
	}
	return type
}
var results = []
for (let i in allVarMap) {
	results.push(getVarType(allVarMap[i]))
}
console.log(results.join())
// number,number,number,string,boolean,Array,Object,function,function,number,Null,Date,RegExp,Error

可以看到，完美判斷出了所有變量的類型，該函數(shù)可以再添加一些邏輯，判斷一個(gè)變量是否是NaN,Infinity之類的特殊需求。

總結(jié)

1 typeOf能判斷出一個(gè)變量的類型，但是只能判斷出number,string,function,boolean,undefined,null和其他對象類型返回結(jié)果都為object.

2 instanceof能判斷出一個(gè)對象是否是另一個(gè)類的實(shí)例。

3 Object.prototype.toString.call能判斷出所有變量的類型，返回值為[Object ***]。

以上就是關(guān)于JS中如何準(zhǔn)確判斷變量類型的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。

網(wǎng)站題目：JS中如何準(zhǔn)確判斷變量類型
標(biāo)題URL：http://jinyejixie.com/article10/joppdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、外貿(mào)建站、品牌網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)