2019獨角獸企業重金招聘Python工程師標準>>>

字數：1871

閱讀時間：5分鐘

引自MDN：

最新的 ECMAScript 標準定義了 7 種數據類型:

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

至今，JS中共上述7種數據類型。這里需要注意，不要將js的內置對象：Date、Array等與數據類型混淆了，這些內置對象和我們自己創建的對象統一屬于Object類型。

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

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

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

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

Symbol類型：表示符號類型，ES6新增的數據類型，表示一個唯一值，一般作為對象的key值或者枚舉之用，非常適合消除魔法字符串。

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

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

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

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

Object類型：表示對象。在計算機科學中, 對象是指內存中的可以被標識符引用的一塊區域。在JS中，對象可以被看做是一組屬性的集合。JS中以Object和Function兩個對象為基礎，衍生出了現在百花齊放的各種對象，JS的繼承、原型等都在這個基礎上實現的。

---

類型判斷

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

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('數字', typeof pNum); //numberconsole.log('布爾', typeof bRt); //booleanconsole.log('符號', typeof pSymbol); //symbolconsole.log('null', typeof null); //objectconsole.log('undefined', typeof undefined); //undefinedconsole.log('對象', typeof pObj); //objectconsole.log('數組', typeof pArray); //objectconsole.log('函數', typeof fun); //function

如上執行結果，對于原始類型（除了null以外），輸出結果沒問題。但是對于引用類型，輸出結果只會是object、function，這并非我們預期的結果。

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

2.instanceof

這種方式只能判斷擁有原型的對象，并且只能判斷比較的兩個對象之間是否屬于實例關系（包括繼承），不能獲取類型。

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

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

3.constructor或__proto__

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

原理同2，只是不會再去原型鏈上查找了，這里固定只對比當前對象的實例。

4.toString

console.log('字符串', Object.prototype.toString.call(str)); //[object String]console.log('數字', Object.prototype.toString.call(pNum)); //[object Number]console.log('布爾', Object.prototype.toString.call(bRt)); //[object Boolean]console.log('符號', 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('對象', Object.prototype.toString.call(pObj)); //[object Object]console.log('數組', Object.prototype.toString.call(pArray)); //[object Array]console.log('函數', 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方法，返回的是當前對象的內部屬性[[Class]]，結果格式為[object Xxx]，其中Xxx就是我們判斷數據類型的依據，也是內置對象的字符串。

看一下優秀的框架是怎么做的

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。

這里其實toString能夠完成typeof的所有任務，不知為何以上兩個框架會混用。私自猜測可能是因為typeof使用起來更為簡潔一點，所以會優先使用typeof。

---

總結

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

②null、undefined直接通過 ===運算符判斷。

③js內置對象，如：Object、Function、Date、Regex等通過toString方式判斷。

④自定義類和相應繼承類，通過 instanceof判斷。

---

參考：

判斷JS數據類型的4種方法

JavaScript 數據類型和數據結構

歡迎關注我的微信公眾號：

轉載于:https://my.oschina.net/lsjcoder/blog/1825533

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。