JS里的數(shù)據(jù)類型轉(zhuǎn)換及小技巧

如何將其他的數(shù)據(jù)類型轉(zhuǎn)換成String字符串類型绷落？

注：下面介紹的三種轉(zhuǎn)換成字符串的方法都不適用于對象object杆融，所得結(jié)果都是"[object Object]",但是對于函數(shù)和數(shù)組是可以轉(zhuǎn)換的

?.toString()
String(?)
''+ ?
上面的問號鳖孤？代表是其他數(shù)據(jù)類型仁连，這樣可以快速得知使用方法

方法1：`?.toString()`

toString方法適用于number類型和boolean類型评汰，但是將數(shù)字轉(zhuǎn)換為字符串時骑科，要特別注意时捌，如

//將數(shù)字轉(zhuǎn)換為字符串錯誤寫法
1.toString() //Uncaught SyntaxError: Invalid or unexpected token
//正確寫法
(1).toString() //"1"
true.toString() //"true"

但是對于null和undefined亏吝，使用這種方法會報錯店诗，如：
報錯信息揭秘：
不能讀null的toString方法裹刮，null沒有toString的api，所以報錯庞瘸，undefined類似

null.toString() //Uncaught TypeError: Cannot read property 'toString' of null
undefined.toString() //Uncaught TypeError: Cannot read property 'toString' of undefined

對于object捧弃，toSring方法結(jié)果不正確，結(jié)果永遠(yuǎn)是"[object Object]"擦囊，函數(shù)和數(shù)組是比較特別,具體請看代碼

//錯誤寫法
{}.toString() //Uncaught SyntaxError: Unexpected token .
//正確寫法
({}).toString() //"[object Object]"
var obj = {}
obj.toString() //結(jié)果為 "[object Object]"

//函數(shù)
//錯誤寫法
function(){}.toString() //Uncaught SyntaxError: Unexpected token (
//正確寫法
(function(){}).toString()  //"function(){}"

//數(shù)組
[].toString()  //"" 
[1,2,3].toString() //"1,2,3"

方法2：`String(?)`（小白做法）

String() 該方法適用于所有數(shù)據(jù)類型（除了對象违霞，結(jié)果同toString()）

String(123)  //"123"
String(true) //"true"
String(null) //"null"
String(undefined) //"undefined"
String({name:'frank'}) //"[object Object]"
String([1,2,3])  //"1,2,3"
String(function(){}) //"function(){}"

方法3：`''+ ?`（老司機做法）

注：這種方法的原理是：‘+’ 運算符只能相加相同的數(shù)據(jù)類型，如果兩邊的數(shù)據(jù)類型不同瞬场，他會優(yōu)先將其轉(zhuǎn)換成字符串來相加葛家。
''+ ? 即使用+運算符加上空字符串（同樣對object無效）該方法適用于所有數(shù)據(jù)類型（除了對象，結(jié)果同toString()）

1 + ''   //"1"
false + ''  //"false"
null + ''  //"null"
undefined + ''  //"undefined"
[1,2,3] + ''  //"1,2,3"

var obj = {name : 'frank'}
obj + ''  //"[object Object]"

function(){} + '' //Uncaught SyntaxError: Unexpected token (
(function(){}) + ''  //"function(){}"

[1,2,3] + ''  //"1,2,3"

小Tips：

三種轉(zhuǎn)換成字符串的方法對于對象來說泌类，是特殊的
使用這種方法?.toString()報錯癞谒，只需給需要轉(zhuǎn)換的東西加上個括號底燎，具體例子請看上面

如何將其他的數(shù)據(jù)類型轉(zhuǎn)換成Number數(shù)值類型？

注：parseInt逐個解析字符弹砚，而Number函數(shù)整體轉(zhuǎn)換字符串的類型双仍。parseInt,parseFloat和Number函數(shù)都會自動過濾一個字符串前導(dǎo)和后綴的空格。parseInt(?,?)說明parseInt可以有兩個參數(shù)

Number(?)
parseInt(?,?)
parseFloat(?)
'?' - 0
+ '?'

方法1：`Number(?)`

使用Number函數(shù)桌吃，可以將任意類型的值轉(zhuǎn)化成數(shù)值朱沃。Number函數(shù)將字符串轉(zhuǎn)為數(shù)值，要比parseInt函數(shù)嚴(yán)格很多茅诱。基本上逗物，只要有一個字符無法轉(zhuǎn)成數(shù)值，整個字符串就會被轉(zhuǎn)為NaN瑟俭。
下面分成兩種情況討論翎卓，一種是參數(shù)是原始類型的值，另一種是參數(shù)是對象摆寄。
（1）原始類型值
示例如下：

// 數(shù)值：轉(zhuǎn)換后還是原來的值
Number(324) // 324

// 字符串：如果可以被解析為數(shù)值失暴，則轉(zhuǎn)換為相應(yīng)的數(shù)值
Number('324') // 324

// 字符串：如果不可以被解析為數(shù)值，返回 NaN
Number('324abc') // NaN

// 空字符串轉(zhuǎn)為0
Number('') // 0

// 布爾值：true 轉(zhuǎn)成 1微饥，false 轉(zhuǎn)成 0
Number(true) // 1
Number(false) // 0

// undefined：轉(zhuǎn)成 NaN
Number(undefined) // NaN

// null：轉(zhuǎn)成0
Number(null) // 0

Number('42 cats') // NaN

（2）對象
Number方法的參數(shù)是對象時逗扒，將返回NaN，除非是包含單個數(shù)值的數(shù)組欠橘。
示例如下：

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

Number背后的轉(zhuǎn)換規(guī)則比較復(fù)雜矩肩。
第一步，調(diào)用對象自身的valueOf方法肃续。如果返回原始類型的值黍檩，則直接對該值使用Number函數(shù)，不再進行后續(xù)步驟痹升。
第二步建炫，如果valueOf方法返回的還是對象畦韭，則改為調(diào)用對象自身的toString方法疼蛾。如果toString方法返回原始類型的值，則對該值使用Number函數(shù)艺配，不再進行后續(xù)步驟察郁。
第三步，如果toString方法返回的是對象转唉，就報錯皮钠。

方法2：`parseInt()`

parseInt方法用于將字符串轉(zhuǎn)為整數(shù)。
如：parseInt('123') // 123
如果字符串頭部有空格赠法，空格會被自動去除麦轰。parseInt(' 81') // 81
如果parseInt的參數(shù)不是字符串，則會先轉(zhuǎn)為字符串再轉(zhuǎn)換。

parseInt(1.23) // 1
// 等同于
parseInt('1.23') // 1

字符串轉(zhuǎn)為整數(shù)的時候款侵，是一個個字符依次轉(zhuǎn)換末荐，如果遇到不能轉(zhuǎn)為數(shù)字的字符，就不再進行下去新锈，返回已經(jīng)轉(zhuǎn)好的部分甲脏。

parseInt('8a') // 8
parseInt('15e2') // 15
parseInt('15px') // 15

如果字符串的第一個字符不能轉(zhuǎn)化為數(shù)字（后面跟著數(shù)字的正負(fù)號除外），返回NaN妹笆。

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

注：parseInt()方法默認(rèn)轉(zhuǎn)換成十進制块请，不過需要注意的是，如果參數(shù)本身就是number類型拳缠，且是0x開頭（16進制）墩新，或0o開頭（八進制），0b開頭（二進制）脊凰，0開頭且后面的數(shù)字沒有8和9（視為八進制）抖棘，那么parseInt方法會將其以相應(yīng)的進制轉(zhuǎn)換成十進制展示出來。

parseInt(0o377)  //255
parseInt(0xff)  //255
parseInt(0b11)  //3

如果字符串以0x或0X開頭狸涌，parseInt會將其按照十六進制數(shù)解析切省。

parseInt('0x10') // 16

如果字符串以0開頭，將其按照10進制解析帕胆。

parseInt('011') // 11

因此朝捆，為了防止意外解析成其他進制，建議添加第二個參數(shù)按照特定進制解析：如：
如果第二個參數(shù)不是數(shù)值懒豹，會被自動轉(zhuǎn)為一個整數(shù)芙盘。這個整數(shù)只有在2到36之間，才能得到有意義的結(jié)果脸秽，超出這個范圍儒老，則返回NaN。如果第二個參數(shù)是0记餐、undefined和null驮樊，則直接忽略。

parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512
parseInt('10', 37) // NaN
parseInt('10', 1) // NaN
parseInt('10', 0) // 10
parseInt('10', null) // 10
parseInt('10', undefined) // 10

方法3：`parseFloat()`

parseFloat方法用于將一個字符串轉(zhuǎn)為浮點數(shù)片酝。

parseFloat('3.14') // 3.14

如果字符串符合科學(xué)計數(shù)法囚衔，則會進行相應(yīng)的轉(zhuǎn)換。

parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14

如果字符串包含不能轉(zhuǎn)為浮點數(shù)的字符雕沿，則不再進行往后轉(zhuǎn)換练湿，返回已經(jīng)轉(zhuǎn)好的部分。

parseFloat('3.14more non-digit characters') // 3.14

parseFloat與Number的對比

parseFloat(true)  // NaN
Number(true) // 1

parseFloat(null) // NaN
Number(null) // 0

parseFloat('') // NaN
Number('') // 0

parseFloat('123.45#') // 123.45
Number('123.45#') // NaN

方法4：`'?' - 0`

字符串 - 0审轮。如：'11' - 0 //11`

方法5： `+ '?'`

另辟蹊徑的方法： + 字符串肥哎，這里的+并不是取正值的意思辽俗，負(fù)數(shù)一樣可行，如：+ '-011' ; // -11
注：上面介紹的使用運算符的轉(zhuǎn)換方法篡诽，字符串不能有除了數(shù)字外的其他字符（正負(fù)號榆苞，表示進制的標(biāo)識除外），字符串中霞捡，0b坐漏、0x、0o開頭會以對應(yīng)表示的進制解析碧信，如果是'011'赊琳，則會解析成十進制而不是二進制，小數(shù)同樣可以用這兩種方法進行轉(zhuǎn)換
小Tips：

Number方法基本上砰碴，只要有一個字符無法轉(zhuǎn)成數(shù)值躏筏，整個字符串就會被轉(zhuǎn)為NaN
parseInt方法為了防止意外解析成其他進制，建議添加第二個參數(shù)按照特定進制解析
parseFloat會將空字符串轉(zhuǎn)為NaN

如何將將其他數(shù)據(jù)類型轉(zhuǎn)換為Boolean布爾類型呈枉？

Boolean() 趁尼，如：

Boolean(1)  //true
Boolean({})  //true

老司機做法：雙重取反：!! x ，如：

!true //false
!!true //true
!!1 //true

五個falsy值猖辫，即轉(zhuǎn)換成Boolean后為false的值：
0 酥泞、 NaN 、 null 啃憎、 undefined 芝囤、‘’（空字符串）

JS中的數(shù)據(jù)在內(nèi)存中的存儲方式

什么是內(nèi)存呢，舉個例子：

你買一個8G 的內(nèi)存條辛萍，操作系統(tǒng)開機即占用 512MB悯姊，Chrome 打開即占用 1G 內(nèi)存， Chrome 各每個網(wǎng)頁分配一定數(shù)量的內(nèi)存贩毕，這些內(nèi)存要分給頁面渲染器悯许、網(wǎng)絡(luò)模塊、瀏覽器外殼和 JS 引擎（V8引擎）辉阶。
JS 引擎將內(nèi)存分為代碼區(qū)和數(shù)據(jù)區(qū)先壕，我們只研究數(shù)據(jù)區(qū)。數(shù)據(jù)區(qū)分為 Stack（棧內(nèi)存）和 Heap（堆內(nèi)存）睛藻。簡單類型的數(shù)據(jù)（如Number启上，string等）直接存在 Stack 里邢隧， 復(fù)雜類型的數(shù)據(jù)（object對象）是把 Heap 地址存在 Stack 里店印。

對象存儲數(shù)據(jù)的方式

對象的存儲方式是在stack棧內(nèi)存存儲一個地址，形成對對象的引用倒慧，地址指向heap堆內(nèi)存的某個位置按摘，object是對象的引用包券。它在stack棧內(nèi)存存的是地址，而不像其他數(shù)據(jù)類型直接把內(nèi)容存在stack棧內(nèi)存

垃圾回收

JS中的垃圾回收機制：如果一個對象沒有被引用炫贤，它就是垃圾溅固，將會被回收。（時間并不確定的）
內(nèi)存泄漏就和垃圾回收機制有一定的聯(lián)系：由于瀏覽器的一些bug兰珍，使得本應(yīng)被被標(biāo)記為垃圾的數(shù)據(jù)沒有被標(biāo)記侍郭，而這些垃圾數(shù)據(jù)占用的內(nèi)存將永遠(yuǎn)被占用，哪怕你把當(dāng)前頁面關(guān)掉都不會被釋放掠河，除非直接關(guān)掉整個瀏覽器亮元。（IE6就有此類bug）
解決方法：（但是要抵制IE低版本瀏覽器）

window.onunload = function(){
  //需要將所有的事件監(jiān)聽為null，十分麻煩
  document.body.onclick = null;
}

四個關(guān)于內(nèi)存的題目

畫內(nèi)存圖（解決問題的方法）唠摹，只要你不畫圖爆捞，就會錯，以不變應(yīng)萬變
題目一：

var a = 1;
var b = a;
b =2;
 //請問 a 是什么勾拉？   
//a = ? => a === 1

題目二：

var a = {name:'a'};
var b = a;
b = {name: 'b'};
 //請問 a.name 是什么煮甥？  
//a.name === " a"

題目三：

var a = {name: 'a'};
var b = a;
b.name = 'b'；
 //請問 a.name 是什么藕赞？  
//a.name === " b"

題目四：

var a = {name:'a'};
var b = a;
b = null;
 //請問 a是什么成肘？  
//a === {name: 'a'}

面試題

var a = {n:1};  
var b = a; 
a.x = a = {n:2};  
alert(a.x);
alert(b.x);

坑爹的面試題，a.x = a = {n:2};這句話是什么意思斧蜕？瀏覽器看到這句話艇劫，就會問a是什么？
瀏覽器讀到a.x = a = {n:2};這句話時惩激，先看左面店煞，再往右邊看

a.x = a = {n:2}
//a = {n:2},此時的a指向新的地址
//a.x還是之前的地址，并沒有發(fā)生改變

注：這些箭頭并不是真實存在的风钻，只是虛擬的示意

深拷貝與淺拷貝

深拷貝：

var a = 1;
var b = a;
b = 2 ;
//請問a是什么顷蟀？

a的值仍然還是1。
即 b 變而不影響 a骡技，就叫深拷貝（簡單數(shù)據(jù)類型的賦值都是深拷貝）
淺拷貝

var a = {x:1} ;
var b = a ;
b.x = 2;

b 變而導(dǎo)致 a變鸣个，就叫淺拷貝

JS中對象的循環(huán)引用

var obj = {name:'frank'} ; 
obj.self = obj; 
obj.self.self.self.name; // "'frank"

上述代碼就可以實現(xiàn)對象的循環(huán)引用，原理是：為對象添加一個屬性布朦，屬性值就是對象自己（在內(nèi)存中就是對象引用的地址）囤萤，從而達到可以通過引用該對象的self屬性來引用對象本身。