前言
之前面試了幾個(gè)開發(fā)者，他們確實(shí)做過不少項(xiàng)目，能力也是不錯(cuò)的，但是發(fā)現(xiàn)js基礎(chǔ)不扎實(shí), 于是決定寫一下這篇javascrip數(shù)據(jù)類型相關(guān)的基礎(chǔ)文章，其實(shí)也不僅僅是因?yàn)槊嬖嚵怂麄儯白约涸诿嬖嚨臅r(shí)候，也曾經(jīng)被虐過，面試官說過的最深刻的一句話我到現(xiàn)在都記得。
基礎(chǔ)很重要，只有基礎(chǔ)好才會(huì)很少出
bug，大多數(shù)的bug都是基礎(chǔ)不扎實(shí)造成的。
這里給出兩道我們公司數(shù)據(jù)類型基礎(chǔ)相關(guān)的面試題和答案，如果都能做對(duì)并且知道為什么（可以選擇忽略本文章）：
//類型轉(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
本篇文章會(huì)以一個(gè)面試官問問題的角度來進(jìn)行分析講解
js中的數(shù)據(jù)類型
面試官：說一說
javascript中有哪些數(shù)據(jù)類型?
JavaScript 中共有七種內(nèi)置數(shù)據(jù)類型，包括基本類型和對(duì)象類型。
基本類型
基本類型分為以下六種：
- string（字符串）
- boolean（布爾值）
- number（數(shù)字）
- symbol（符號(hào)）
- null（空值）
- undefined（未定義）
注意：
string、number、boolean和nullundefined這五種類型統(tǒng)稱為原始類型（Primitive），表示不能再細(xì)分下去的基本類型;symbol是ES6中新增的數(shù)據(jù)類型，symbol表示獨(dú)一無二的值，通過Symbol函數(shù)調(diào)用生成，由于生成的 symbol 值為原始類型，所以Symbol函數(shù)不能使用new調(diào)用；null和undefined通常被認(rèn)為是特殊值，這兩種類型的值唯一，就是其本身。
對(duì)象類型
對(duì)象類型也叫引用類型，array和function是對(duì)象的子類型。對(duì)象在邏輯上是屬性的無序集合，是存放各種值的容器。對(duì)象值存儲(chǔ)的是引用地址，所以和基本類型值不可變的特性不同，對(duì)象值是可變的。
js弱類型語言
面試官：說說你對(duì)
javascript是弱類型語言的理解?
JavaScript 是弱類型語言，而且JavaScript 聲明變量的時(shí)候并沒有預(yù)先確定的類型，變量的類型就是其值的類型，也就是說變量當(dāng)前的類型由其值所決定,夸張點(diǎn)說上一秒種的String，下一秒可能就是個(gè)Number類型了，這個(gè)過程可能就進(jìn)行了某些操作發(fā)生了強(qiáng)制類型轉(zhuǎn)換。雖然弱類型的這種不需要預(yù)先確定類型的特性給我們帶來了便利，同時(shí)也會(huì)給我們帶來困擾，為了能充分利用該特性就必須掌握類型轉(zhuǎn)換的原理。
js中的強(qiáng)制轉(zhuǎn)換規(guī)則
面試官：
javascript中強(qiáng)制類型轉(zhuǎn)換是一個(gè)非常易出現(xiàn)bug的點(diǎn)，知道強(qiáng)制轉(zhuǎn)換時(shí)候的規(guī)則嗎？
注：規(guī)則最好配合下面什么時(shí)候發(fā)生轉(zhuǎn)換使用這些規(guī)則看效果更佳。
ToPrimitive(轉(zhuǎn)換為原始值)
ToPrimitive對(duì)原始類型不發(fā)生轉(zhuǎn)換處理，只針對(duì)引用類型（object）的，其目的是將引用類型（object）轉(zhuǎn)換為非對(duì)象類型，也就是原始類型。
ToPrimitive 運(yùn)算符接受一個(gè)值，和一個(gè)可選的期望類型作參數(shù)。ToPrimitive 運(yùn)算符將值轉(zhuǎn)換為非對(duì)象類型，如果對(duì)象有能力被轉(zhuǎn)換為不止一種原語類型，可以使用可選的 期望類型 來暗示那個(gè)類型。
轉(zhuǎn)換后的結(jié)果原始類型是由期望類型決定的，期望類型其實(shí)就是我們傳遞的type。直接看下面比較清楚。
ToPrimitive方法大概長這么個(gè)樣子具體如下。
/**
* @obj 需要轉(zhuǎn)換的對(duì)象
* @type 期望轉(zhuǎn)換為的原始數(shù)據(jù)類型，可選
*/
ToPrimitive(obj,type)
type不同值的說明
- type為
string:
- 先調(diào)用
obj的toString方法，如果為原始值，則return，否則進(jìn)行第2步 - 調(diào)用
obj的valueOf方法，如果為原始值，則return，否則進(jìn)行第3步 - 拋出
TypeError異常
- type為
number:
- 先調(diào)用
obj的valueOf方法，如果為原始值，則return，否則進(jìn)行第2步 - 調(diào)用
obj的toString方法，如果為原始值，則return，否則第3步 - 拋出
TypeError異常
- type參數(shù)為空
- 該對(duì)象為
Date，則type被設(shè)置為String - 否則，type被設(shè)置為
Number
Date數(shù)據(jù)類型特殊說明：
對(duì)于Date數(shù)據(jù)類型，我們更多期望獲得的是其轉(zhuǎn)為時(shí)間后的字符串，而非毫秒值（時(shí)間戳），如果為number，則會(huì)取到對(duì)應(yīng)的毫秒值，顯然字符串使用更多。
其他類型對(duì)象按照取值的類型操作即可。
ToPrimitive總結(jié)
ToPrimitive轉(zhuǎn)成何種原始類型，取決于type，type參數(shù)可選，若指定，則按照指定類型轉(zhuǎn)換，若不指定，默認(rèn)根據(jù)實(shí)用情況分兩種情況，Date為string，其余對(duì)象為number。那么什么時(shí)候會(huì)指定type類型呢，那就要看下面兩種轉(zhuǎn)換方式了。
toString
Object.prototype.toString()
toString()方法返回一個(gè)表示該對(duì)象的字符串。
每個(gè)對(duì)象都有一個(gè) toString() 方法，當(dāng)對(duì)象被表示為文本值時(shí)或者當(dāng)以期望字符串的方式引用對(duì)象時(shí)，該方法被自動(dòng)調(diào)用。
這里先記住，valueOf() 和 toString()在特定的場合下會(huì)自行調(diào)用。
valueOf
Object.prototype.valueOf()方法返回指定對(duì)象的原始值。
JavaScript 調(diào)用 valueOf() 方法用來把對(duì)象轉(zhuǎn)換成原始類型的值（數(shù)值、字符串和布爾值）。但是我們很少需要自己調(diào)用此函數(shù)，valueOf 方法一般都會(huì)被 JavaScript 自動(dòng)調(diào)用。
不同內(nèi)置對(duì)象的valueOf實(shí)現(xiàn)：
- String => 返回字符串值
- Number => 返回?cái)?shù)字值
- Date => 返回一個(gè)數(shù)字，即時(shí)間值,字符串中內(nèi)容是依賴于具體實(shí)現(xiàn)的
- Boolean => 返回Boolean的this值
- Object => 返回this
對(duì)照代碼會(huì)更清晰一些：
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運(yùn)算符轉(zhuǎn)換規(guī)則：
-
null轉(zhuǎn)換為 0 -
undefined轉(zhuǎn)換為NaN -
true轉(zhuǎn)換為 1，false轉(zhuǎn)換為 0 - 字符串轉(zhuǎn)換時(shí)遵循數(shù)字常量規(guī)則，轉(zhuǎn)換失敗返回
NaN
注意：對(duì)象這里要先轉(zhuǎn)換為原始值，調(diào)用
ToPrimitive轉(zhuǎn)換，type指定為number了，繼續(xù)回到ToPrimitive進(jìn)行轉(zhuǎn)換。
String
String 運(yùn)算符轉(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ù)形式
注意：對(duì)象這里要先轉(zhuǎn)換為原始值，調(diào)用
ToPrimitive轉(zhuǎn)換，type就指定為string了，繼續(xù)回到ToPrimitive進(jìn)行轉(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 運(yùn)算符轉(zhuǎn)換規(guī)則
除了下述 6 個(gè)值轉(zhuǎn)換結(jié)果為 false，其他全部為true：
- undefined
- null
- -0
- 0或+0
- NaN
- ''（空字符串）
假值以外的值都是真值。其中包括所有對(duì)象（包括空對(duì)象）的轉(zhuǎn)換結(jié)果都是true，甚至連false對(duì)應(yīng)的布爾對(duì)象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)換呢？
什么時(shí)候自動(dòng)轉(zhuǎn)換為string類型
-
在沒有對(duì)象的前提下
字符串的自動(dòng)轉(zhuǎn)換，主要發(fā)生在字符串的加法運(yùn)算時(shí)。當(dāng)一個(gè)值為字符串，另一個(gè)值為非字符串，則后者轉(zhuǎn)為字符串。
'2' + 1 // '21'
'2' + true // "2true"
'2' + false // "2false"
'2' + undefined // "2undefined"
'2' + null // "2null"
- 當(dāng)有對(duì)象且與對(duì)象
+時(shí)候
//toString的對(duì)象
var obj2 = {
toString:function(){
return 'a'
}
}
console.log('2'+obj2)
//輸出結(jié)果2a
//常規(guī)對(duì)象
var obj1 = {
a:1,
b:2
}
console.log('2'+obj1)；
//輸出結(jié)果 2[object Object]
//幾種特殊對(duì)象
'2' + {} // "2[object Object]"
'2' + [] // "2"
'2' + function (){} // "2function (){}"
'2' + ['koala',1] // 2koala,1
對(duì)下面'2'+obj2詳細(xì)舉例說明如下：
- 左邊為
string，ToPrimitive原始值轉(zhuǎn)換后不發(fā)生變化 - 右邊轉(zhuǎn)化時(shí)同樣按照
ToPrimitive進(jìn)行原始值轉(zhuǎn)換，由于指定的type是number，進(jìn)行ToPrimitive轉(zhuǎn)化調(diào)用obj2.valueof(),得到的不是原始值，進(jìn)行第三步 - 調(diào)用
toString()return 'a' - 符號(hào)兩邊存在
string，而且是+號(hào)運(yùn)算符則都采用String規(guī)則轉(zhuǎn)換為string類型進(jìn)行拼接 - 輸出結(jié)果
2a
對(duì)下面'2'+obj1詳細(xì)舉例說明如下：
- 左邊為
string，ToPrimitive轉(zhuǎn)換為原始值后不發(fā)生變化 - 右邊轉(zhuǎn)化時(shí)同樣按照
ToPrimitive進(jìn)行原始值轉(zhuǎn)換，由于指定的type是number，進(jìn)行ToPrimitive轉(zhuǎn)化調(diào)用obj2.valueof(),得到{ a: 1, b: 2 } - 調(diào)用
toString()return [object Object] - 符號(hào)兩邊存在
string，而且是+號(hào)運(yùn)算符則都采用String規(guī)則轉(zhuǎn)換為string類型進(jìn)行拼接 - 輸出結(jié)果
2[object Object]
代碼中幾種特殊對(duì)象的轉(zhuǎn)換規(guī)則基本相同，就不一一說明，大家可以想一下流程。
注意：不管是對(duì)象還不是對(duì)象，都有一個(gè)轉(zhuǎn)換為原始值的過程，也就是ToPrimitive轉(zhuǎn)換，只不過原始類型轉(zhuǎn)換后不發(fā)生變化，對(duì)象類型才會(huì)發(fā)生具體轉(zhuǎn)換。
string類型轉(zhuǎn)換開發(fā)過程中可能出錯(cuò)的點(diǎn)：
var obj = {
width: '100'
};
obj.width + 20 // "10020"
預(yù)期輸出結(jié)果120 實(shí)際輸出結(jié)果10020
什么時(shí)候自動(dòng)轉(zhuǎn)換為Number類型
-
有加法運(yùn)算符，但是無
String類型的時(shí)候，都會(huì)優(yōu)先轉(zhuǎn)換為Number類型例子：
true + 0 // 1 true + true // 2 true + false //1 -
除了加法運(yùn)算符，其他運(yùn)算符都會(huì)把運(yùn)算自動(dòng)轉(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 //一元運(yùn)算符（注意點(diǎn)） +'abc' // NaN -'abc' // NaN +true // 1 -false // 0
注意：
null轉(zhuǎn)為數(shù)值時(shí)為0，而undefined轉(zhuǎn)為數(shù)值時(shí)為NaN。
判斷等號(hào)也放在Number里面特殊說明
== 抽象相等比較與+運(yùn)算符不同，不再是String優(yōu)先，而是Number優(yōu)先。
下面列舉x == y的例子
- 如果
x,y均為number，直接比較
沒什么可解釋的了
1 == 2 //false
- 如果存在對(duì)象，
ToPrimitive()type為number進(jìn)行轉(zhuǎn)換，再進(jìn)行后面比較
var obj1 = {
valueOf:function(){
return '1'
}
}
1 == obj1 //true
//obj1轉(zhuǎn)為原始值，調(diào)用obj1.valueOf()
//返回原始值'1'
//'1'toNumber得到 1 然后比較 1 == 1
[] == ![] //true
//[]作為對(duì)象ToPrimitive得到 ''
//![]作為boolean轉(zhuǎn)換得到0
//'' == 0
//轉(zhuǎn)換為 0==0 //true
- 存在
boolean，按照ToNumber將boolean轉(zhuǎn)換為1或者0，再進(jìn)行后面比較
//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進(jìn)行比較
//'0' toNumber()得到 0
//0 == 0 true
'0' == 0 //true
什么時(shí)候進(jìn)行布爾轉(zhuǎn)換
- 布爾比較時(shí)
-
if(obj),while(obj)等判斷時(shí)或者 三元運(yùn)算符只能夠包含布爾值
條件部分的每個(gè)值都相當(dāng)于false，使用否定運(yùn)算符后，就變成了true
if ( !undefined
&& !null
&& !0
&& !NaN
&& !''
) {
console.log('true');
} // true
//下面兩種情況也會(huì)轉(zhuǎn)成布爾類型
expression ? true : false
!! expression
js中的數(shù)據(jù)類型判斷
面試官問：如何判斷數(shù)據(jù)類型？怎么判斷一個(gè)值到底是數(shù)組類型還是對(duì)象?
三種方式，分別為 typeof、instanceof 和Object.prototype.toString()
typeof
通過 typeof操作符來判斷一個(gè)值屬于哪種基本類型。
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操作符對(duì)對(duì)象類型及其子類型，例如函數(shù)（可調(diào)用對(duì)象）、數(shù)組（有序索引對(duì)象）等進(jìn)行判定，則除了函數(shù)都會(huì)得到
object的結(jié)果。
綜上可以看出typeOf對(duì)于判斷類型還有一些不足，在對(duì)象的子類型和null情況下。
instanceof
通過 instanceof 操作符也可以對(duì)對(duì)象類型進(jìn)行判定，其原理就是測(cè)試構(gòu)造函數(shù)的prototype 是否出現(xiàn)在被檢測(cè)對(duì)象的原型鏈上。
[] instanceof Array // true
({}) instanceof Object // true
(()=>{}) instanceof Function // true
復(fù)制代碼注意：instanceof 也不是萬能的。
舉個(gè)例子：
let arr = []
let obj = {}
arr instanceof Array // true
arr instanceof Object // true
obj instanceof Object // true
在這個(gè)例子中，arr 數(shù)組相當(dāng)于 new Array() 出的一個(gè)實(shí)例，所以 arr.__proto__ === Array.prototype，又因?yàn)?Array屬于 Object 子類型，即Array.prototype.__proto__ === Object.prototype，因此 Object 構(gòu)造函數(shù)在 arr 的原型鏈上。所以 instanceof 仍然無法優(yōu)雅的判斷一個(gè)值到底屬于數(shù)組還是普通對(duì)象。
還有一點(diǎn)需要說明下，有些開發(fā)者會(huì)說 Object.prototype.__proto__ === null，豈不是說 arr instanceof null 也應(yīng)該為 true，這個(gè)語句其實(shí)會(huì)報(bào)錯(cuò)提示右側(cè)參數(shù)應(yīng)該為對(duì)象，這也印證 typeof null 的結(jié)果為 object 真的只是javascript中的一個(gè)bug 。
Object.prototype.toString() 可以說是判定 JavaScript 中數(shù)據(jù)類型的終極解決方法了，具體用法請(qǐng)看以下代碼：
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)該方法在傳入任何類型的值都能返回對(duì)應(yīng)準(zhǔn)確的對(duì)象類型。用法雖簡單明了，但其中有幾個(gè)點(diǎn)需要理解清楚：
- 該方法本質(zhì)就是依托
Object.prototype.toString()方法得到對(duì)象內(nèi)部屬性[[Class]] - 傳入原始類型卻能夠判定出結(jié)果是因?yàn)閷?duì)值進(jìn)行了包裝
-
null和undefined能夠輸出結(jié)果是內(nèi)部實(shí)現(xiàn)有做處理
NaN相關(guān)總結(jié)
NaN的概念
NaN 是一個(gè)全局對(duì)象的屬性，NaN 是一個(gè)全局對(duì)象的屬性，NaN是一種特殊的Number類型。
什么時(shí)候返回NaN （開篇第二道題也得到解決）
- 無窮大除以無窮大
- 給任意負(fù)數(shù)做開方運(yùn)算
- 算數(shù)運(yùn)算符與不是數(shù)字或無法轉(zhuǎn)換為數(shù)字的操作數(shù)一起使用
- 字符串解析成數(shù)字
一些例子：
Infinity / Infinity; // 無窮大除以無窮大
Math.sqrt(-1); // 給任意負(fù)數(shù)做開方運(yùn)算
'a' - 1; // 算數(shù)運(yùn)算符與不是數(shù)字或無法轉(zhuǎn)換為數(shù)字的操作數(shù)一起使用
'a' * 1;
'a' / 1;
parseInt('a'); // 字符串解析成數(shù)字
parseFloat('a');
Number('a'); //NaN
'abc' - 1 // NaN
undefined + 1 // NaN
//一元運(yùn)算符（注意點(diǎn)）
+'abc' // NaN
-'abc' // NaN
誤區(qū)
toString和String的區(qū)別
toString
-
toString()可以將數(shù)據(jù)都轉(zhuǎn)為字符串，但是null和undefined不可以轉(zhuǎn)換。console.log(null.toString()) //報(bào)錯(cuò) TypeError: Cannot read property 'toString' of null console.log(undefined.toString()) //報(bào)錯(cuò) TypeError: Cannot read property 'toString' of undefined -
toString()括號(hào)中可以寫數(shù)字，代表進(jìn)制二進(jìn)制：.toString(2);
八進(jìn)制：.toString(8);
十進(jìn)制：.toString(10);
十六進(jìn)制：.toString(16);
String
-
String()可以將null和undefined轉(zhuǎn)換為字符串，但是沒法轉(zhuǎn)進(jìn)制字符串console.log(String(null)); // null console.log(String(undefined)); // undefined
后話
如果你想第一時(shí)間看到最新文章, 歡迎關(guān)注公眾號(hào):『程序員成長指北』
如果你想加群交流學(xué)習(xí)，也掃描下圖二維碼，添加管理員微信,自動(dòng)拉你進(jìn)群
個(gè)人公眾號(hào)技術(shù)棧
原創(chuàng)文章,禁止轉(zhuǎn)載!
