>[success] ## 類型裝換  >[danger] ##### StringToNumber ~~~ 1.這里指的是用Number 方法將字符串轉換成數字，支持十進制、二進制、八進制和十六進制 2.支持正負號科學計數法，可以使用大寫或者小寫的 e 來 3.去掉首尾空格后的純數字字符串中含有的數字。如果剩余字符串為空，則轉換結果為 0。否則，將會從剩余字符串 中“讀取”數字。當類型轉換出現 error 時返回 NaN。 ~~~ * 案例 ~~~ console.log(Number('30')) // 十進制 console.log(Number('0b111')) // 二進制 console.log(Number('0o13')) // 八進制 console.log(Number('0xFF')) // 十六進制 console.log(Number('1e3')) // 科學計數法 console.log(Number('-1e-2')) // 科學計數法 打印結果： 30 7 11 255 1000 -0.01 ~~~ >[danger] ##### NumberToString ~~~ 1.只需要注意：當 Number 絕對值較大或者較小時，字符串表示則是使用科學計數法表示的 ~~~ * 案例 ~~~ console.log(String(1000000000000000000000000000000000000000)) 打印結果： 1e+39 ~~~ >[danger] ##### 裝箱轉換 ~~~ 1.每一種基本類型 Number、String、Boolean、Symbol 在對象中都有對應的類，所謂裝箱轉換， 正是把基本類型轉換為對應的對象 ~~~ * 拋開symbol 看其他類型的裝箱轉換 ~~~ // Number 1 new Number(1) // String 'aaa' new String('aaa') // Boolean true new Boolean(true) ~~~ * 特殊的Symbol ~~~ 1.由于Symbol 類型是不支持new 來調用的，因此轉換我們可以使用一個call來幫助 ~~~ ~~~ var symbolObject = (function(){ return this; }).call(Symbol("a")); console.log(typeof symbolObject); //object console.log(symbolObject instanceof Symbol); //true console.log(symbolObject.constructor == Symbol); //true ~~~ >[danger] ##### 拆箱轉換 ~~~ 1.在 JavaScript 標準中，規定了 ToPrimitive 函數，它是對象類型到基本類型的轉換（即，拆箱轉換）。 2.拆箱轉換會嘗試調用 valueOf 和 toString 來獲得拆箱后的基本類型。如果 valueOf 和 toString 都不存在， 或者沒有返回基本類型，則會產生類型錯誤 TypeError。 ~~~ * 數字的拆箱轉換 ~~~ 1.當執行o*2 時候由于2 是數字因此先調用valueOf,沒有值 就調用toString，也沒值就報錯 2.如果是 o+'' 就會先調用toString沒值，調用valueOf 沒值就報錯 ~~~ ~~~ var o = { valueOf : () => {console.log("valueOf"); return {}}, toString : () => {console.log("toString"); return {}} } o * 2 // valueOf // toString // TypeError ~~~ * es6允許對象通過顯式指定 @@toPrimitive Symbol 來覆蓋原有的行為 [toPrimitive ](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) ~~~ var o = { valueOf : () => {console.log("valueOf"); return {}}, toString : () => {console.log("toString"); return {}} } o[Symbol.toPrimitive] = () => {console.log("toPrimitive"); return "hello"} console.log(o + "") // toPrimitive // hello ~~~ >[info] ## 觸發類型轉換的一些操作 ~~~ 1.運算相關的操作符包括 +、-、+=、++、* 、/、%、<<、& 等。 2.數據比較相關的操作符包括 >、<、== 、<=、>=、===。 3.邏輯判斷相關的操作符包括 &&、!、||、三目運算符。 ~~~ >[danger] ##### 神奇的 + 號 ~~~ 1.'+' 可表示數字計算，字符串拼接 1.1.當加號兩邊一邊是字符串時候為字符串拼接 1.2.當加號兩邊為數字時候是數字計算 1.3.加號兩邊有一邊是對象的時候先調用"obj[Symbol.toPrimitive]('default')" => '沒有這個屬性，則再次調用valueOf' => 'valueOf獲取的不是原始值，則繼續toString，此時獲取的結果是字符串，“+”就變為字符串拼接了' ,說明原始 值像const a = {}; a.valueOf() 得到的是{ } 就是非基本類型原始值，則會繼續調用toString 2.'+' 只有一邊 ，一般都是轉換為數字，舉個例子 +true 則為 1 ~~~ * 對1.3 說明 ~~~ console.log(10 + [10]); // 沒有Symbol.toPrimitive -> valueOf獲取的也不是原始值 -> 調用toString "10" => "1010" console.log(10 + {}); // 沒有Symbol.toPrimitive -> valueOf獲取的也不是原始值 -> 調用toString "[object Object]" => "10[object Object]" console.log(10 + new Date()); // 調用日期的Symbol.toPrimitive('default') => "10Sun Jul 25 2021 11:28:37 GMT+0800 (中國標準時間)" console.log(10 + new Number(10)); // 沒有Symbol.toPrimitive -> valueOf 10 => 20 console.log(10 + new String('10')); // 沒有Symbol.toPrimitive -> valueOf "10" => "1010" // -------------------- {}+1 直接在瀏覽器輸入顯示結果 為 1 原因是 此時{} 不代表對象而是'塊' ，也就是只有 +1有自己含義，即為1 ~~~ >[danger] ##### '==' 和 '===' ~~~ 1.'=='相等，兩邊數據類型不同，需要先轉為相同類型，然后再進行比較 @1 對象==字符串 對象轉字符串「Symbol.toPrimitive -> valueOf -> toString」 @2 null==undefined -> true null/undefined和其他任何值都不相等 null===undefined -> false @3 對象==對象 比較的是堆內存地址，地址相同則相等 @4 NaN!==NaN @5 除了以上情況，只要兩邊類型不一致，剩下的都是轉換為數字，然后再進行比較的 2.'==='絕對相等，如果兩邊類型不同，則直接是false，不會轉換數據類型「推薦」 ~~~ >[danger] ##### 求a 滿足a == 1 && a == 2 && a == 3 ~~~ 1.首先明確問題 即問題中使用的是雙等,當雙等時在和數字比較時候需要轉換為數字，轉換數字的過程會依次調用 1.1.Symbol.toPrimitive 1.2.valueOf 獲取的非原始值則繼續向下找 1.3.toString 即對這三種方法任意一種重寫即可 2.利用對象基于數據劫持完成對應的操作，基于 var/function 聲明的變量，其實可以看做 var a=? ==> window.a=?，即只要劫持window 對象中的a 即可，使用劫持'proxy' 或者'Object.defineProperty' 3.總結一個誤區，比較時候調用是內部機制默認觸發其對應方法行為，在這期間我錯誤思路記錄 我想讓a 通過閉包連續調用則出現下面代碼 var i = 0 window.a = (function () { return ++this.i })() if (a == 1 && a == 2 && a == 3) { console.log('OK') } ~~~ ~~~ // 解決方案一：利用 == 比較的時候，會把對象轉換為數字 Number(a) // + Symbol.toPrimitive // + valueOf 獲取的非原始值則繼續向下找 // + toString // + 把字符串變為數字 var a = { i: 0, } a[Symbol.toPrimitive] = function toPrimitive() { // this -> a return ++this.i } if (a == 1 && a == 2 && a == 3) { console.log('OK') } var a = [1, 2, 3] a.toString = a.shift if (a == 1 && a == 2 && a == 3) { console.log('OK') } // 解決方案二：在全局上下文中，基于 var/function 聲明的變量，并不是給VO(G)設置的全局變量「基于let/const聲明的變量才是」，而是給GO(window)全局對象設置的屬性 var a=? ==> window.a=? // 我們基于數據劫持完成對應的操作 var i = 0 Object.defineProperty(window, 'a', { get() { return ++i }, }) if (a == 1 && a == 2 && a == 3) { console.log('OK') } ~~~