目錄
- 一、JavaScript有幾種型別的值?
- 二、基本資料型別
- 1.值是不可變的
- 2.存放在堆疊區
- 3.值的比較
- 三、參考資料型別
- 1.值是可變的
- 2.同時保存在堆疊記憶體和堆記憶體
- 3.比較是參考的比較
- 四、檢驗資料型別
- 1.typeof
- 2.instanceof
- 3.constructor
- 4.Object.prototype.toString.call()
一、JavaScript有幾種型別的值?
Javascript有兩種資料型別,分別是基本資料型別和參考資料型別,其中基本資料型別包括Undefined、Null、Boolean、Number、String、Symbol (ES6新增,表示獨一無二的值),而參考資料型別統稱為Object物件,主要包括物件、陣列和函式,接下來我們分別看下兩者的特點,
二、基本資料型別
1.值是不可變的
var name = 'java';
name.toUpperCase(); // 輸出 'JAVA'
console.log(name); // 輸出 'java'
由此可得,基本資料型別的值是不可改變的
2.存放在堆疊區
原始資料型別直接存盤在堆疊(stack)中的簡單資料段,占據空間小、大小固定,屬于被頻繁使用資料,所以放入堆疊中存盤,
3.值的比較
var a = 1;
var b = true;
console.log(a == b); // true
console.log(a === b); // false
== : 只進行值的比較,會進行資料型別的轉換,
=== : 不僅進行值得比較,還要進行資料型別的比較,
三、參考資料型別
1.值是可變的
var a={age:20};
a.age=21;
console.log(a.age)//21
上面代碼說明參考型別可以擁有屬性和方法,并且是可以動態改變的,
2.同時保存在堆疊記憶體和堆記憶體
參考資料型別存盤在堆(heap)中的物件,占據空間大、大小不固定,如果存盤在堆疊中,將會影響程式運行的性能;參考資料型別在堆疊中存盤了指標,該指標指向堆中該物體的起始地址,當解釋器尋找參考值時,會首先檢索其在堆疊中的地址,取得地址后從堆中獲得物體,

3.比較是參考的比較
當從一個變數向另一個變數賦參考型別的值時,同樣也會將存盤在變數中的物件的值復制一份放到為新變數分配的空間中,
var a={age:20};
var b=a;
b.age=21;
console.log(a.age==b.age)//true
上面我們講到基本型別和參考型別存盤于記憶體的位置不同,參考型別存盤在堆中的物件,與此同時,在堆疊中存盤了指標,而這個指標指向正是堆中物體的起始位置,變數a初始化時,a指標指向物件{age:20}的地址,a賦值給b后,b又指向該物件{age:20}的地址,這兩個變數指向了同一個物件,因此,改變其中任何一個變數,都會相互影響,

此時,如果取消某一個變數對于原物件的參考,不會影響到另一個變數,
var a={age:20};
var b=a;
a = 1;
b // {age:20}
上面代碼中,a和b指向同一個物件,然后a的值變為1,這時不會對b產生影響,b還是指向原來的那個物件,
四、檢驗資料型別
1.typeof
typeof回傳一個表示資料型別的字串,回傳結果包括:number、boolean、string、symbol、object、undefined、function等7種資料型別,但不能判斷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 無效
陣列和物件回傳的都是object,這時就需要使用instanceof來判斷
2.instanceof
instanceof 是用來判斷A是否為B的實體,運算式為:A instanceof B,如果A是B的實體,則回傳true,否則回傳false,instanceof 運算子用來測驗一個物件在其原型鏈中是否存在一個建構式的 prototype 屬性,
[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true
關于陣列的型別判斷,還可以用ES6新增Array.isArray()
Array.isArray([]); // true
instanceof 三大弊端:
- 對于基本資料型別來說,字面量方式創建出來的結果和實體方式創建的是有一定的區別的
console.log(1 instanceof Number)//false
console.log(new Number(1) instanceof Number)//true
從嚴格意義上來講,只有實體創建出來的結果才是標準的物件資料型別值,也是標準的Number這個類的一個實體;對于字面量方式創建出來的結果是基本的資料型別值,不是嚴謹的實體,但是由于JS的松散特點,導致了可以使用Number.prototype上提供的方法,
- 只要在當前實體的原型鏈上,我們用其檢測出來的結果都是true,在類的原型繼承中,我們最后檢測出來的結果未必準確,
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
對于特殊的資料型別null和undefined,他們的所屬類是Null和Undefined,但是瀏覽器把這兩個類保護起來了,不允許我們在外面訪問使用,

3.constructor
constructor作用和instanceof非常相似,但constructor檢測 Object與instanceof不一樣,還可以處理基本資料型別的檢測,
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 存在的,這兩種型別的資料需要通過其他方式來判斷,
-
函式的 constructor 是不穩定的,這個主要體現在把類的原型進行重寫,在重寫的程序中很有可能出現把之前的constructor給覆寫了,這樣檢測出來的結果就是不準確的
function Fn(){}
Fn.prototype = new Array()
var f = new Fn
console.log(f.constructor)//Array
4.Object.prototype.toString.call()
Object.prototype.toString.call() 最準確最常用的方式,首先獲取Object原型上的toString方法,讓方法執行,讓toString方法中的this指向第一個引數的值,
關于toString重要補充說明:
- 本意是轉換為字串,但是某些toString方法不僅僅是轉換為字串
- 對于Number、String,Boolean,Array,RegExp、Date、Function原型上的toString方法都是把當前的資料型別轉換為字串的型別(它們的作用僅僅是用來轉換為字串的)
- Object上的toString并不是用來轉換為字串的,
Object上的toString它的作用是回傳當前方法執行的主體(方法中的this)所屬類的詳細資訊即"[object Object]",其中第一個object代表當前實體是物件資料型別的(這個是固定死的),第二個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的資料型別及其檢測
來源:github
著作權歸作者所有,商業轉載請聯系作者獲得授權,非商業轉載請注明出處,
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/253899.html
標籤:JavaScript
下一篇:3D餅/環Echarts圖的實作
