JavaScript的數(shù)據(jù)類型及其檢測

一饥伊、JavaScript有幾種類型的值?

Javascript有兩種數(shù)據(jù)類型蔫饰,分別是基本數(shù)據(jù)類型和引用數(shù)據(jù)類型琅豆。其中基本數(shù)據(jù)類型包括Undefined、Null篓吁、Boolean茫因、Number、String越除、Symbol (ES6新增节腐,表示獨一無二的值)外盯,而引用數(shù)據(jù)類型統(tǒng)稱為Object對象,主要包括對象翼雀、數(shù)組和函數(shù)饱苟。接下來我們分別看下兩者的特點。

二狼渊、基本數(shù)據(jù)類型

1.值是不可變的

var name = 'java';
name.toUpperCase(); // 輸出 'JAVA'
console.log(name); // 輸出  'java'

由此可得箱熬,基本數(shù)據(jù)類型的值是不可改變的

2.存放在棧區(qū)

原始數(shù)據(jù)類型直接存儲在棧(stack)中的簡單數(shù)據(jù)段,占據(jù)空間小狈邑、大小固定城须,屬于被頻繁使用數(shù)據(jù),所以放入棧中存儲米苹。

3.值的比較

var a = 1;
var b = true;
console.log(a == b);    // true
console.log(a === b);   // false

== : 只進行值的比較,會進行數(shù)據(jù)類型的轉(zhuǎn)換糕伐。
=== : 不僅進行值得比較,還要進行數(shù)據(jù)類型的比較蘸嘶。

三良瞧、引用數(shù)據(jù)類型

1.值是可變的

var a={age:20};
a.age=21训唱;
console.log(a.age)//21

上面代碼說明引用類型可以擁有屬性和方法褥蚯,并且是可以動態(tài)改變的。

2.同時保存在棧內(nèi)存和堆內(nèi)存

引用數(shù)據(jù)類型存儲在堆(heap)中的對象,占據(jù)空間大况增、大小不固定,如果存儲在棧中赞庶,將會影響程序運行的性能;引用數(shù)據(jù)類型在棧中存儲了指針澳骤,該指針指向堆中該實體的起始地址歧强。當(dāng)解釋器尋找引用值時,會首先檢索其在棧中的地址宴凉,取得地址后從堆中獲得實體誊锭。

3.比較是引用的比較

當(dāng)從一個變量向另一個變量賦引用類型的值時,同樣也會將存儲在變量中的對象的值復(fù)制一份放到為新變量分配的空間中弥锄。

var a={age:20};
var b=a;
b.age=21;
console.log(a.age==b.age)//true

上面我們講到基本類型和引用類型存儲于內(nèi)存的位置不同丧靡,引用類型存儲在堆中的對象,與此同時籽暇,在棧中存儲了指針温治,而這個指針指向正是堆中實體的起始位置。變量a初始化時戒悠,a指針指向?qū)ο髙age:20}的地址熬荆,a賦值給b后,b又指向該對象{age:20}的地址,這兩個變量指向了同一個對象绸狐。因此卤恳,改變其中任何一個變量累盗,都會相互影響。


此時突琳,如果取消某一個變量對于原對象的引用若债,不會影響到另一個變量。

var a={age:20};
var b=a;
a = 1;
b // {age:20}

上面代碼中拆融,a和b指向同一個對象蠢琳,然后a的值變?yōu)?,這時不會對b產(chǎn)生影響镜豹,b還是指向原來的那個對象傲须。

四、檢驗數(shù)據(jù)類型

1.typeof

typeof返回一個表示數(shù)據(jù)類型的字符串趟脂,返回結(jié)果包括:number泰讽、boolean、string散怖、symbol菇绵、object肄渗、undefined镇眷、function等7種數(shù)據(jù)類型,但不能判斷null翎嫡、array等

typeof Symbol(); // symbol 有效
typeof ''; // string 有效
typeof 1; // number 有效
typeof true; //boolean 有效
typeof undefined; //undefined 有效
typeof new Function(); // function 有效
typeof null; //object 無效
typeof [] ; //object 無效
typeof new Date(); //object 無效
typeof new RegExp(); //object 無效

數(shù)組和對象返回的都是object欠动,這時就需要使用instanceof來判斷

2.instanceof

instanceof 是用來判斷A是否為B的實例,表達式為:A instanceof B惑申,如果A是B的實例具伍,則返回true,否則返回false。instanceof 運算符用來測試一個對象在其原型鏈中是否存在一個構(gòu)造函數(shù)的 prototype 屬性圈驼。

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true

關(guān)于數(shù)組的類型判斷人芽,還可以用ES6新增Array.isArray()

Array.isArray([]);   // true

instanceof 三大弊端

  • 對于基本數(shù)據(jù)類型來說,字面量方式創(chuàng)建出來的結(jié)果和實例方式創(chuàng)建的是有一定的區(qū)別的
console.log(1 instanceof Number)//false
console.log(new Number(1) instanceof Number)//true

從嚴(yán)格意義上來講绩脆,只有實例創(chuàng)建出來的結(jié)果才是標(biāo)準(zhǔn)的對象數(shù)據(jù)類型值萤厅,也是標(biāo)準(zhǔn)的Number這個類的一個實例;對于字面量方式創(chuàng)建出來的結(jié)果是基本的數(shù)據(jù)類型值靴迫,不是嚴(yán)謹(jǐn)?shù)膶嵗栉叮怯捎贘S的松散特點,導(dǎo)致了可以使用Number.prototype上提供的方法玉锌。

  • 只要在當(dāng)前實例的原型鏈上名挥,我們用其檢測出來的結(jié)果都是true。在類的原型繼承中主守,我們最后檢測出來的結(jié)果未必準(zhǔn)確禀倔。
var arr = [1, 2, 3];
console.log(arr instanceof Array) // true
console.log(arr instanceof Object);  // true
function fn(){}
console.log(fn instanceof Function)// true
console.log(fn instanceof Object)// true
  • 不能檢測null 和 undefined

對于特殊的數(shù)據(jù)類型null和undefined榄融,他們的所屬類是Null和Undefined,但是瀏覽器把這兩個類保護起來了救湖,不允許我們在外面訪問使用剃袍。

3.constructor

constructor作用和instanceof非常相似。但constructor檢測 Object與instanceof不一樣捎谨,還可以處理基本數(shù)據(jù)類型的檢測民效。

var aa=[1,2];
console.log(aa.constructor===Array);//true
console.log(aa.constructor===RegExp);//false
console.log((1).constructor===Number);//true
var reg=/^$/;
console.log(reg.constructor===RegExp);//true
console.log(reg.constructor===Object);//false 

constructor 兩大弊端

  • null 和 undefined 是無效的對象,因此是不會有 constructor 存在的涛救,這兩種類型的數(shù)據(jù)需要通過其他方式來判斷畏邢。

  • 函數(shù)的 constructor 是不穩(wěn)定的,這個主要體現(xiàn)在把類的原型進行重寫检吆,在重寫的過程中很有可能出現(xiàn)把之前的constructor給覆蓋了舒萎,這樣檢測出來的結(jié)果就是不準(zhǔn)確的

function Fn(){}
Fn.prototype = new Array()
var f = new Fn
console.log(f.constructor)//Array

4.Object.prototype.toString.call()

Object.prototype.toString.call() 最準(zhǔn)確最常用的方式。首先獲取Object原型上的toString方法蹭沛,讓方法執(zhí)行臂寝,讓toString方法中的this指向第一個參數(shù)的值。

關(guān)于toString重要補充說明

  • 本意是轉(zhuǎn)換為字符串摊灭,但是某些toString方法不僅僅是轉(zhuǎn)換為字符串
  • 對于Number咆贬、String,Boolean帚呼,Array掏缎,RegExp、Date煤杀、Function原型上的toString方法都是把當(dāng)前的數(shù)據(jù)類型轉(zhuǎn)換為字符串的類型(它們的作用僅僅是用來轉(zhuǎn)換為字符串的)
  • Object上的toString并不是用來轉(zhuǎn)換為字符串的眷蜈。

Object上的toString它的作用是返回當(dāng)前方法執(zhí)行的主體(方法中的this)所屬類的詳細信息即"[object Object]",其中第一個object代表當(dāng)前實例是對象數(shù)據(jù)類型的(這個是固定死的),第二個Object代表的是this所屬的類是Object沈自。

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window是全局對象global的引用

作者:浪里行舟
鏈接:JavaScript的數(shù)據(jù)類型及其檢測
來源:github
著作權(quán)歸作者所有酌儒。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處枯途。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末忌怎,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子柔袁,更是在濱河造成了極大的恐慌呆躲,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,324評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件捶索,死亡現(xiàn)場離奇詭異插掂,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,356評論 3 392
  • 文/潘曉璐 我一進店門辅甥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來酝润,“玉大人,你說我怎么就攤上這事璃弄∫” “怎么了?”我有些...
    開封第一講書人閱讀 162,328評論 0 353
  • 文/不壞的土叔 我叫張陵夏块,是天一觀的道長疏咐。 經(jīng)常有香客問我,道長脐供,這世上最難降的妖魔是什么浑塞? 我笑而不...
    開封第一講書人閱讀 58,147評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮政己,結(jié)果婚禮上酌壕,老公的妹妹穿的比我還像新娘。我一直安慰自己歇由,他們只是感情好卵牍,可當(dāng)我...
    茶點故事閱讀 67,160評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著沦泌,像睡著了一般糊昙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上赦肃,一...
    開封第一講書人閱讀 51,115評論 1 296
  • 那天溅蛉,我揣著相機與錄音,去河邊找鬼他宛。 笑死,一個胖子當(dāng)著我的面吹牛欠气,可吹牛的內(nèi)容都是我干的厅各。 我是一名探鬼主播,決...
    沈念sama閱讀 40,025評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼预柒,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起轰异,我...
    開封第一講書人閱讀 38,867評論 0 274
  • 序言:老撾萬榮一對情侶失蹤仆邓,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后淋袖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鸿市,經(jīng)...
    沈念sama閱讀 45,307評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,528評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了焰情。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陌凳。...
    茶點故事閱讀 39,688評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖内舟,靈堂內(nèi)的尸體忽然破棺而出合敦,到底是詐尸還是另有隱情,我是刑警寧澤验游,帶...
    沈念sama閱讀 35,409評論 5 343
  • 正文 年R本政府宣布充岛,位于F島的核電站,受9級特大地震影響耕蝉,放射性物質(zhì)發(fā)生泄漏裸准。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,001評論 3 325
  • 文/蒙蒙 一赔硫、第九天 我趴在偏房一處隱蔽的房頂上張望炒俱。 院中可真熱鬧,春花似錦爪膊、人聲如沸权悟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,657評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽峦阁。三九已至,卻和暖如春耘成,著一層夾襖步出監(jiān)牢的瞬間榔昔,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,811評論 1 268
  • 我被黑心中介騙來泰國打工瘪菌, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留撒会,地道東北人。 一個月前我還...
    沈念sama閱讀 47,685評論 2 368
  • 正文 我出身青樓师妙,卻偏偏與公主長得像诵肛,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子默穴,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,573評論 2 353

推薦閱讀更多精彩內(nèi)容