JS的數據類型你真的懂了嗎

時間 2020-07-09

標籤數據類型欄目 JavaScript 简体版

原文原文鏈接

1、JS數據類型分類

　　1.基本數據類型

　　　　（1）Number 數字javascript

　　　　（2）String 字符串html

　　　　（3）Boolean 布爾值前端

　　　　（4）null 空對象指針java

　　　　（5）undefined 爲定義es6

　　　　（6）symbol (es6新增，表示獨一無二的值)面試

　　　　（7）bigint（ES10新增，表示比number數據類型支持的範圍更大的整數值）數組

　　　　注意：NaN是Number中的一種特殊數值，不是一種數據類型函數

　　2.引用數據類型

　　　　object，array和function都是object的子類型性能

　　3.基本數據類型和引用數據類型的區別

　　　　（1）聲明變量時內存分配不同測試

　　　　　　基本數據類型：在棧中，由於佔據空間是固定的，能夠將他們存在較小的內存中-棧中，這樣便於迅速查詢變量的值

　　　　　　引用數據類型：存在堆中，棧中存儲的變量，只是用來查找堆中的引用地址。

　　　　　　理由：引用值的大小會改變，因此不能把它放在棧中，不然會下降變量查尋的速度。相反，放在變量的棧空間中的值是該對象存儲在堆中的地址。地址的大小是固定的，因此把它存儲在棧中對變量性能無任何負面影響

　　　　（2）不一樣的內存分配帶來不一樣的訪問機制

　　　　　　在javascript中是不容許直接訪問保存在堆內存中的對象的，因此在訪問一個對象時，首先獲得的是這個對象在堆內存中的地址，而後再按照這個地址去得到這個對象中的值，這就是傳說中的按引用訪問。而基本數據類型的值則是能夠直接訪問到的。

　　　　（3）複製變量時的不一樣

　　　　　　基本數據類型：在將一個保存着原始值的變量複製給另外一個變量時，會將原始值的副本賦值給新變量，此後這兩個變量是徹底獨立的，他們只是擁有相同的value而已。

　　　　　　引用數據類型：在將一個保存着對象內存地址的變量複製給另外一個變量時，會把這個內存地址賦值給新變量，也就是說這兩個變量都指向了堆內存中的同一個對象，他們中任何一個做出的改變都會反映在另外一個身上。（這裏要理解的一點就是，複製對象時並不會在堆內存中新生成一個如出一轍的對象，只是多了一個保存指向這個對象指針的變量罷了）

　　　　（4）參數傳遞的不一樣

　　　　　　基本數據類型：只是把變量的值傳遞給參數，以後這個參數和變量互不影響

　　　　　　引用數據類型：傳遞是對象在堆內存裏面的地址，他們指向同一個對象。

2、數據類型的判斷方式

　　1.typeof

　　　　typeof返回一個表示數據類型的字符串，返回結果包括：number、boolean、string、symbol、object、undefined、function等7種數據類型，但不能判斷null、array等

　　2.instanceof

　　　　instanceof 是用來判斷a是否爲b的實例，表達式爲：a instanceof b，若是a是b的實例，則返回true,不然返回false。instanceof 運算符用來測試一個對象在其原型鏈中是否存在一個構造函數的 prototype 屬性，但它不能檢測null和 undefined 　　

　　3.constructor

　　　　constructor做用和instanceof很是類似。但constructor檢測 object與instanceof不同，還能夠處理基本數據類型的檢測。不過函數的 constructor 是不穩定的，這個主要體如今把類的原型進行重寫，在重寫的過程當中頗有可能出現把以前的constructor給覆蓋了，這樣檢測出來的結果就是不許確的。

　　4.object.prototype.tostring.call() ：是最準確最經常使用的方式。

代碼示例：

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]

3、JS數據類型轉換

　　1.強制轉換

　　　　（1）toPrimitive（obj，type）轉換爲原始值

　　　　　　toPrimitive對基本數據類型不發生轉換處理，只針對引用數據類型，做用是將引用數據類型轉換爲基本數據類型。ToPrimitive運算符有兩個參數，第一個參數obj是須要轉換的對象，第二個參數type是指望轉換爲的原始數據類型（可選）

　　　　　　對於參數2 type的說明：

　　　　　　　　type=String，首先調用obj的toString方法，若是爲原始值則return，不然調用obj的valueOf方法，若是爲原始值則return，不然拋出TypeError異常

　　　　　　　　type=Number，首先調用obj的valueOf方法，若是爲原始值則return，不然調用obj的toString方法，若是爲原始值則return，不然拋出TypeError異常

　　　　　　　　type參數爲空，若是obj是Date對象，則type=String，其它狀況把type=Number處理

　　　　（2）toString

　　　　　　返回一個表示該對象的字符串，每一個對象都有toString方法，當對象被表示爲文本值時或者當以指望字符串的方式引用對象時，該方法自動調用

var obj={}
console.log(obj.toString())//[object Object]

var arr=[1,"111"]
console.log(arr.valueOf())//數組自己
console.log(arr.toString())//1,111
console.log(arr.toLocaleString())//1,111

　　　　（3）valueOf

　　　　　　Javascript調用valueOf方法來把對象轉換成原始類型的值（數值、字符串、布爾值）。某些狀況會被自動調用

　　　　　　array 數組的元素被轉換爲字符串，這些字符串由逗號分隔，鏈接在一塊兒。其操做與 array.tostring 和 array.join 方法相同。

　　　　　　boolean boolean 值。

　　　　　　date 存儲的時間是從 1970 年 1 月 1 日午夜開始計的毫秒數 utc。

　　　　　　function 函數自己。

　　　　　　number 數字值。

　　　　　　object 返回"[object object]"，前一個object標記基礎類型，後一個object標記子類型

　　　　　　string 字符串值。

　　　　　　math 和 error 對象沒有 valueof 方法。

var str="我是string";
var num=5;
var date=new Date();
var obj={
    name:"cc",
    age:16
}
console.log(str.valueOf())//我是string
console.log(num.valueOf())//5
console.log(date.valueOf())//1574577999115
console.log(obj.valueOf())//{name: "cc", age:16}

　　　　（4）Number（）

　　　　　　　null==》0、undefined==》NaN、true==》一、false==》0　

　　　　　　字符串轉換時遵循數字常量規則，若是有不是數字的內容則轉換失敗返回 NaN

Number(null);       //0
Number(undefined);  //NaN
Number(true);	      //1
Number(false);      //0
Number('1');        //1
Number('a');        //NaN

　　　　（5）String（）

　　　　　　null、undefined、true、false都加上引號

　　　　　　數字轉換遵循通用規則，溢出將以指數形式或者無窮大（Infinity）

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(1E+400)               // 'Infinity'
String(-Infinity)            // '-Infinity'
String({})                      // '[object Object]'
String([1,[2,[3,4]],['a'])       // '1,2,3,4,a'
String(function (){return 0}）  //function({return 0})

　　　　（6）Boolean

　　　　　　undefined、null、0、+0、-0、NaN、空字符串轉換爲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

　　2.隱式轉換

4、數據類型面試題

　　1.js中typeOf數據類型分別輸出什麼

console.log(typeof 1);//Number
console.log(typeof NaN);//Number
console.log(typeof '1');//String
console.log(typeof null);//Object
console.log(typeof undefined);//undefined
console.log(typeof true);//Boolean
console.log(typeof false);//Boolean
console.log(typeof {});//Object
console.log(typeof []);//Object
console.log(typeof function(){var a=1});//function

　　　　特別注意，null、空對象、空數組的結果都是Object，function的結果就是function

　　2.null和undefined有什麼區別

　　　　一句話歸納：undefined是未定義的，null是定義了可是爲空。若是對他倆進行==判斷，結果爲true。用===判斷，結果爲false

　　3.==和===有什麼區別

　　　　簡單來講： == 表明相同， ===表明嚴格相同

　　　　理解：當進行雙等號比較時候：先檢查兩個操做數數據類型，若是相同，則進行===比較，若是不一樣，則願意爲你進行一次類型轉換，轉換成相同類型後再進行比較(如何轉換看上面的圖片)，而===比較時，若是類型不一樣，直接就是false.

　　　　操做數1 == 操做數2，操做數1 === 操做數2

　　　　比較過程：

　　　　　　雙等號==：

　　　　　　　　（1）若是兩個值類型相同，再進行三個等號(===)的比較

　　　　　　　　（2）若是兩個值類型不一樣，也有可能相等，需根據如下規則進行類型轉換在比較：

　　　　　　　　　　　　1）若是一個是null，一個是undefined，那麼相等

　　　　　　　　　　　　2）若是一個是字符串，一個是數值，把字符串轉換成數值以後再進行比較

　　　　　　三等號===:

　　　　　　　　（1）若是類型不一樣，就必定不相等

　　　　　　　　（2）若是兩個都是數值，而且是同一個值，那麼相等；若是其中至少一個是NaN，那麼不相等。（判斷一個值是不是NaN，只能使用isNaN( ) 來判斷）

　　　　　　　　（3）若是兩個都是字符串，每一個位置的字符都同樣，那麼相等，不然不相等。

　　　　　　　　（4）若是兩個值都是true，或是false，那麼相等

　　　　　　　　（5）若是兩個值都引用同一個對象或是函數，那麼相等，不然不相等

　　　　　　　　（6）若是兩個值都是null，或是undefined，那麼相等

　　4.請說出如下代碼的執行結果和理由（區分算術運算符和字符串拼接）

console.log(1 + 'true')//‘1true’
console.log(1 + true)//2
console.log(1 + undefined)//NaN
console.log(1 + null)//1

　　　　console.log(1 + 'true')//‘1true’【字符串拼接，會把其餘數據類型轉爲字符串而後拼接】
　　　　console.log(1 + true)//2 【加法運算會把其餘數據類型轉爲數字再進行加法運算】
　　5.請說出如下代碼的執行結果和理由（關係運算符）

console.log('2'>10)//false
console.log('2'>'10')//true
console.log('abc'>'a')//false
console.log('abc'>'aad')//true
console.log(NaN == NaN )//false
console.log(undefined == null )//true

　　console.log('2'>10)//false 【關係運算符只有一邊是字符串時，會把其餘數據類型轉爲數字，而後比較】

　　console.log('2'>'10')//true 【若是兩邊都是字符串，同事轉成字符對應的編碼值進行比較】

　　console.log('abc'>'a')//false 【若是是多個字符，從左到右依次比較，先比較‘a’和‘b’，若是不等直接出結果】ps：大小比較的是字符的ASCII碼值

　　console.log('abc'>'aad')//true【若是相等，則比較第二個字符，根據相等於否得出結果】

　　console.log(NaN == NaN )//false 【NaN和任何數據比較都是false】

　　console.log(undefined == null )//true【undefined和null使用==斷定相等，與自身斷定也相等】

　　6.請說出如下代碼的執行結果和理由（複雜數據類型）

console.log([1,2] == '1,2')//true
console.log([1,2].valueOf())// [1,2]
console.log([1,2].toString())// 1,2

var a={}
console.log(a == '[object Object]')//true
console.log(a.valueOf().toString())//[object Object]

　　當對象和字符串比較時先調用valueOf()再調用toString方法，而後再進行比較

　　下面看一道進階題：

var a=???
if(a == 1 && a == 2 && a == 3){
	console.log(3)
}
如何填寫a,使得函數打印出3

　　小爐：乍一看，a怎麼可能等於一、二、3呢，這題有問題叭！

　　前端大佬：非也非也，要知道，在數據類型的比較中，有的能夠執行valueOf、toString方法的，突破口就在這裏，那麼咱們重寫他的方法，就能夠實現改變a值。很少說了，直接上代碼：（其餘方案傳送門）

var a={
	i:0,
	valueOf:function(){
		return ++a.i
	}
}
if(a == 1 && a == 2 && a == 3){
	console.log(3)
}

　　7.請說出如下代碼的執行結果和理由（邏輯非隱式轉換和關係運算符隱式轉換）

代碼（1）
console.log([]==0)//true
console.log(![]==0)//true

代碼（2）

console.log([]==![])//true
console.log([]==[])//false

代碼（3）
console.log({}==!{})//false
console.log({}=={})//false

　　首先，你要知道，關係運算符將其餘數據類型轉成數字，邏輯非：將其餘數據類型使用boolean轉爲布爾類型。

　　代碼（1）

　　[].valueOf.toString()獲得空串，空串轉爲數字是0，因此判斷[]==0是true
　　邏輯非優先級高於關係運算符，因此![]先是空數組轉爲布爾true，而後取反是false。0轉爲布爾也是false因此判斷![]==0是true

　　代碼（2）

　　邏輯非優先級高於關係運算符，因此![]先是空數組轉爲布爾true，而後取反是false。而後是空數組轉變獲得空串，字符串和布爾進行==比較，將他們兩者轉爲數字進行比較。因此都爲0，斷定最後結果爲true。

　　console.log([]==[])//false 由於是引用數據類型，棧中存的是地址，因此不相等

　　代碼（3）

　　邏輯非優先級高於關係運算符，先執行{}.valueOf.toString()獲得'[object Object]'，對他取反爲false，而後將他和空對象都數字化，而後獲得0==0，斷定他們相等，因此結果爲true。

　　console.log({}=={})//false 由於是引用數據類型，棧中存的是地址，因此不相等