js數據類型轉化

dmlllll 發布于2019-08-26 11:42 / 719人閱讀

數據類型轉化表

首先上數據類型轉化表，便于遇到問題直接查看

值	字符串	數字	布爾值	對象
undefined null	"undefined" "null"	NaN	false false	throws TypeError throws TypeError
true false	"true" "false"	1 0		new Boolean(true) new Boolean(false)
""(空字符串) "1.2"(非空，數字) "one"（非空，非數字）		0 1.2 NaN	false true true	new String("") new String("1.2") new String("one")
0 -0 NaN Infinity -Infinity 1（非零）	"0" "0" "NaN" "Infinity" "-Infinity" "1"		new Number(0) new Number(-0) new Number(NaN) new Number(Infinity) new Number(-Infinity) new Number(1)
{}（任意對象） [] [9] ["a"]	{}.toString() -> {}.valueOf() "" "9" 使用join()	{}.valueOf() -> {}.toString() 0 9 NaN NaN	true true true true

顯式轉換

顯示轉換最簡單的是使用Boolean()、Number()、String()或Object()構造函數

Number("3"); // 3
String(false); // "false"
Boolean([]); // true
Object(3); // new Number(3)

ps:值得注意的是，試圖把undefined或null轉換為對象，會拋出一個類型錯誤，而Object()顯示轉換不會，而是返回一個新創建的空對象

顯示轉換還有toString()、toFixed()、toExponential()、toPrecision()、parseInt()、parseFloat()方法，不細說

隱式轉換

隱式轉換分為三種：

將值轉換為原始值，ToPrimitive(input, PreferredType)

將值轉化為數字，ToNumber()

將值轉化為字符串，ToString()

原始類型數據轉化相對比較簡單，下面值看對象到原始類型的轉換方式

對象的toString()和valueOf()方法

所有對象繼承了兩個轉換方法：toString()

一般對象轉化成[object object] {x: 1, y: 2}.toString(); // "[object object]"

數組轉化成元素間加逗號 [1, 2, 3].toString(); // "1,2,3"

函數轉化成定義(function(x){}).toString(); // "function(x) {}"

正則轉化為直接量字符串 /d+/g.toString(); // "/d+/g"

日期轉化為日期字符串 new Date(2000, 1, 1).toString(); // "Tue Feb 01 2000 00:00:00 GMT+0800 (中國標準時間)"

valueOf()方法

大多數對象無法真正表示為一個原始值，valueOf()簡單返回對象本身

日期對象是一個特例，返回毫秒數 new Date(2010, 0, 1).valueOf(); // 12623328000

對象到字符串的轉換

如果對象具有toString()方法，則調用這個方法，如果它返回一個原始值，將這個值轉化為字符串，并返回這個字符串結果

如果對象沒有toString()方法，或者個這個方法不返回一個原始值，那么就會調用valueOf()方法。如果存在這個方法，則調用它，如果返回值是一個原始值，將這個值轉化為只服從，并返回這個字符串結果

否則，就會拋出一個類型錯誤異常

對象到數字的轉換

如果對象具有valueOf()方法，后者返回個億原始值，則將這個原始值轉化為數字，并返回這個數字

否則，如果對象有toString()方法，后者返回一個原始值，并轉化成數字返回

否則，拋出一個類型錯誤異常

舉個栗子： ({} + {}) = ?

兩個對象的值進行+運算符，要先進行隱式轉換成原始類型才能計算
1. ToPrimitive轉換，因為沒有指定PreferredType類型，默認為Number
2. 執行`valueOf()`方法，`{}.valueOf()`返回的還是{}對象
3. 繼續執行`toString()`方法，`({}).toString()`返回`[Object Object]`，是原始值

所以最后結果：[Object Object][Object Object]
ps:在Firefox中返回結果為NaN，因為第一個{}被當作一個代碼塊，沒有解析轉換，變成了+{}，也就是+[Object Object]，最終變成NaN

==元算符隱式轉換

==運算符應用和考察點很多，直接上ES5規范文檔

比較運算 x==y, 其中 x 和 y 是值，返回 true 或者 false。這樣的比較按如下方式進行：
1、若 Type(x) 與 Type(y) 相同， 則

    1* 若 Type(x) 為 Undefined， 返回 true。
    2* 若 Type(x) 為 Null， 返回 true。
    3* 若 Type(x) 為 Number， 則

        (1)、若 x 為 NaN， 返回 false。
        (2)、若 y 為 NaN， 返回 false。
        (3)、若 x 與 y 為相等數值， 返回 true。
        (4)、若 x 為 +0 且 y 為 ?0， 返回 true。
        (5)、若 x 為 ?0 且 y 為 +0， 返回 true。
        (6)、返回 false。

    4* 若 Type(x) 為 String, 則當 x 和 y 為完全相同的字符序列（長度相等且相同字符在相同位置）時返回 true。 否則， 返回 false。
    5* 若 Type(x) 為 Boolean, 當 x 和 y 為同為 true 或者同為 false 時返回 true。 否則， 返回 false。
    6*  當 x 和 y 為引用同一對象時返回 true。否則，返回 false。
2、若 x 為 null 且 y 為 undefined， 返回 true。
3、若 x 為 undefined 且 y 為 null， 返回 true。
4、若 Type(x) 為 Number 且 Type(y) 為 String，返回比較 x == ToNumber(y) 的結果。
5、若 Type(x) 為 String 且 Type(y) 為 Number，返回比較 ToNumber(x) == y 的結果。
6、若 Type(x) 為 Boolean， 返回比較 ToNumber(x) == y 的結果。
7、若 Type(y) 為 Boolean， 返回比較 x == ToNumber(y) 的結果。
8、若 Type(x) 為 String 或 Number，且 Type(y) 為 Object，返回比較 x == ToPrimitive(y) 的結果。
9、若 Type(x) 為 Object 且 Type(y) 為 String 或 Number， 返回比較 ToPrimitive(x) == y 的結果。
10、返回 false。

總結起來有如下幾點值得注意

NaN !== NaN

x,y 為null、undefined兩者中一個 // 返回true

x、y為Number和String類型時，則轉換為Number類型比較

有Boolean類型時，Boolean轉化為Number類型比較

一個Object類型，一個String或Number類型，將Object類型進行原始轉換后，按上面流程進行原始值比較

舉一個栗子：

var a = {
  valueOf: function () {
     return1;
  },
  toString: function () {
     return"123"
  }
}
console.log(rue == a) // true;

1. 首先，x與y類型不同，x為boolean類型，則進行ToNumber轉換為1,為number類型
2. x為number，y為object類型，對y進行原始轉換，ToPrimitive(a, ?),沒有指定轉換類型，默認number類型
3. ToPrimitive(a, Number)首先調用valueOf方法，返回1，得到原始類型1。
4. 1 == 1， 返回true

同理適用于>、<、!=、+運算符的隱式轉換（但要除去日期對象）

GPU云服務器云服務器數據類型轉化 js js轉化數據類型 js數據類型轉化類型轉化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107384.html

JS知識—面試準備（一）

摘要：使用結束后會重新壓扁自己，讓自己不是對象。作用用來判斷某個對象是否含有指定的自身屬性語法參數要檢測的對象要檢測的屬性名稱。但是函數作用域外部訪問不到函數內部的變量，對象，函數。 1.JS內置類型分為基本數據類型和Object.基本數據類型有：null,undefined,string,boolean,number,symbol. console.log(typeof null...

warkiz 2019-08-29 16:14 評論0 收藏0
JS知識—面試準備（一）

摘要：使用結束后會重新壓扁自己，讓自己不是對象。作用用來判斷某個對象是否含有指定的自身屬性語法參數要檢測的對象要檢測的屬性名稱。但是函數作用域外部訪問不到函數內部的變量，對象，函數。 1.JS內置類型分為基本數據類型和Object.基本數據類型有：null,undefined,string,boolean,number,symbol. console.log(typeof null...

wapeyang 2019-08-23 10:39 評論0 收藏0
JS知識—面試準備（一）

摘要：使用結束后會重新壓扁自己，讓自己不是對象。作用用來判斷某個對象是否含有指定的自身屬性語法參數要檢測的對象要檢測的屬性名稱。但是函數作用域外部訪問不到函數內部的變量，對象，函數。 1.JS內置類型分為基本數據類型和Object.基本數據類型有：null,undefined,string,boolean,number,symbol. console.log(typeof null...

zhangrxiang 2019-08-02 11:06 評論0 收藏0
【JS基礎】類型轉換知多少

摘要：正確的解釋是允許在相等比較中進行強制類型轉換，而不允許。參考資料小議下字符串比較大小中的強制類型轉換核心概念類型轉換對象和方法隱式類型轉換小結開胃菜先說一個題外話，我在工作中遇到一個問題，需要比較 08:00 和 09:00 的大小，最后我找到三種方法：在兩個字符串前后各拼接相同的年月日和秒，拼成完整的時間格式進行比較： var head = 2016-01-01 var fo...

AdolphLWQ 2019-08-23 17:59 評論0 收藏0
原型模式故事鏈(3)--JS的數據類型、以及區別、區分、轉化

摘要：所以不論你媽媽是喊，狗蛋回家吃飯了，還是喊小明回家吃飯了，其實喊的都是你。當然的嘛狗蛋買了件新衣服，小明當然就有這件新衣服了。。。上一章--原型鏈講解：傳送門：https://segmentfault.com/a/11... 在上一章講解原型鏈時提到了：所有的引用類型都有一個_proto_屬性，稱之為隱式原型。那么引用類型是什么鬼？盡量簡單的講解一下javascript中的數據類...

stdying 2019-08-02 11:49 評論0 收藏0