今天來聊聊 JavaScript 的類型夸研。
JavaScript 的七大基本類型
- undefined 未定義
- null 空值
- boolean 布爾值
- string 字符串
- number 數(shù)字
- object 對象
- symbol 符號（ES6）
怎么知道是有這么七個值呢，使用 typeof 運(yùn)算符來查看治力。
上圖中眶熬，大多數(shù)都如我們想的那樣妹笆，但是有兩個特例：
- 可以看到
typeof null理論上應(yīng)該返回'null'但卻返回的是'object'块请，這是一個存在20多年由來已久的bug，所以要判斷對象是否為 null 時需要注意拳缠。 - 當(dāng)我們打印
typeof function() {}的時候返回的類型是'function'负乡，是不是說明 function 也是基本類型呢？但其實(shí) function 是 object 的子集脊凰，下面說引用類型的時候會提到抖棘。
null、undefined 和 undeclared
在 JavaScript 的類型中有三種表示變量“不存在”的方式狸涌，null切省、undefined 和 undeclared。那么它們的區(qū)別是什么呢帕胆？看代碼~
- 我們定義了變量 a 卻沒有給他賦值朝捆，所以 a 就是 undefined
- 我們沒有定義變量 b，所以報(bào)錯 b is not defined懒豹，我們稱之為 undeclared芙盘。注意這和 undefined 是有區(qū)別的。
- 我們定義了變量 c 并給他賦值 null脸秽，所以 b 就是 null
小結(jié)下：undefined 是定義了變量卻沒有賦值儒老；undeclared 是沒有定義變量更沒有賦值，會報(bào)錯记餐；null 是定義了變量并且賦值空值 null驮樊。
JavaScript 中的那些引用類型
所有的引用類型都是 Object。我猜測由于在 JavaScript 中對于 Object 的訪問是引用形式的片酝，所以稱之為引用類型囚衔。
Object
Object 是一個函數(shù)，它可以用于創(chuàng)建對象雕沿，也可以用它帶的 API 方法操作對象练湿。
// 創(chuàng)建對象
var obj = new Object(); // 不推薦
var obj2 = {}
// Object API
var obj3 = Object.create(null)
var object2 = Object.freeze(object1);
為什么可以使用這些 API？因?yàn)樵?Object 函數(shù)的原型（關(guān)于原型可以看之前的文章）中有定義這些 API 方法审轮。
其他更多的 Object API 可以查閱 Object - JavaScript | MDN肥哎。
Array
同樣的，Array 函數(shù)用于創(chuàng)建數(shù)組和提供操作數(shù)組的 API断国。
// create array
var arr1 = []
var arr2 = new Array()
var arr3 = Array()
// api
Array.isArray(arr1);
arr1.push(1)
同樣的贤姆，推薦查閱 Array - JavaScript | MDN 獲取更多 API 信息。
Date
Data 用于創(chuàng)建時間對象稳衬。
var now = new Date()
Date 函數(shù)通過傳遞不同的參數(shù)在生產(chǎn)不同的時間對象，參考 Date - JavaScript | MDN坐漏。
注：在 ES6 中可以通過靜態(tài)方法 Date.now() 來獲取當(dāng)前時間薄疚。
RegExp
RegExp 構(gòu)造函數(shù)創(chuàng)建了一個正則表達(dá)式對象碧信，用于將文本與一個模式匹配。
var regex1 = /\w+/;
var regex2 = new RegExp('\\w+'); // 不推薦
Function
Function 構(gòu)造函數(shù) 創(chuàng)建一個新的Function對象街夭。 在 JavaScript 中, 每個函數(shù)實(shí)際上都是一個 Function 對象砰碴。
var e = new Function( "a", "return a * 2;" ); // 不推薦
var f = function(a) { return a * 2; }
function g(a) { return a * 2; }
包裝器對象（Boolean、String 和 Number）
Boolean板丽、String 和 Number 分別是基本類型 boolean呈枉、string 和 number 的包裝器對象，有很多共性埃碱，所以就拿來一起講了猖辫。
創(chuàng)建值
var bool = true
var bool2 = Boolean(true) // 不推薦
var str = 'hello world'
var str2 = String('hello world') // 不推薦
var num = 100
var num2 = Number(100) // 不推薦
可以看到，第二種創(chuàng)建方式非常的畫蛇添足砚殿，但是這種寫法可以有別的用處啃憎。
自動包裝
上面我們定義了三個不同基本類型的變量，這幾個變量后面可以加一些方法來進(jìn)行操作似炎。
bool.toString();
str.split(' ')
num..toFixed(2)
為什么明明基本類型沒有這些屬性和方法卻可以使用呢辛萍？
這就要提到這三個基本類型的自動包裝特性了。即雖然這三個基本類型沒有屬性羡藐，但是當(dāng)我們調(diào)用其屬性和函數(shù)時贩毕，會自動包裝成相應(yīng)的對象。
new Boolean(bool).toString()
new String(str).split(' ')
new Number(num).toFixed(2)
可以看下 String 的原型中的確包含了 string 類型用到的所有的屬性和方法仆嗦。
強(qiáng)制類型轉(zhuǎn)換
對象包裝器另外一個作用 —— 強(qiáng)制類型轉(zhuǎn)換：
Boolean(''); // false
Boolean(1); // true
String(null); // 'null'
String(12138); // '12138'
Number("123") // 123
Number("") // 0
直接使用包裝器函數(shù)就可以對值進(jìn)行強(qiáng)制類型轉(zhuǎn)換行為耳幢。
Global
Global 表示全局對象，具體的內(nèi)容暫時沒有找到欧啤，先貼一段網(wǎng)上的解釋：
《JavaScript高級程序設(shè)計(jì)》中談到睛藻，global對象可以說是ECMAScript中最特別的一個對象了，因?yàn)椴还苣銖氖裁唇嵌壬峡葱纤恚@個對象都是不存在的店印。從某種意義上講，它是一個終極的“兜底兒對象”倒慧，換句話說呢按摘，就是不屬于任何其他對象的屬性和方法，最終都是它的屬性和方法纫谅。我理解為炫贤，這個global對象呢，就是整個JS的“老祖宗”付秕，找不到歸屬的那些“子子孫孫”都可以到它這里來認(rèn)祖歸宗兰珍。所有在全局作用域中定義的屬性和函數(shù)，都是global對象的屬性和方法询吴，比如isNaN()掠河、parseInt()以及parseFloat()等亮元，實(shí)際都是它的方法；還有就是常見的一些特殊值唠摹，如：NaN爆捞、undefined等都是它的屬性，以及一些構(gòu)造函數(shù)Object勾拉、Array等也都是它的方法煮甥。總之藕赞，記住一點(diǎn)：global對象就是“老祖宗”成肘，所有找不到歸屬的就都是它的。
Math
Math 是一個內(nèi)置對象找默， 它具有數(shù)學(xué)常數(shù)和函數(shù)的屬性和方法艇劫。不是一個函數(shù)對象。舉幾個栗子：
Math.abs(-1); // 取絕對值 1
Math.max(10, 20); // 取最大值 20
Math.random(); // 取隨機(jī)數(shù)
Symbol
Symbol 函數(shù)是 ES6 添加的惩激，用于表示有唯一性的特殊值店煞。創(chuàng)建方法如下：
var a = Symbol('this is a symbol')
Error
Error 函數(shù)用于創(chuàng)建錯誤對象。
var err1 = new Error('I was created using a function call!')
var err2 = Error('I was created using a function call!')
2019/2/16 更新
在學(xué)習(xí)極客時間的《重學(xué)前端》專欄時风钻，發(fā)現(xiàn)了更加系統(tǒng)的 JavaScript 類型整理顷蟀，我覺得非常贊。
在 全局對象 | MDN 中很全面的羅列了所有 JavaScript 中的內(nèi)置對象骡技，想深入了解內(nèi)置對象的可以了解下~
最后
本文先是介紹了七大基本類型鸣个，之后有簡單介紹了 JavaScript 中的引用類型。主要想達(dá)到歸納整理的作用布朦，讓大家知道都有哪些類型柴灯，而具體使用中則強(qiáng)烈推薦查閱 MDN 來使用各種方法和屬性析命。
希望本文對你有所幫助~明天聊聊我最近從 Vue 轉(zhuǎn) React 項(xiàng)目的一些體會，明天見！
