JS的數據類型轉換

如何將其他的數據類型轉換成String字符串類型?

  • ?.toString()
  • String(?)
  • ''+ ?
    ps:上面的問號?代表是其他數據類型,這樣可以快速得知使用方法

1:?.toString()

toString方法適用于number類型和boolean類型,但是將數字轉換為字符串時,要特別注意,如

//錯誤寫法
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方法結果不正確,結果永遠是"[object Object]",函數和數組是比較特別,具體請看代碼

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

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

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

方法2:String(?)

String() 該方法適用于所有數據類型(除了對象,結果同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:''+ ?

注:這種方法的原理是:‘+’ 運算符只能相加相同的數據類型,如果兩邊的數據類型不同,他會優先將其轉換成字符串來相加。
''+ ? 即使用+運算符加上空字符串(同樣對object無效)該方法適用于所有數據類型(除了對象,結果同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"

上面介紹的三種轉換成字符串的方法都不適用于對象object,所得結果都是"[object Object]",但是對于函數和數組是可以轉換的

  • 三種轉換成字符串的方法對于對象來說,是特殊的
  • 使用這種方法?.toString()報錯,只需給需要轉換的東西加上個括號,具體例子請看上面

如何將其他的數據類型轉換成Number數值類型?

注:parseInt逐個解析字符,而Number函數整體轉換字符串的類型。parseInt,parseFloat和Number函數都會自動過濾一個字符串前導和后綴的空格。parseInt(?,?)說明parseInt可以有兩個參數

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

方法1:Number(?)

使用Number函數,可以將任意類型的值轉化成數值。Number函數將字符串轉為數值,要比parseInt函數嚴格很多。基本上,只要有一個字符無法轉成數值,整個字符串就會被轉為NaN
下面分成兩種情況討論,一種是參數是原始類型的值,另一種是參數是對象。
(1)原始類型值
示例如下:

// 數值:轉換后還是原來的值
Number(324) // 324

// 字符串:如果可以被解析為數值,則轉換為相應的數值
Number('324') // 324

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

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

// 布爾值:true 轉成 1,false 轉成 0
Number(true) // 1
Number(false) // 0

// undefined:轉成 NaN
Number(undefined) // NaN

// null:轉成0
Number(null) // 0

Number('42 cats') // NaN

(2)對象
Number方法的參數是對象時,將返回NaN,除非是包含單個數值的數組。
示例如下:

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

Number背后的轉換規則比較復雜。
第一步,調用對象自身的valueOf方法。如果返回原始類型的值,則直接對該值使用Number函數,不再進行后續步驟。
第二步,如果valueOf方法返回的還是對象,則改為調用對象自身的toString方法。如果toString方法返回原始類型的值,則對該值使用Number函數,不再進行后續步驟。
第三步,如果toString方法返回的是對象,就報錯。

方法2:parseInt()

parseInt方法用于將字符串轉為整數。
如:parseInt('123') // 123
如果字符串頭部有空格,空格會被自動去除。parseInt(' 81') // 81
如果parseInt的參數不是字符串,則會先轉為字符串再轉換。

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

字符串轉為整數的時候,是一個個字符依次轉換,如果遇到不能轉為數字的字符,就不再進行下去,返回已經轉好的部分。

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

如果字符串的第一個字符不能轉化為數字(后面跟著數字的正負號除外),返回NaN。

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

注:parseInt()方法默認轉換成十進制,不過需要注意的是,如果參數本身就是number類型,且是0x開頭(16進制),或0o開頭(八進制),0b開頭(二進制),0開頭且后面的數字沒有8和9(視為八進制),那么parseInt方法會將其以相應的進制轉換成十進制展示出來。

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

如果字符串以0x或0X開頭,parseInt會將其按照十六進制數解析。

parseInt('0x10') // 16

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

parseInt('011') // 11

因此,為了防止意外解析成其他進制,建議添加第二個參數按照特定進制解析:如:
如果第二個參數不是數值,會被自動轉為一個整數。這個整數只有在2到36之間,才能得到有意義的結果,超出這個范圍,則返回NaN。如果第二個參數是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方法用于將一個字符串轉為浮點數。

parseFloat('3.14') // 3.14

如果字符串符合科學計數法,則會進行相應的轉換。

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

如果字符串包含不能轉為浮點數的字符,則不再進行往后轉換,返回已經轉好的部分。

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: + '?'

  • 這里的+并不是取正值的意思,負數一樣可行,如:+ '-011' ; // -11
    注:上面介紹的使用運算符的轉換方法,字符串不能有除了數字外的其他字符(正負號,表示進制的標識除外),字符串中,0b、0x、0o開頭會以對應表示的進制解析,如果是'011',則會解析成十進制而不是二進制,小數同樣可以用這兩種方法進行轉換
  • Number方法基本上,只要有一個字符無法轉成數值,整個字符串就會被轉為NaN
  • parseInt方法為了防止意外解析成其他進制,建議添加第二個參數按照特定進制解析
  • parseFloat會將空字符串轉為NaN

如何將將其他數據類型轉換為Boolean布爾類型?

Boolean() ,如:

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

雙重取反:!! x ,如:

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

五個falsy值,即轉換成Boolean后為false的值:
0 、 NaN 、 null 、 undefined 、‘’(空字符串)

JS中的數據在內存中的存儲方式

什么是內存呢,舉個例子:

你買一個8G 的內存條,操作系統開機即占用 512MB,Chrome 打開即占用 1G 內存, Chrome 各每個網頁分配一定數量的內存, 這些內存要分給頁面渲染器、網絡模塊、瀏覽器外殼和 JS 引擎(V8引擎)。
JS 引擎將內存分為代碼區和數據區, 我們只研究數據區。 數據區分為 Stack(棧內存)Heap(堆內存)。 簡單類型的數據(如Number,string等)直接存在 Stack 里, 復雜類型的數據(object對象)是把 Heap 地址存在 Stack 里。

對象存儲數據的方式

對象的存儲方式是在stack棧內存存儲一個地址,形成對對象的引用,地址指向heap堆內存的某個位置,object是對象的引用。它在stack棧內存存的是地址,而不像其他數據類型直接把內容存在stack棧內存

垃圾回收

JS中的垃圾回收機制:如果一個對象沒有被引用,它就是垃圾,將會被回收。(時間并不確定的)
內存泄漏就和垃圾回收機制有一定的聯系:由于瀏覽器的一些bug,使得本應被被標記為垃圾的數據沒有被標記,而這些垃圾數據占用的內存將永遠被占用,哪怕你把當前頁面關掉都不會被釋放,除非直接關掉整個瀏覽器。(IE6就有此類bug)
解決方法:(但是要抵制IE低版本瀏覽器)

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

四個關于內存的題目

畫內存圖(解決問題的方法),只要你不畫圖,就會錯,以不變應萬變
題目一:

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

使用內存圖解決思路:

image

題目二:

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

image

題目三:

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

image

題目四:

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

image

面試題

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還是之前的地址,并沒有發生改變

注:這些箭頭并不是真實存在的,只是虛擬的示意

image

深拷貝與淺拷貝

深拷貝:

var a = 1;
var b = a;
b = 2 ;
//請問a是什么?

a的值仍然還是1。
b 變而不影響 a,就叫深拷貝(簡單數據類型的賦值都是深拷貝)
淺拷貝

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

b 變而導致 a變,就叫淺拷貝

JS中對象的循環引用

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

上述代碼就可以實現對象的循環引用,原理是:為對象添加一個屬性,屬性值就是對象自己(在內存中就是對象引用的地址),從而達到可以通過引用該對象的self屬性來引用對象本身。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,431評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,637評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,555評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,900評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,629評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,976評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,976評論 3 448
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,139評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,686評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,411評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,641評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,129評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,820評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,233評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,567評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,362評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,604評論 2 380

推薦閱讀更多精彩內容