自ES6發(fā)行以來(lái)，許多新的，便捷的原生方法已添加到JavaScript的新標(biāo)準(zhǔn)中。

然而，我在GitHub的代碼庫(kù)中看到了很多舊的代碼。這并不意味著它們一定是壞的，但我要介紹的這些功能將幫助你的代碼更可讀，更漂亮。

Number.isNaN vs. isNaN

NaN 是數(shù)字類(lèi)型。

typeof NaN === 'number' // true 

因此，你無(wú)法區(qū)分 NaN 和數(shù)字。

甚至 Object.prototype.toString.call 都為 NaN 和數(shù)字返回 [object Number]。你可能已經(jīng)知道可以使用 isNaN 方法檢查參數(shù)是否為NaN。但是從ES6開(kāi)始，number構(gòu)造函數(shù)已開(kāi)始將 isNaN 作為其方法。那有什么不同?

• isNaN——檢查傳遞的值是不是數(shù)字還是不能轉(zhuǎn)換為數(shù)字。
• Number.isNaN——檢查傳遞的值是否不是數(shù)字。

下面是這個(gè)例子。

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之類(lèi)的計(jì)算不會(huì)產(chǎn)生錯(cuò)誤。相反，它為你提供了 Infinit(無(wú)限)，這是一個(gè)全局屬性。

那么，如何檢查一個(gè)值是否是Infinit呢?你不能，但是你可以用 isFinite 和 Number.isFinite 來(lái)檢查一個(gè)值是否是有限值。

它們的工作原理基本相同，但彼此之間略有不同。

• isFinite——檢查傳遞的值是否有限。如果傳遞的值的類(lèi)型不是數(shù)字，則將其轉(zhuǎn)換為數(shù)字。
• Number.isFinite——檢查傳遞的值是否有限。傳遞的值不會(huì)轉(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

在過(guò)去，當(dāng)你需要把數(shù)字取整時(shí)你可能會(huì)用 Math.floor。但是從現(xiàn)在開(kāi)始，如果你真正想要的只是整數(shù)部分，請(qǐng)嘗試使用 Math.trunc。

• Math.floor——返回小于或等于給定數(shù)字的最大整數(shù)。
• Math.trunc——截?cái)帱c(diǎn)和右邊的數(shù)字。

基本上，如果給定數(shù)為正，它們將為你返回完全相同的結(jié)果。但是，如果給定數(shù)為負(fù)數(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

當(dāng)你在給定數(shù)組中尋找某個(gè)值時(shí)，如何找到它?我已經(jīng)看到很多開(kāi)發(fā)人員都使用 Array.prototype.indexOf，如以下示例所示。

const arr = [1, 2, 3, 4]; 
if (arr.indexOf(1) > -1) { 
  ... 
} 

他們的區(qū)別如下：

• Array.prototype.indexOf——返回可以在數(shù)組中找到給定元素的第一個(gè)索引;如果不存在，則返回 -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ū)分大小寫(xiě)。

String.prototype.repeat vs. 手動(dòng)循環(huán)

在添加這個(gè)功能之前，你制作字符串的方式是復(fù)制字符串，比如 abcabcabc，然后將其串聯(lián)成一個(gè)空的字符串，無(wú)論你想要多少次，都可以將其串聯(lián)起來(lái)。

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]; 
  } 
} 

但這太長(zhǎng)了，非?；靵y，有時(shí)很難閱讀。為此，可以使用 String.prototype.repeat。你要做的就是傳遞數(shù)字，該數(shù)字表示你要復(fù)制字符串的次數(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 

傳入的值不能為負(fù)數(shù)，而且必須小于無(wú)窮大，不能是溢出的最大字符串大小。

String.prototype.match vs. String.prototype.includes

要檢查字符串中是否包含某些單詞，有兩種方法：match 和 includes。

• String.prototype.match——采用RegExp類(lèi)型的參數(shù)，可以使用RegExp中所有支持的標(biāo)志。
• String.prototype.includes——采用兩個(gè)參數(shù)，searchString 作為第一個(gè)參數(shù)，而 position 作為第二個(gè)參數(shù)。如果 position 沒(méi)有通過(guò)，將使用默認(rèn)值 0。

區(qū)別在于，includes是區(qū)分大小寫(xiě)的，而 match 則不區(qū)分大小寫(xiě)。你可以將 i 標(biāo)志放在RegExp中，以使其不區(qū)分大小寫(xiě)。

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

當(dāng)你想在某些字符串的開(kāi)頭附加一些字符串時(shí)，padStart 是一種功能強(qiáng)大的方法。

另外，concat 也可以很好地執(zhí)行這個(gè)功能。但主要的區(qū)別在于 padStart 重復(fù)了從結(jié)果字符串的第一個(gè)索引到當(dāng)前字符串的第一個(gè)索引的字符串。

下面演示如何使用這個(gè)功能：

const rep = 'abc'; 
const str = 'xyz'; 

這是兩個(gè)字符串。我想做的是在 xyz 前面添加 rep，但不僅是一次，我希望重復(fù)幾次。padStart 需要兩個(gè)參數(shù)——新創(chuàng)建的結(jié)果字符串的總長(zhǎng)度和將被重復(fù)的字符串。

str.padStart(10, rep); // "abcabcaxyz" 

這個(gè)功能很好用，這個(gè)功能用 concat 肯定是很難做到的，concat 也是執(zhí)行字符串附加的。

padEnd 從位置的結(jié)尾開(kāi)始。

結(jié)論

在JavaScript中，有很多有趣而有用的方法并不普遍。但這并不意味著它們沒(méi)有用處。這一切都取決于你如何在各種情況下使用它們。