你可能不知道的幾個JavaScript原生方法是怎樣的

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

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

Number.isNaN vs. isNaN

NaN 是數字類型。

typeof NaN === 'number' // true

因此，你無法區分 NaN 和數字。

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

• isNaN——檢查傳遞的值是不是數字還是不能轉換為數字。

• Number.isNaN——檢查傳遞的值是否不是數字。

下面是這個例子。

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之類的計算不會產生錯誤。相反，它為你提供了 Infinit(無限)，這是一個全局屬性。

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

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

• isFinite——檢查傳遞的值是否有限。如果傳遞的值的類型不是數字，則將其轉換為數字。

• Number.isFinite——檢查傳遞的值是否有限。傳遞的值不會轉換為數字。

示例：

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

在過去，當你需要把數字取整時你可能會用 Math.floor。但是從現在開始，如果你真正想要的只是整數部分，請嘗試使用 Math.trunc。

• Math.floor——返回小于或等于給定數字的最大整數。

• Math.trunc——截斷點和右邊的數字。

基本上，如果給定數為正，它們將為你返回完全相同的結果。但是，如果給定數為負數，結果將有所不同。

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

當你在給定數組中尋找某個值時，如何找到它?我已經看到很多開發人員都使用 Array.prototype.indexOf，如以下示例所示。

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

他們的區別如下：

• Array.prototype.indexOf——返回可以在數組中找到給定元素的第一個索引;如果不存在，則返回 -1

• Array.prototype.includes——檢查給定數組是否包含你要查找的特定值，并返回 true / false 作為結果

示例：

const students = ['Hong', 'James', 'Mark', 'James'];  students.indexOf('Mark') // 1 students.includes('James') // true  students.indexOf('Sam') // -1 students.includes('Sam') // false

小心!由于Unicode差異，傳遞的值區分大小寫。

String.prototype.repeat vs. 手動循環

在添加這個功能之前，你制作字符串的方式是復制字符串，比如 abcabcabc，然后將其串聯成一個空的字符串，無論你想要多少次，都可以將其串聯起來。

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

但這太長了，非常混亂，有時很難閱讀。為此，可以使用  String.prototype.repeat。你要做的就是傳遞數字，該數字表示你要復制字符串的次數。

'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

傳入的值不能為負數，而且必須小于無窮大，不能是溢出的最大字符串大小。

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

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

• String.prototype.match——采用RegExp類型的參數，可以使用RegExp中所有支持的標志。

• String.prototype.includes——采用兩個參數，searchString 作為第一個參數，而 position 作為第二個參數。如果  position 沒有通過，將使用默認值 0。

區別在于，includes是區分大小寫的，而 match 則不區分大小寫。你可以將 i 標志放在RegExp中，以使其不區分大小寫。

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 也可以很好地執行這個功能。但主要的區別在于 padStart 重復了從結果字符串的第一個索引到當前字符串的第一個索引的字符串。

下面演示如何使用這個功能：

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

這是兩個字符串。我想做的是在 xyz 前面添加 rep，但不僅是一次，我希望重復幾次。padStart  需要兩個參數——新創建的結果字符串的總長度和將被重復的字符串。

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

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

padEnd 從位置的結尾開始。

結論

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

關于你可能不知道的幾個JavaScript原生方法是怎樣的就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。