一、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);//truevar?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的引用

最后

“相信有很多想學前端的小伙伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端干貨，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小伙伴，53763，

1707這里是小白聚集地，歡迎初學和進階中的小伙伴。”