1. 程式人生 > >JavaScript 的數據類型及其檢測

JavaScript 的數據類型及其檢測

str 轉換 == ldoc prot 堆內存 script instance ins

技術分享圖片

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.嚴格運算符===

只能用於判斷 null 和 undefined,因為這兩種類型的值都是唯一的。

var a = null
typeof a // "object"
a === null // true

undefined 還可以用 typeof 來判斷

var b = undefined;
typeof b === "undefined" // true
b === undefined // true

4.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

5.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 的數據類型及其檢測