Js中的Number

HaiWeiLian發表於2018-06-12

關於Number的常用方法和注意點

NaN

NaN 是代表非數字的特殊屬性

NaN 注意點

NaN不是一個數 但是屬於number型別

typeof NaN //"number"

NaNNaN不相等

NaN == NaN //false

何時會出現NaN

數字和 NaN 進行運算

1 [+ - * /] NaN = NaN

無效數學運算中

"a" - 1 || "a" * 1 || "a" / 1 = NaN  

數字 + undefined

1 + undefined = NaN

– 在進行運算的時候會 - * / 都會預設的呼叫 Number 方法 遇到無法轉換的都是 NaN
– 因為 + 在JS中不僅僅是數學運算, 遇到字串的時候屬於字串拼接 其他時候也會預設呼叫 Number 進行轉換
– 排除數字和 NaN 進行運算之外 也只有 數字 + undefined = NaN 具體的看Number()的轉換規則

Number()

Number() 方法把值轉換為數字

對字串進行轉換

Number(`66`) //66
Number(`66px`) //NaN

對字串進行轉換的時候只有 都是 數字才會轉換成數字 反之

對布林值進行轉換 truefalse

Number(true) //1
Number(false) //0

對布林值進行轉換的時候 true = 1 false = 0

nullundefined

Number(null) // 0
Number(undefined) //NaN

nullundefined 的區別請看 null和undefined的區別 阮老師的這篇文章詳細的介紹了

``[]

Number(``) //0
Number([]) //0

[] 轉換為數字 首先呼叫陣列的 toString 方法把 [] -> ``

isNaN(), Number.isNaN()

isNaN()是ES5方法 Number.isNaN()是ES6在 Number 物件上新增加方法

isNaN() 檢測一個值是否為NaN 會先呼叫Number() 將非數值的值轉為數值,再進行判斷

isNaN(NaN) //true
isNaN(1) //false
isNaN(`1px`) //true

Number.isNaN()只有對於NaN才返回true,非NaN一律返回false

isNaN(undefined) //true
Number.isNaN(undefined) //false 不會呼叫 Number
isNaN("NaN") // true
Number.isNaN("NaN") // false

Number.isInteger()

Number.isInteger() 判斷一個數值是否為整數。

Number.isInteger(11) // true
Number.isInteger(11.0) // true
Number.isInteger(11.1) // false

如果引數不是數值 都返回 false

Number.isInteger(null) //false
Number.isInteger(true) //false
Number.isInteger(``) //false

parseInt(), Number.parseInt() parseFloat(), Number.parseFloat()

去掉非數字部分 返回數字部分
parseInt() 遇到的第一個非數字停止

parseInt(`12px`) // 12
parseInt(`px12`) //NaN

parseFloat() 相比 parseInt() 可以多識別一個 .

parseFloat(`12.333px`) // 12
parseFloat(`px12.333`) //NaN

Number.parseInt() Number.parseFloat() 是 ES6 將全域性方法parseInt()parseFloat(),移植到Number物件上面,行為完全保持不變。

toFixed()

toFixed()保留小數點後幾位

1.14432.toFixed(2) // "1.14"
1.14532.toFixed(2) // "1.15"

toFixed()使用四捨五入法

Math 物件

Math是一個物件,裡面提供了很多運算元字的相關方法

Math.abs()

Math.abs() 獲取絕對值

Math.abs(-1) //1
Math.abs(-true) //1

Math.ceil()

Math.ceil 向上取整

Math.ceil(12.000001) //13
Math.ceil(-12.6) //-12

Math.floor()

Math.floor 向下取整

Math.floor(12.6) //12
Math.floor(-12.6) //-13

Math.round()

Math.round() 四捨五入

Math.round(12.5) //13
Math.round(12.4) //12
Math.round(-12.4) //12
Math.round(-12.5) //12
Math.round(-12.6) //13

Math.max(), Math.min()

Math.max()取一組數的最大值

Math.max(12, 23, 13, 24, 23, 24, 25, 34, 15); //34

Math.min 取一組數的最小值

Math.min(12, 23, 13, 24, 23, 24, 25, 34, 15); //12

Math.random()

Math.random 獲取[0-1]之間的隨機小數

Math.random() //0.8184921957461317
Math.random() //0.351685690699056
Math.random() //0.4972569148842041

Math.trunc()

Math.trunc() 用於去除一個數的小數部分 返回整數

Math.trunc(1.23456) //1
Math.trunc(1.23456) //1
Math.trunc(`3.43`) //3
Math.trunc(true) //1
Math.trunc(NaN) //NaN
Math.trunc(undefined) //NaN

通過上面列子 很明顯的是Math.trunc() 方法 遇到非數字會預設呼叫Number()進行轉換

Math.sign()

Math.sign() 判斷一個數是正數、負數、還是零。會預設呼叫Number()進行轉換
– 引數為正數 返回 1
– 引數為負數 返回 -1
– 引數為 0 返回 0
– 引數為-0 返回 -0
– 其他值 返回 NaN

Math.sign(6) // 1
Math.sign(-6) // -1
Math.sign(0) // 0
Math.sign(-0) // -0
Math.sign(null) // 0 
Math.sign(undefined) //NaN
Math.sign(NaN) // NaN

總結

– 獲取指定範圍內的隨機整數 程式碼片段-獲取指定範圍內的隨機整數

更多關於 ES6 Number 的擴充套件 還正在學習中 阮一峰ES6教程-數值的擴充套件

相關文章