2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

字?jǐn)?shù)：1871

閱讀時(shí)間：5分鐘

引自MDN：

最新的 ECMAScript 標(biāo)準(zhǔn)定義了 7 種數(shù)據(jù)類型:

• 6 種原始類型:
  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol (ECMAScript 6 新定義)
• 和 Object

至今，JS中共上述7種數(shù)據(jù)類型。這里需要注意，不要將js的內(nèi)置對(duì)象：Date、Array等與數(shù)據(jù)類型混淆了，這些內(nèi)置對(duì)象和我們自己創(chuàng)建的對(duì)象統(tǒng)一屬于Object類型。

6中原始類型的值都無法改變。舉個(gè)栗子，數(shù)值1，我們是無法將他改變成2的；字符串的變化實(shí)質(zhì)上也是產(chǎn)生了一個(gè)新的字符串，舊的字符串仍然不變。由于這種特性，js會(huì)將其存至棧中，按值訪問。而引用類型Object內(nèi)容是可變的，而且大小不固定，所以將它存入堆中，通過地址引用的方式調(diào)用。

Boolean類型：表示邏輯，取值true、false。

Number類型：表示數(shù)字，和其他語言不同，js只有一種數(shù)字類型，是基于IEEE 754標(biāo)準(zhǔn)的雙精度64位的值，取值范圍（-2^63 - 1 至 2^63 - 1）。此外還有一些特殊標(biāo)識(shí)符：Infinity、-Infinity、NaN。

String類型：表示字符串，由字符（2個(gè)字節(jié)）組成的一組數(shù)據(jù)，因此它也具有數(shù)組的可遍歷、擁有長度屬性等特性。

Symbol類型：表示符號(hào)類型，ES6新增的數(shù)據(jù)類型，表示一個(gè)唯一值，一般作為對(duì)象的key值或者枚舉之用，非常適合消除魔法字符串。

Null類型:表示空值，可以理解為一個(gè)尚未創(chuàng)建的對(duì)象。它雖然是空值，但是卻是一個(gè)對(duì)象，而且Object對(duì)象是繼承自它，所以它可以說才是真正的對(duì)象始祖。

注意：雖然null是一個(gè)對(duì)象，但是其中的屬性都是不可訪問的，因此，我們是無法通過代碼獲取它的屬性的。

Undefined類型:表示未定義，一個(gè)沒有定義的變量或者沒有賦予初始值的對(duì)象的值就是undefined。這里不要與Null混淆，它不是一個(gè)對(duì)象。

null === undefined; //false null == undefined; //true null === null; //true undefined == undefined; //true

Object類型：表示對(duì)象。在計(jì)算機(jī)科學(xué)中, 對(duì)象是指內(nèi)存中的可以被標(biāo)識(shí)符引用的一塊區(qū)域。在JS中，對(duì)象可以被看做是一組屬性的集合。JS中以O(shè)bject和Function兩個(gè)對(duì)象為基礎(chǔ)，衍生出了現(xiàn)在百花齊放的各種對(duì)象，JS的繼承、原型等都在這個(gè)基礎(chǔ)上實(shí)現(xiàn)的。

---

類型判斷

由于js弱類型的機(jī)制，變量的類型需要我們自己判斷。江湖上出現(xiàn)了各種判斷方法，下面我們來總結(jié)一下。

1.typeof

MDN上推薦的方法。

let str = 'string';let pNum = 11;let bRt = true;let pSymbol = Symbol('symbol');let pObj = {};let pArray = [];let fun = function () {};//typeofconsole.log('字符串', typeof str); //stringconsole.log('數(shù)字', typeof pNum); //numberconsole.log('布爾', typeof bRt); //booleanconsole.log('符號(hào)', typeof pSymbol); //symbolconsole.log('null', typeof null); //objectconsole.log('undefined', typeof undefined); //undefinedconsole.log('對(duì)象', typeof pObj); //objectconsole.log('數(shù)組', typeof pArray); //objectconsole.log('函數(shù)', typeof fun); //function

如上執(zhí)行結(jié)果，對(duì)于原始類型（除了null以外），輸出結(jié)果沒問題。但是對(duì)于引用類型，輸出結(jié)果只會(huì)是object、function，這并非我們預(yù)期的結(jié)果。

typeof輸出的結(jié)果包含以下7種：number、boolean、string、symbol、undefined、object、function。

2.instanceof

這種方式只能判斷擁有原型的對(duì)象，并且只能判斷比較的兩個(gè)對(duì)象之間是否屬于實(shí)例關(guān)系（包括繼承），不能獲取類型。

console.log('對(duì)象', pObj instanceof Object); //trueconsole.log('數(shù)組是否數(shù)組', pArray instanceof Array); //trueconsole.log('數(shù)組是否對(duì)象', pArray instanceof Object); //trueconsole.log('函數(shù)是否函數(shù)', fun instanceof Function); //trueconsole.log('函數(shù)是否對(duì)象', fun instanceof Object); //true

需要注意，它會(huì)去原型鏈上去尋找匹配項(xiàng)，例如：pArray instanceof Object結(jié)果也是true。該方法用作判斷變量是否是某個(gè)類的實(shí)例非常有效。但是需要注意，這里的比對(duì)默認(rèn)都是在同一個(gè)全局環(huán)境下比對(duì)的。也就是說，在同一個(gè)frame下，我們才能得到正確結(jié)果。如果在frame1下去判斷一個(gè)變量是否屬于frame2的Object，只會(huì)得到false結(jié)果。

3.constructor或__proto__

console.log('construct');console.log('字符串', str.construct === String.construct); //true// console.log('數(shù)字', typeof pNum); //數(shù)字沒有constructconsole.log('布爾', bRt.construct === Boolean.construct); //true// console.log('符號(hào)', typeof pSymbol); //symbol沒有construct// console.log('null', typeof null); //null無法訪問construct屬性// console.log('undefined', typeof undefined); //undefined無法訪問construct屬性console.log('對(duì)象', pObj.construct === Object.construct); //trueconsole.log('數(shù)組', pArray.construct === Array.construct); //trueconsole.log('函數(shù)', fun.construct === Function.construct); //trueconsole.log('__proto__');console.log('字符串', str.__proto__ === String.prototype); //true// console.log('數(shù)字', typeof pNum); //數(shù)字沒有prototypeconsole.log('布爾', bRt.__proto__ === Boolean.prototype); //true// console.log('符號(hào)', typeof pSymbol); //symbol沒有prototype// console.log('null', typeof null); //null無法訪問prototype屬性// console.log('undefined', typeof undefined); //undefined無法訪問prototype屬性console.log('對(duì)象', pObj.__proto__ === Object.prototype); //trueconsole.log('數(shù)組', pArray.__proto__ === Array.prototype); //trueconsole.log('函數(shù)', fun.__proto__ === Function.prototype); //true

原理同2，只是不會(huì)再去原型鏈上查找了，這里固定只對(duì)比當(dāng)前對(duì)象的實(shí)例。

4.toString

console.log('字符串', Object.prototype.toString.call(str)); //[object String]console.log('數(shù)字', Object.prototype.toString.call(pNum)); //[object Number]console.log('布爾', Object.prototype.toString.call(bRt)); //[object Boolean]console.log('符號(hào)', Object.prototype.toString.call(pSymbol)); //[object Symbol]console.log('null', Object.prototype.toString.call(null)); //[object Null]console.log('undefined', Object.prototype.toString.call(undefined)); //[object Undefined]console.log('對(duì)象', Object.prototype.toString.call(pObj)); //[object Object]console.log('數(shù)組', Object.prototype.toString.call(pArray)); //[object Array]console.log('函數(shù)', Object.prototype.toString.call(fun)); //[object Function]console.log('日期', Object.prototype.toString.call(new Date())); //[object Date]console.log('window', Object.prototype.toString.call(window)); //[object HTMLDocument]console.log('document', Object.prototype.toString.call(document)); //[object global]

Object中定義的toString方法，返回的是當(dāng)前對(duì)象的內(nèi)部屬性[[Class]]，結(jié)果格式為[object Xxx]，其中Xxx就是我們判斷數(shù)據(jù)類型的依據(jù)，也是內(nèi)置對(duì)象的字符串。

看一下優(yōu)秀的框架是怎么做的

JQuery

function toType( obj ) {if ( obj == null ) {return obj + "";}// Support: Android <=2.3 only (functionish RegExp)return typeof obj === "object" || typeof obj === "function" ?class2type[ toString.call( obj ) ] || "object" :typeof obj; }

原始類型使用typeof，引用類型使用toString。

AngularJs

function isNumber(value) {return typeof value === 'number';} function isDate(value) {return toString.call(value) === '[object Date]'; }

也是一樣，原始類型使用typeof，引用類型使用toString。

這里其實(shí)toString能夠完成typeof的所有任務(wù)，不知為何以上兩個(gè)框架會(huì)混用。私自猜測可能是因?yàn)閠ypeof使用起來更為簡潔一點(diǎn)，所以會(huì)優(yōu)先使用typeof。

---

總結(jié)

①boolen、number、string、symbol、function可通過typeof或toString方式判斷。

②null、undefined直接通過 ===運(yùn)算符判斷。

③js內(nèi)置對(duì)象，如：Object、Function、Date、Regex等通過toString方式判斷。

④自定義類和相應(yīng)繼承類，通過 instanceof判斷。

---

參考：

判斷JS數(shù)據(jù)類型的4種方法

JavaScript 數(shù)據(jù)類型和數(shù)據(jù)結(jié)構(gòu)

歡迎關(guān)注我的微信公眾號(hào)：

轉(zhuǎn)載于:https://my.oschina.net/lsjcoder/blog/1825533

總結(jié)

以上是生活随笔為你收集整理的前端基础（一）：js数据类型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。