這篇文章將為大家詳細(xì)講解有關(guān)你可能不知道的幾個(gè)JavaScript原生方法是怎樣的，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)公司IDC提供業(yè)務(wù):雅安機(jī)房托管,成都服務(wù)器租用,雅安機(jī)房托管,重慶服務(wù)器租用等四川省內(nèi)主機(jī)托管與主機(jī)租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機(jī)房,BGP機(jī)房,電信機(jī)房,移動(dòng)機(jī)房,聯(lián)通機(jī)房。

自ES6發(fā)行以來(lái)，許多新的，便捷的原生方法已添加到JavaScript的新標(biāo)準(zhǔn)中。然而，我在GitHub的代碼庫(kù)中看到了很多舊的代碼。這并不意味著它們一定是壞的，但我要介紹的這些功能將幫助你的代碼更可讀，更漂亮。

Number.isNaN vs. isNaN

NaN 是數(shù)字類型。

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

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

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

• isFinite——檢查傳遞的值是否有限。如果傳遞的值的類型不是數(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ū)分大小寫。

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類型的參數(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ū)分大小寫的，而 match 則不區(qū)分大小寫。你可以將 i 標(biāo)志放在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

當(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)有用處。這一切都取決于你如何在各種情況下使用它們。

關(guān)于你可能不知道的幾個(gè)JavaScript原生方法是怎樣的就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。