前言
之前面試了幾個開發(fā)者，他們確實做過不少項目舔痪，能力也是不錯的寓调，但是發(fā)現(xiàn)js基礎(chǔ)不扎實, 于是決定寫一下這篇javascrip數(shù)據(jù)類型相關(guān)的基礎(chǔ)文章，其實也不僅僅是因為面試了他們锄码，之前自己在面試的時候夺英，也曾經(jīng)被虐過，面試官說過的最深刻的一句話我到現(xiàn)在都記得滋捶。
基礎(chǔ)很重要痛悯，只有基礎(chǔ)好才會很少出
bug，大多數(shù)的bug都是基礎(chǔ)不扎實造成的重窟。
這里給出兩道我們公司數(shù)據(jù)類型基礎(chǔ)相關(guān)的面試題和答案载萌，如果都能做對并且知道為什么（可以選擇忽略本文章）：
//類型轉(zhuǎn)換相關(guān)問題
var bar=true;
console.log(bar+0);
console.log(bar+"xyz");
console.log(bar+true);
console.log(bar+false);
console.log('1'>bar);
console.log(1+'2'+false);
console.log('2' + ['koala',1]);
var obj1 = {
a:1,
b:2
}
console.log('2'+obj1)；
var obj2 = {
toString:function(){
return 'a'
}
}
console.log('2'+obj2)
//輸出結(jié)果 1 truexyz 2 1 false 12false 2koala,1 2[object Object] 2a
//作用域和NaN 這里不具體講作用域巡扇，意在說明NaN
var b=1;
function outer(){
var b=2;
function inner(){
b++;
console.log(b);
var b=3;
}
inner();
}
outer();
//輸出結(jié)果 NaN
本篇文章會以一個面試官問問題的角度來進行分析講解
js中的數(shù)據(jù)類型
面試官：說一說
javascript中有哪些數(shù)據(jù)類型?
JavaScript 中共有七種內(nèi)置數(shù)據(jù)類型扭仁，包括基本類型和對象類型。
基本類型
基本類型分為以下六種：
- string（字符串）
- boolean（布爾值）
- number（數(shù)字）
- symbol（符號）
- null（空值）
- undefined（未定義）
注意：
-
string厅翔、number乖坠、boolean和nullundefined這五種類型統(tǒng)稱為原始類型（Primitive），表示不能再細(xì)分下去的基本類型; -
symbol是ES6中新增的數(shù)據(jù)類型刀闷，symbol表示獨一無二的值熊泵，通過Symbol函數(shù)調(diào)用生成，由于生成的 symbol 值為原始類型甸昏，所以Symbol函數(shù)不能使用new調(diào)用戈次； -
null和undefined通常被認(rèn)為是特殊值，這兩種類型的值唯一筒扒，就是其本身怯邪。
對象類型
對象類型也叫引用類型，array和function是對象的子類型花墩。對象在邏輯上是屬性的無序集合悬秉，是存放各種值的容器澄步。對象值存儲的是引用地址，所以和基本類型值不可變的特性不同和泌，對象值是可變的村缸。
js弱類型語言
面試官：說說你對
javascript是弱類型語言的理解?
JavaScript 是弱類型語言，而且JavaScript 聲明變量的時候并沒有預(yù)先確定的類型武氓，變量的類型就是其值的類型梯皿，也就是說變量當(dāng)前的類型由其值所決定,夸張點說上一秒種的String，下一秒可能就是個Number類型了县恕，這個過程可能就進行了某些操作發(fā)生了強制類型轉(zhuǎn)換东羹。雖然弱類型的這種不需要預(yù)先確定類型的特性給我們帶來了便利，同時也會給我們帶來困擾忠烛，為了能充分利用該特性就必須掌握類型轉(zhuǎn)換的原理属提。
js中的強制轉(zhuǎn)換規(guī)則
面試官：
javascript中強制類型轉(zhuǎn)換是一個非常易出現(xiàn)bug的點，知道強制轉(zhuǎn)換時候的規(guī)則嗎美尸？
注：規(guī)則最好配合下面什么時候發(fā)生轉(zhuǎn)換使用這些規(guī)則看效果更佳冤议。
ToPrimitive(轉(zhuǎn)換為原始值)
ToPrimitive對原始類型不發(fā)生轉(zhuǎn)換處理，只針對引用類型（object）的师坎，其目的是將引用類型（object）轉(zhuǎn)換為非對象類型恕酸，也就是原始類型。
ToPrimitive 運算符接受一個值胯陋，和一個可選的期望類型作參數(shù)尸疆。ToPrimitive 運算符將值轉(zhuǎn)換為非對象類型，如果對象有能力被轉(zhuǎn)換為不止一種原語類型惶岭，可以使用可選的 期望類型 來暗示那個類型。
轉(zhuǎn)換后的結(jié)果原始類型是由期望類型決定的犯眠，期望類型其實就是我們傳遞的type按灶。直接看下面比較清楚。
ToPrimitive方法大概長這么個樣子具體如下筐咧。
/**
* @obj 需要轉(zhuǎn)換的對象
* @type 期望轉(zhuǎn)換為的原始數(shù)據(jù)類型鸯旁，可選
*/
ToPrimitive(obj,type)
type不同值的說明
- type為
string:
- 先調(diào)用
obj的toString方法，如果為原始值量蕊，則return铺罢，否則進行第2步 - 調(diào)用
obj的valueOf方法，如果為原始值残炮，則return韭赘，否則進行第3步 - 拋出
TypeError異常
- type為
number:
- 先調(diào)用
obj的valueOf方法，如果為原始值势就，則return泉瞻，否則進行第2步 - 調(diào)用
obj的toString方法脉漏，如果為原始值，則return袖牙，否則第3步 - 拋出
TypeError異常
- type參數(shù)為空
- 該對象為
Date侧巨，則type被設(shè)置為String - 否則，type被設(shè)置為
Number
Date數(shù)據(jù)類型特殊說明：
對于Date數(shù)據(jù)類型鞭达，我們更多期望獲得的是其轉(zhuǎn)為時間后的字符串司忱，而非毫秒值（時間戳），如果為number畴蹭，則會取到對應(yīng)的毫秒值坦仍，顯然字符串使用更多。
其他類型對象按照取值的類型操作即可撮胧。
ToPrimitive總結(jié)
ToPrimitive轉(zhuǎn)成何種原始類型桨踪，取決于type，type參數(shù)可選芹啥，若指定锻离，則按照指定類型轉(zhuǎn)換，若不指定墓怀，默認(rèn)根據(jù)實用情況分兩種情況汽纠，Date為string，其余對象為number傀履。那么什么時候會指定type類型呢虱朵，那就要看下面兩種轉(zhuǎn)換方式了。
toString
Object.prototype.toString()
toString()方法返回一個表示該對象的字符串钓账。
每個對象都有一個 toString() 方法碴犬，當(dāng)對象被表示為文本值時或者當(dāng)以期望字符串的方式引用對象時，該方法被自動調(diào)用梆暮。
這里先記住服协，valueOf() 和 toString()在特定的場合下會自行調(diào)用。
valueOf
Object.prototype.valueOf()方法返回指定對象的原始值啦粹。
JavaScript 調(diào)用 valueOf() 方法用來把對象轉(zhuǎn)換成原始類型的值（數(shù)值偿荷、字符串和布爾值）。但是我們很少需要自己調(diào)用此函數(shù)唠椭，valueOf 方法一般都會被 JavaScript 自動調(diào)用跳纳。
不同內(nèi)置對象的valueOf實現(xiàn)：
- String => 返回字符串值
- Number => 返回數(shù)字值
- Date => 返回一個數(shù)字，即時間值,字符串中內(nèi)容是依賴于具體實現(xiàn)的
- Boolean => 返回Boolean的this值
- Object => 返回this
對照代碼會更清晰一些：
var str = new String('123');
console.log(str.valueOf());//123
var num = new Number(123);
console.log(num.valueOf());//123
var date = new Date();
console.log(date.valueOf()); //1526990889729
var bool = new Boolean('123');
console.log(bool.valueOf());//true
var obj = new Object({valueOf:()=>{
return 1
}})
console.log(obj.valueOf());//1
Number
Number運算符轉(zhuǎn)換規(guī)則：
-
null轉(zhuǎn)換為 0 -
undefined轉(zhuǎn)換為NaN -
true轉(zhuǎn)換為 1贪嫂，false轉(zhuǎn)換為 0 - 字符串轉(zhuǎn)換時遵循數(shù)字常量規(guī)則寺庄，轉(zhuǎn)換失敗返回
NaN
注意：對象這里要先轉(zhuǎn)換為原始值，調(diào)用
ToPrimitive轉(zhuǎn)換，type指定為number了铣揉，繼續(xù)回到ToPrimitive進行轉(zhuǎn)換饶深。
String
String 運算符轉(zhuǎn)換規(guī)則
-
null轉(zhuǎn)換為'null' -
undefined轉(zhuǎn)換為undefined -
true轉(zhuǎn)換為'true'，false轉(zhuǎn)換為'false' - 數(shù)字轉(zhuǎn)換遵循通用規(guī)則逛拱，極大極小的數(shù)字使用指數(shù)形式
注意：對象這里要先轉(zhuǎn)換為原始值敌厘，調(diào)用
ToPrimitive轉(zhuǎn)換，type就指定為string了朽合，繼續(xù)回到ToPrimitive進行轉(zhuǎn)換(上面有將到ToPrimitive的轉(zhuǎn)換規(guī)則)俱两。
String(null) // 'null'
String(undefined) // 'undefined'
String(true) // 'true'
String(1) // '1'
String(-1) // '-1'
String(0) // '0'
String(-0) // '0'
String(Math.pow(1000,10)) // '1e+30'
String(Infinity) // 'Infinity'
String(-Infinity) // '-Infinity'
String({}) // '[object Object]'
String([1,[2,3]]) // '1,2,3'
String(['koala',1]) //koala,1
Boolean
ToBoolean 運算符轉(zhuǎn)換規(guī)則
除了下述 6 個值轉(zhuǎn)換結(jié)果為 false，其他全部為true：
- undefined
- null
- -0
- 0或+0
- NaN
- ''（空字符串）
假值以外的值都是真值曹步。其中包括所有對象（包括空對象）的轉(zhuǎn)換結(jié)果都是true宪彩，甚至連false對應(yīng)的布爾對象new Boolean(false)也是true
Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false
Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true
js轉(zhuǎn)換規(guī)則不同場景應(yīng)用
面試官問：知道了具體轉(zhuǎn)換成什么的規(guī)則，但是都在什么情況下發(fā)生什么樣的轉(zhuǎn)換呢讲婚？
什么時候自動轉(zhuǎn)換為string類型
-
在沒有對象的前提下
字符串的自動轉(zhuǎn)換尿孔，主要發(fā)生在字符串的加法運算時。當(dāng)一個值為字符串筹麸，另一個值為非字符串活合，則后者轉(zhuǎn)為字符串。
'2' + 1 // '21'
'2' + true // "2true"
'2' + false // "2false"
'2' + undefined // "2undefined"
'2' + null // "2null"
- 當(dāng)有對象且與對象
+時候
//toString的對象
var obj2 = {
toString:function(){
return 'a'
}
}
console.log('2'+obj2)
//輸出結(jié)果2a
//常規(guī)對象
var obj1 = {
a:1,
b:2
}
console.log('2'+obj1)物赶；
//輸出結(jié)果 2[object Object]
//幾種特殊對象
'2' + {} // "2[object Object]"
'2' + [] // "2"
'2' + function (){} // "2function (){}"
'2' + ['koala',1] // 2koala,1
對下面'2'+obj2詳細(xì)舉例說明如下：
- 左邊為
string白指，ToPrimitive原始值轉(zhuǎn)換后不發(fā)生變化 - 右邊轉(zhuǎn)化時同樣按照
ToPrimitive進行原始值轉(zhuǎn)換，由于指定的type是number酵紫，進行ToPrimitive轉(zhuǎn)化調(diào)用obj2.valueof(),得到的不是原始值告嘲，進行第三步 - 調(diào)用
toString()return 'a' - 符號兩邊存在
string，而且是+號運算符則都采用String規(guī)則轉(zhuǎn)換為string類型進行拼接 - 輸出結(jié)果
2a
對下面'2'+obj1詳細(xì)舉例說明如下：
- 左邊為
string奖地，ToPrimitive轉(zhuǎn)換為原始值后不發(fā)生變化 - 右邊轉(zhuǎn)化時同樣按照
ToPrimitive進行原始值轉(zhuǎn)換橄唬，由于指定的type是number，進行ToPrimitive轉(zhuǎn)化調(diào)用obj2.valueof(),得到{ a: 1, b: 2 } - 調(diào)用
toString()return [object Object] - 符號兩邊存在
string参歹，而且是+號運算符則都采用String規(guī)則轉(zhuǎn)換為string類型進行拼接 - 輸出結(jié)果
2[object Object]
代碼中幾種特殊對象的轉(zhuǎn)換規(guī)則基本相同仰楚，就不一一說明，大家可以想一下流程泽示。
注意：不管是對象還不是對象，都有一個轉(zhuǎn)換為原始值的過程蜜氨，也就是ToPrimitive轉(zhuǎn)換械筛，只不過原始類型轉(zhuǎn)換后不發(fā)生變化，對象類型才會發(fā)生具體轉(zhuǎn)換飒炎。
string類型轉(zhuǎn)換開發(fā)過程中可能出錯的點：
var obj = {
width: '100'
};
obj.width + 20 // "10020"
預(yù)期輸出結(jié)果120 實際輸出結(jié)果10020
什么時候自動轉(zhuǎn)換為Number類型
-
有加法運算符隔箍，但是無
String類型的時候惠险，都會優(yōu)先轉(zhuǎn)換為Number類型例子：
true + 0 // 1 true + true // 2 true + false //1 除了加法運算符五慈，其他運算符都會把運算自動轉(zhuǎn)成數(shù)值导而。
例子：
'5' - '2' // 3
'5' * '2' // 10
true - 1 // 0
false - 1 // -1
'1' - 1 // 0
'5' * [] // 0
false / '5' // 0
'abc' - 1 // NaN
null + 1 // 1
undefined + 1 // NaN
//一元運算符（注意點）
+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0
注意：
null轉(zhuǎn)為數(shù)值時為0，而undefined轉(zhuǎn)為數(shù)值時為NaN洽沟。
判斷等號也放在Number里面特殊說明
== 抽象相等比較與+運算符不同，不再是String優(yōu)先，而是Number優(yōu)先哄孤。
下面列舉x == y的例子
- 如果
x,y均為number，直接比較
沒什么可解釋的了
1 == 2 //false
- 如果存在對象吹截，
ToPrimitive()type為number進行轉(zhuǎn)換瘦陈，再進行后面比較
var obj1 = {
valueOf:function(){
return '1'
}
}
1 == obj1 //true
//obj1轉(zhuǎn)為原始值，調(diào)用obj1.valueOf()
//返回原始值'1'
//'1'toNumber得到 1 然后比較 1 == 1
[] == ![] //true
//[]作為對象ToPrimitive得到 ''
//![]作為boolean轉(zhuǎn)換得到0
//'' == 0
//轉(zhuǎn)換為 0==0 //true
- 存在
boolean波俄，按照ToNumber將boolean轉(zhuǎn)換為1或者0晨逝，再進行后面比較
//boolean 先轉(zhuǎn)成number，按照上面的規(guī)則得到1
//3 == 1 false
//0 == 0 true
3 == true // false
'0' == false //true
4.如果x為string懦铺，y為number捉貌，x轉(zhuǎn)成number進行比較
//'0' toNumber()得到 0
//0 == 0 true
'0' == 0 //true
什么時候進行布爾轉(zhuǎn)換
- 布爾比較時
-
if(obj),while(obj)等判斷時或者 三元運算符只能夠包含布爾值
條件部分的每個值都相當(dāng)于false，使用否定運算符后冬念，就變成了true
if ( !undefined
&& !null
&& !0
&& !NaN
&& !''
) {
console.log('true');
} // true
//下面兩種情況也會轉(zhuǎn)成布爾類型
expression ? true : false
!! expression
js中的數(shù)據(jù)類型判斷
面試官問：如何判斷數(shù)據(jù)類型趁窃？怎么判斷一個值到底是數(shù)組類型還是對象?
三種方式，分別為 typeof刘急、instanceof 和Object.prototype.toString()
typeof
通過 typeof操作符來判斷一個值屬于哪種基本類型棚菊。
typeof 'seymoe' // 'string'
typeof true // 'boolean'
typeof 10 // 'number'
typeof Symbol() // 'symbol'
typeof null // 'object' 無法判定是否為 null
typeof undefined // 'undefined'
typeof {} // 'object'
typeof [] // 'object'
typeof(() => {}) // 'function'
上面代碼的輸出結(jié)果可以看出，
-
null的判定有誤差叔汁，得到的結(jié)果
如果使用 typeof统求，null得到的結(jié)果是object
- 操作符對對象類型及其子類型，例如函數(shù)（可調(diào)用對象）据块、數(shù)組（有序索引對象）等進行判定码邻，則除了函數(shù)都會得到
object的結(jié)果。
綜上可以看出typeOf對于判斷類型還有一些不足另假，在對象的子類型和null情況下像屋。
instanceof
通過 instanceof 操作符也可以對對象類型進行判定，其原理就是測試構(gòu)造函數(shù)的prototype 是否出現(xiàn)在被檢測對象的原型鏈上边篮。
[] instanceof Array // true
({}) instanceof Object // true
(()=>{}) instanceof Function // true
復(fù)制代碼注意：instanceof 也不是萬能的己莺。
舉個例子：
let arr = []
let obj = {}
arr instanceof Array // true
arr instanceof Object // true
obj instanceof Object // true
在這個例子中，arr 數(shù)組相當(dāng)于 new Array() 出的一個實例戈轿，所以 arr.__proto__ === Array.prototype凌受，又因為 Array屬于 Object 子類型，即Array.prototype.__proto__ === Object.prototype思杯，因此 Object 構(gòu)造函數(shù)在 arr 的原型鏈上胜蛉。所以 instanceof 仍然無法優(yōu)雅的判斷一個值到底屬于數(shù)組還是普通對象。
還有一點需要說明下，有些開發(fā)者會說 Object.prototype.__proto__ === null誊册，豈不是說 arr instanceof null 也應(yīng)該為 true领突，這個語句其實會報錯提示右側(cè)參數(shù)應(yīng)該為對象，這也印證 typeof null 的結(jié)果為 object 真的只是javascript中的一個bug 案怯。
Object.prototype.toString() 可以說是判定 JavaScript 中數(shù)據(jù)類型的終極解決方法了君旦，具體用法請看以下代碼：
Object.prototype.toString.call({}) // '[object Object]'
Object.prototype.toString.call([]) // '[object Array]'
Object.prototype.toString.call(() => {}) // '[object Function]'
Object.prototype.toString.call('seymoe') // '[object String]'
Object.prototype.toString.call(1) // '[object Number]'
Object.prototype.toString.call(true) // '[object Boolean]'
Object.prototype.toString.call(Symbol()) // '[object Symbol]'
Object.prototype.toString.call(null) // '[object Null]'
Object.prototype.toString.call(undefined) // '[object Undefined]'
Object.prototype.toString.call(new Date()) // '[object Date]'
Object.prototype.toString.call(Math) // '[object Math]'
Object.prototype.toString.call(new Set()) // '[object Set]'
Object.prototype.toString.call(new WeakSet()) // '[object WeakSet]'
Object.prototype.toString.call(new Map()) // '[object Map]'
Object.prototype.toString.call(new WeakMap()) // '[object WeakMap]'
我們可以發(fā)現(xiàn)該方法在傳入任何類型的值都能返回對應(yīng)準(zhǔn)確的對象類型。用法雖簡單明了殴泰，但其中有幾個點需要理解清楚：
- 該方法本質(zhì)就是依托
Object.prototype.toString()方法得到對象內(nèi)部屬性[[Class]] - 傳入原始類型卻能夠判定出結(jié)果是因為對值進行了包裝
-
null和undefined能夠輸出結(jié)果是內(nèi)部實現(xiàn)有做處理
NaN相關(guān)總結(jié)
NaN的概念
NaN 是一個全局對象的屬性于宙，NaN 是一個全局對象的屬性，NaN是一種特殊的Number類型悍汛。
什么時候返回NaN （開篇第二道題也得到解決）
- 無窮大除以無窮大
- 給任意負(fù)數(shù)做開方運算
- 算數(shù)運算符與不是數(shù)字或無法轉(zhuǎn)換為數(shù)字的操作數(shù)一起使用
- 字符串解析成數(shù)字
一些例子：
Infinity / Infinity; // 無窮大除以無窮大
Math.sqrt(-1); // 給任意負(fù)數(shù)做開方運算
'a' - 1; // 算數(shù)運算符與不是數(shù)字或無法轉(zhuǎn)換為數(shù)字的操作數(shù)一起使用
'a' * 1;
'a' / 1;
parseInt('a'); // 字符串解析成數(shù)字
parseFloat('a');
Number('a'); //NaN
'abc' - 1 // NaN
undefined + 1 // NaN
//一元運算符（注意點）
+'abc' // NaN
-'abc' // NaN
誤區(qū)
toString和String的區(qū)別
toString
-
toString()可以將數(shù)據(jù)都轉(zhuǎn)為字符串捞魁，但是null和undefined不可以轉(zhuǎn)換。console.log(null.toString()) //報錯 TypeError: Cannot read property 'toString' of null console.log(undefined.toString()) //報錯 TypeError: Cannot read property 'toString' of undefined -
toString()括號中可以寫數(shù)字离咐，代表進制二進制：.toString(2);
八進制：.toString(8);
十進制：.toString(10);
十六進制：.toString(16);
String
-
String()可以將null和undefined轉(zhuǎn)換為字符串谱俭，但是沒法轉(zhuǎn)進制字符串console.log(String(null)); // null console.log(String(undefined)); // undefined
作者：koala
鏈接：https://segmentfault.com/a/1190000019760110
求點贊，求關(guān)注~
