首頁 > web前端 > 前端問答 > es6 number物件的新增方法有哪些

es6 number物件的新增方法有哪些

青灯夜游
發布: 2022-10-26 17:57:15
原創
1499 人瀏覽過

es6 number新增方法有:1、“Number.isFinite()”,可判斷指定值是否為一個有限的數值;2、“Number.isNaN()”,可偵測變數是否為NaN;3、“Number.parseInt()”,可將字串轉換為整數;4、“Number.parseFloat()”,可將字串轉換為浮點數;5、“Number.isInteger()”,可判斷值是否為整數。

es6 number物件的新增方法有哪些

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

在 ES5 中,全域下的 isFinite () 和 isNaN () 兩種方法有型別轉換,對最終的判斷結果有歧義。 ES6 在 Number 物件上,新提供了 Number.isFinite () 和 Number.isNaN () 兩個方法,更健全地進行數值的判斷,接下來讓我看看這兩種方法。

Number.isFinite()


#在ES5 中有全域的isFinite() 函數用來判斷被傳入的參數值是否為一個有限的數值,如果參數是字串,會先轉為數值,然後在進行驗證。

isFinite(Infinity);  // false
isFinite(NaN);       // false
isFinite(-Infinity); // false

isFinite(0);         // true
isFinite(2e64);      // true
isFinite('2e64');    // true

isFinite("0");       // true
登入後複製

上面的程式碼可以看出,字串也會先轉為數值再進行判斷,而ES6 Number 物件上提供的 isFinite() 更健壯,和全域的 isFinite() 函數相比,這個方法不會強制將一個非數值的參數轉換成數值,這意味著,只有數值類型的值,且是有窮的(finite),才會回傳 true。

Number.isFinite(Infinity);  // false
Number.isFinite(NaN);       // false
Number.isFinite(-Infinity); // false

Number.isFinite(0);         // true
Number.isFinite(2e64);      // true
Number.isFinite('2e64');	// false

Number.isFinite('0');       // false
登入後複製

Number.isNaN()


在JavaScript 中與其它的值不同,NaN 不能透過相等運算子(= = 和===)來判斷,因為NaN == NaN 和NaN === NaN 都會回傳false。因此,判斷一個值是不是 NaN 是有必要的。

1、NaN 值的產生

當算術運算的結果傳回一個未定義的或無法表示的值時,NaN 就產生了。但是,NaN 並不一定用來表示某些值超出表示範圍的情況。

  • 將某些非數值強制轉換為數值的時候,會得到 NaN。

  • 0 除以 0 會回傳 NaN —— 但是其他數除以 0 則不會回傳 NaN。

我們知道可以使用 Number() 方法進行型別轉換,以下列舉被強制型別轉換為 NaN 的範例:

Number(undefined)				// NaN
Number('undefined')				// NaN
Number('string')				// NaN
Number({})						// NaN
Number('10,3')					// NaN
Number('123ABC')				// NaN
Number(new Date().toString())	// NaN
登入後複製

上面的範例可以看出,很多值在強制類型轉換下轉為NaN,針對這樣的值去進行判斷無疑是有問題的,下面我們來看下isNaN () 的問題。

2、isNaN () 的問題

預設情況全域下存在方法isNaN () 用了判斷是否為NaN 值,它要求接收的是數值類型的參數,但是當參數不是Number 類型, isNaN 函數會先嘗試將這個參數轉換為數值,然後才會對轉換後的結果是否是NaN 進行判斷。

實例:

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN('undefined')// true
isNaN({});        // true

isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false

// strings
isNaN("37");      // false: 可以被转换成数值37
isNaN("37.37");   // false: 可以被转换成数值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN("");        // false: 空字符串被转换成0
isNaN(" ");       // false: 包含空格的字符串被转换成0

// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true

isNaN("imooc")   // true: "blabla"不能转换成数值
                 // 转换成数值失败, 返回NaN
登入後複製

結合上面 NaN 是如何產生的例子的結果可以看出,使用 isNaN 來判斷回傳的是 true,這顯然不是我們想要的結果。針對這樣的問題,ES6 做了修補,下面我們來看 ES6 中的 isNaN 方法。

3、Number.isNaN () 詳情

ES6 提供了Number.isNaN(x) ,透過這個方法來偵測變數x 是否是一個NaN 將會是一種可靠的做法,它不會對所判斷的值進行強制型別轉換。

Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0)       // true

// 下面这几个如果使用全局的 isNaN() 时,会返回 true。
Number.isNaN("NaN");      // false,字符串 "NaN" 不会被隐式转换成数字 NaN。
Number.isNaN(undefined);  // false
Number.isNaN('undefined');// false
Number.isNaN({});         // false
Number.isNaN("blabla");   // false

Number.isNaN(true);   	 // false
Number.isNaN(null);   	 // false
Number.isNaN(37);   	 // false
Number.isNaN("37");   	 // false
Number.isNaN("37.37");	 // false
Number.isNaN("");   	 // false
Number.isNaN(" ");   	 // false
登入後複製

透過上面的實例,基本上覆寫了現有程式的所有情況,不會出現使用全域下的 isNaN() 多所帶來的問題。所有建議使用 Number.isNaN(x) 方式來判斷是否為 NaN。在不支援 Number.isNaN 函數情況下,可以透過表達式 (x != x) 來偵測變數 x 是不是 NaN 會更可靠。

Number.parseInt()&Number.parseFloat()


為了保持方法上的統一,把全域下的 parseInt( ) 和 parseFloat() 移植到ES6 的Number 物件上。

ES6 的 Number 物件上提供的 Number.isFinite () 和 Number.isNaN () 兩個函數是相同的,如何證明 Number 下的這兩個方法只是移植全域的呢?可以利用 === 運算子來判斷,如下實例:

Number.parseInt === parseInt;				// true
Number.parseFloat === parseFloat;		// true
登入後複製

上面的程式碼回傳的結果都為 ture 說明此兩個函數和全域是一樣的,沒有改變。特定的使用方法可以參考 ES5 中的 parseInt() 和 parseFloat() 函數。

// ES5的写法
parseInt('12.34') 						// 12
parseFloat('123.45#') 				// 123.45

// ES6的写法
Number.parseInt('12.34') 			// 12
Number.parseFloat('123.45#')  // 123.45
登入後複製

將這兩個全域方法移植到 Number 物件上,為了逐步減少全域性方法,使語言逐步模組化。

Number.isInteger()


#在學習這個函數之前,我們先來回顧一下,我們是怎麼判斷一個值為整數的?

1、判断一个值为整数

一种方法是:任何整数都会被 1 整除,即余数是 0。利用这个规则来判断是否是整数。就有如下函数:

function isInteger(value) {
	return typeof value === 'number' && value%1 === 0;
}
isInteger(5) 		// true
isInteger(5.5) 	// false
isInteger('') 	// false
isInteger('8') 	// false
isInteger(true) // false
isInteger([]) 	// false
登入後複製

另一种方法是:使用 Math.round、Math.ceil、Math.floor 判断,因为整数取整后还是等于自己。利用这个特性来判断是否是整数,使用 Math.floor 示例,如下:

function isInteger(value) {
	return Math.floor(value) === value;
}
isInteger(5) 		// true
isInteger(5.5) 	// false
isInteger('') 	// false
isInteger('8') 	// false
isInteger(true) // false
isInteger([]) 	// false
登入後複製

上面的两种方法算是比较常用的判断方式,其他的一些方式都存在一些问题,这里就不一一列举了。但是,这两种方法都不够简洁,ES6 把判断整数提升到了语言层面,下面我们来看下 Number.isInteger() 的使用。

2、Number.isInteger () 的用法

Number.isInteger() 是 ES6 新增的函数,用来判断给定的参数是否为整数。

Number.isInteger(25) // true
Number.isInteger(25.1) // false
登入後複製

如果被检测的值是整数,则返回 true,否则返回 false。注意 NaN 和正负 Infinity 不是整数。

Number.isInteger(0);         // true
Number.isInteger(1);         // true
Number.isInteger(-100000);   // true

Number.isInteger(0.8);       // false
Number.isInteger(Math.PI);   // false

Number.isInteger(Infinity);  // false
Number.isInteger(-Infinity); // false
Number.isInteger("100");     // false
Number.isInteger(true);      // false
Number.isInteger(false);     // false
Number.isInteger([1]);       // false
登入後複製

上面的代码基本涵盖了 JavaScript 中的值的判断,在一些不支持 ES6 语法的浏览器中可以使用上面的两种方式进行 Polyfill 处理。

Number.isSafeInteger()


Number.isSafeInteger() 是 ES6 新增的函数,用来判断传入的参数值是否是一个 “安全整数”(safe integer)在数值扩展的 小节 我们介绍了最大安全整数和最小安全整数,不记得的同学可以跳过去看看。

一个安全整数是一个符合下面条件的整数:

  • 可以准确地表示为一个 IEEE-754 双精度数字;

  • 其 IEEE-754 表示不能是舍入任何其他整数以适应 IEEE-754 表示的结果。

比如,2e53 - 1 是一个安全整数,它能被精确表示,在任何 IEEE-754 舍入模式(rounding mode)下,没有其他整数舍入结果为该整数。作为对比,2e53 就不是一个安全整数,它能够使用 IEEE-754 表示,但是 2e53 + 1 不能使用 IEEE-754 直接表示,在就近舍入(round-to-nearest)和向零舍入中,会被舍入为 2e53。

安全整数范围为 -(2e53 - 1)到 2e53 - 1 之间的整数,包含 -(2e53 - 1)和 2e53 - 1。

Number.isSafeInteger(3);                    // true
Number.isSafeInteger(Math.pow(2, 53))       // false
Number.isSafeInteger(Math.pow(2, 53) - 1)   // true
Number.isSafeInteger(NaN);                  // false
Number.isSafeInteger(Infinity);             // false
Number.isSafeInteger("3");                  // false
Number.isSafeInteger(3.1);                  // false
Number.isSafeInteger(3.0);                  // true
登入後複製

【相关推荐:javascript视频教程编程视频

以上是es6 number物件的新增方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板