建站
咨詢
售后
建站咨詢
新聞中心
自ES6發(fā)行以來，許多新的，便捷的原生方法已添加到JavaScript的新標準中。
然而，我在GitHub的代碼庫中看到了很多舊的代碼。這并不意味著它們一定是壞的，但我要介紹的這些功能將幫助你的代碼更可讀，更漂亮。
Number.isNaN vs. isNaN
NaN 是數(shù)字類型。
- typeof NaN === 'number' // true
因此，你無法區(qū)分 NaN 和數(shù)字。
甚至 Object.prototype.toString.call 都為 NaN 和數(shù)字返回 [object Number]。你可能已經(jīng)知道可以使用 isNaN 方法檢查參數(shù)是否為NaN。但是從ES6開始，number構(gòu)造函數(shù)已開始將 isNaN 作為其方法。那有什么不同?
- isNaN——檢查傳遞的值是不是數(shù)字還是不能轉(zhuǎn)換為數(shù)字。
- Number.isNaN——檢查傳遞的值是否不是數(shù)字。
下面是這個例子。
- Number.isNaN({});
- // <- false, {} is not NaN
- Number.isNaN('ponyfoo')
- // <- false, 'ponyfoo' is not NaN
- Number.isNaN(NaN)
- // <- true, NaN is NaN
- Number.isNaN('pony'/'foo')
- // <- true, 'pony'/'foo' is NaN, NaN is NaN
- isNaN({});
- // <- true, {} is not a number
- isNaN('ponyfoo')
- // <- true, 'ponyfoo' is not a number
- isNaN(NaN)
- // <- true, NaN is not a number
- isNaN('pony'/'foo')
- // <- true, 'pony'/'foo' is NaN, NaN is not a number
Number.isFinite vs. isFinite
在JavaScript中，諸如1/0之類的計算不會產(chǎn)生錯誤。相反，它為你提供了 Infinit(無限)，這是一個全局屬性。
那么，如何檢查一個值是否是Infinit呢?你不能，但是你可以用 isFinite 和 Number.isFinite 來檢查一個值是否是有限值。
它們的工作原理基本相同，但彼此之間略有不同。
- isFinite——檢查傳遞的值是否有限。如果傳遞的值的類型不是數(shù)字，則將其轉(zhuǎn)換為數(shù)字。
- Number.isFinite——檢查傳遞的值是否有限。傳遞的值不會轉(zhuǎn)換為數(shù)字。
示例：
- Number.isFinite(Infinity) // false
- isFinite(Infinity) // false
- Number.isFinite(NaN) // false
- isFinite(NaN) // false
- Number.isFinite(2e64) // true
- isFinite(2e64) // true
- Number.isFinite(undefined) // false
- isFinite(undefined) // false
- Number.isFinite(null) // false
- isFinite(null) // true
- Number.isFinite('0') // false
- isFinite('0') // true
Math.floor vs. Math.trunc
在過去，當你需要把數(shù)字取整時你可能會用 Math.floor。但是從現(xiàn)在開始，如果你真正想要的只是整數(shù)部分，請嘗試使用 Math.trunc。
- Math.floor——返回小于或等于給定數(shù)字的最大整數(shù)。
- Math.trunc——截斷點和右邊的數(shù)字。
基本上，如果給定數(shù)為正，它們將為你返回完全相同的結(jié)果。但是，如果給定數(shù)為負數(shù)，結(jié)果將有所不同。
- Math.floor(1.23) // 1
- Math.trunc(1.23) // 1
- Math.floor(-5.3) // -6
- Math.trunc(-5.3) // -5
- Math.floor(-0.1) // -1
- Math.trunc(-0.1) // -0
Array.prototype.indexOf vs. Array.prototype.includes
當你在給定數(shù)組中尋找某個值時，如何找到它?我已經(jīng)看到很多開發(fā)人員都使用 Array.prototype.indexOf，如以下示例所示。
- const arr = [1, 2, 3, 4];
- if (arr.indexOf(1) > -1) {
- ...
- }
他們的區(qū)別如下：
- Array.prototype.indexOf——返回可以在數(shù)組中找到給定元素的第一個索引;如果不存在，則返回 -1
- Array.prototype.includes——檢查給定數(shù)組是否包含你要查找的特定值，并返回 true / false 作為結(jié)果
示例：
- const students = ['Hong', 'James', 'Mark', 'James'];
- students.indexOf('Mark') // 1
- students.includes('James') // true
- students.indexOf('Sam') // -1
- students.includes('Sam') // false
小心!由于Unicode差異，傳遞的值區(qū)分大小寫。
String.prototype.repeat vs. 手動循環(huán)
在添加這個功能之前，你制作字符串的方式是復制字符串，比如 abcabcabc，然后將其串聯(lián)成一個空的字符串，無論你想要多少次，都可以將其串聯(lián)起來。
- var str = 'abc';
- var res = '';
- var copyTimes = 3;
- for (var i = 0; i < copyTimes; i += 1) {
- for (var j = 0; j < str.length; j += 1) {
- res += str[j];
- }
- }
但這太長了，非?；靵y，有時很難閱讀。為此，可以使用 String.prototype.repeat。你要做的就是傳遞數(shù)字，該數(shù)字表示你要復制字符串的次數(shù)。
- 'abc'.repeat(3) // "abcabcabc"
- 'hi '.repeat(2) // "hi hi "
- 'empty'.repeat(0) // ""
- 'empty'.repeat(null) // ""
- 'empty'.repeat(undefined) // ""
- 'empty'.repeat(NaN) // ""
- 'error'.repeat(-1) // RangeError
- 'error'.repeat(Infinity) // RangeError
傳入的值不能為負數(shù)，而且必須小于無窮大，不能是溢出的最大字符串大小。
String.prototype.match vs. String.prototype.includes
要檢查字符串中是否包含某些單詞，有兩種方法：match 和 includes。
- String.prototype.match——采用RegExp類型的參數(shù)，可以使用RegExp中所有支持的標志。
- String.prototype.includes——采用兩個參數(shù)，searchString 作為第一個參數(shù)，而 position 作為第二個參數(shù)。如果 position 沒有通過，將使用默認值 0。
區(qū)別在于，includes是區(qū)分大小寫的，而 match 則不區(qū)分大小寫。你可以將 i 標志放在RegExp中，以使其不區(qū)分大小寫。
- const name = 'jane';
- const nameReg = /jane/i;
- const str = 'Jane is a student';
- str.includes(name) // false
- str.match(nameReg)
- // ["Jane", index: 0, input: "Jane is a student", groups: undefined]
String.prototype.concat vs. String.prototype.padStart
當你想在某些字符串的開頭附加一些字符串時，padStart 是一種功能強大的方法。
另外，concat 也可以很好地執(zhí)行這個功能。但主要的區(qū)別在于 padStart 重復了從結(jié)果字符串的第一個索引到當前字符串的第一個索引的字符串。
下面演示如何使用這個功能：
- const rep = 'abc';
- const str = 'xyz';
這是兩個字符串。我想做的是在 xyz 前面添加 rep，但不僅是一次，我希望重復幾次。padStart 需要兩個參數(shù)——新創(chuàng)建的結(jié)果字符串的總長度和將被重復的字符串。
- str.padStart(10, rep); // "abcabcaxyz"
這個功能很好用，這個功能用 concat 肯定是很難做到的，concat 也是執(zhí)行字符串附加的。
padEnd 從位置的結(jié)尾開始。
結(jié)論
在JavaScript中，有很多有趣而有用的方法并不普遍。但這并不意味著它們沒有用處。這一切都取決于你如何在各種情況下使用它們。
網(wǎng)站題目：你可能不知道的幾個JavaScript原生方法
標題鏈接：http://www.dlmjj.cn/article/dpjsjde.html
