毫無疑問，數組是最有用和***的JS數據結構之一。這些索引的集合一次又一次地證明，它們仍然是各種用例的***選擇(如果不只是它一個的話)。但是，如果沒有它們完整的、***表現力的API，數組本身就不會那么有價值。這就是今天帖子的主題!

[[270898]]

我們將介紹一些不太為人所知的方法，以及其他一些可能很難記住的方法，這些方法是在數組API中原生包含的。有些甚至可以追溯到很久以前!在它們的幫助下，你將能夠編寫更簡潔、更實用的代碼(當然是以FP-style)，有時甚至可以編寫更高性能的JS代碼!其中一些可能簡單一些，一些可能要困難點，但是本文絕對不是針對完全初學者的!當然，如果你已經知道并記住了所有這些，花點時間來提醒自己一些細節或學習一些新技巧!

轉換

為了更好的閱讀體驗，我將所有列出的方法分成4組。每個組都收集至少共享一個特殊屬性的方法。***組稱為“轉換”。它里邊的所有的方法都是將數組轉換為其他形式。它們都以不可變的方式運行，在結果中返回一個新的數組，并不影響原始數組。

.filter()

我想我不需要討論過濾數組有多有用。使用.filter()你可以做到這一點!你所要做的就是傳遞一個過濾函數，給定當前元素的值、索引和源數組，該函數會輸出布爾值，用于指示給定元素是否應該包含在結果數組中。

 

 

.map()

.map()可能是FP定制的JS編程中***的數組方法之一。如你所指，它使用給定的映射函數來處理(“map”)你的數組，并返回一個帶有新處理過的數據的新數組。上面提到的函數提供了一個標準參數集，其中包括元素、索引和源數組參數，并且應該返回將要包含在結果中的值。因此，有了所有這些數據，你就已經具備了以你想要的方式改變你的數組所需要的所有東西.

 

 

.flat[Map]()

嵌套數組在現在是很常見的。實踐證明它們在表示2D或3D數據格式時特別有用。使用這樣的維度完全有可能進行更深入的研究，但是，正如我們都知道的，跟蹤和訪問這樣的數據會變得越來越困難。ECMAScript規范的開發人員清楚地認識到了這種模式，并從***的ES規范和始終綠色的瀏覽器開始，為我們引入了新的.flat()方法。它的規則很簡單——它只是按指定的深度(默認為1)將嵌套數組扁平化，并有效地為你提供一個比以往任何時候都要扁平的數組!

 

 

還有另一個與數組扁平化相關的方法。我說的是. flatMap()，正如你所預料的，它是.map()和.flat()方法的***結合。基本上，你可以像.map()那樣使用這個方法——使用相同的參數集，等等，但是生成的數組稍后會被扁平化1層。很簡單的。那么，這種方法可能的用例有哪些?為此，請思考一下下面的字符串處理示例。

 

 

也許這有點粗略，但我想你已經明白了。一旦你理解了這個方法是如何工作的，你肯定會發現一些你自己的用例。附注,這種方法比分別使用.map()和.flat()性能要好一點。

交互

“交互”類別將所有在源數組上運行的方法進行了分組，這些方法并不會提供一個全新的數組，而是對數組進行改變或返回完全不同類型的值。

.reverse()

當然，.reverse()方法很簡單，但是不太為人所知，它的作用與其名稱的含義完全相同——反轉數組中元素的順序。因此，***的將被放在***個。在處理不同類型的隊列時，這個方法很可能會派上用場。記住，這個方法會改變源數組。

 

 

.reduce[Right]()

如果你想快速地將你的數組(“reduce”)轉換為單個值，你可以使用.reduce()方法來輕松地實現。如果提供了正確的函數(所謂的縮減器)，它稍后會對數組中的每個元素執行該函數，并將結果累積到一個變量中。

 

 

這個參數函數會返回一個累積值，稍后你可以用它的***個參數來引用它。在頂峰時，該函數可以提供4個參數(按給定順序):

累積值 (可以是字符串、數組、對象或任何其他什么);

數組的當前值會被縮減;

當前值的索引;

將被縮減的數組;

如果縮減順序對你來說很重要，那么你應該知道你還可以使用.reduceRight()方法，它與前面的方法執行完全相同的操作，但是它是從右邊開始，向前進行。

.find[Index]()

查找數組中的特定元素可能是一項艱巨的任務，除非它是***個或***一個元素。這里，ES6規范中添加的 .find()方法就非常有用。它只接受處理標準參數集的檢查函數，并從給定數組中返回***個匹配的值，否則返回undefined。

 

 

還有一個.findIndex()方法，與***個方法一樣，它使用匹配函數來查找值，但是返回的是索引而不是原始值。它可以與.indexOf() 或 .lastIndexOf()進行比較，也可以用來檢索與提供的值匹配的***個和***一個值的索引，但是它的表達能力不如.findIndex()及其匹配函數。

 

 

 

***一點需要注意的是——如果你使用.indexOf()只是為了檢查一個值是否在給定的數組中，你可以考慮使用.includes() (ES6特性)——它返回一個布爾值，并且比它的替代方法具有更好的性能。

.every()

正如一些人所期望的那樣，.every()只是在給定數組的每個元素上運行提供的函數，這里的命名可能會產生誤導。相反，.every()確實在每個元素上運行一個函數，但只是為了檢查它們是否遵循了我們提供的準則，并最終返回一個合法的布爾值。檢查函數提供了參數的標準集合。

 

 

.copyWithin()

對于某些人來說，在單個數組的邊界內復制數據可能會有點復雜和無意義。但是，由于它優越的性能(特別是對它的對手TypedArrays來說)， 這個方法提供了一種快速移動數組元素的好方法! 在這里，你可以傳入1到3個參數:

復制的數據將被粘貼的目標索引。由于 .copyWithin()不會改變源數組的長度，因此，源數組會被替換，舊的數據會被移除。

開始索引，標記要復制的數據的開頭(默認為0，數組的起始索引)

結束索引，標記要復制的數據的末尾(不包括提供的索引)(默認為.length，即給定數組的末尾)

 

 

.sort()

.sort()是執行其名稱所說明的操作的方法之一。在本例中，它只是對數組進行排序，你可以為它提供一個比較函數，也可以不提供。默認情況下，所有的值都會被轉換成字符串，并按照UTF-16編碼進行升序排序，也就是說數字從小到大，字符串按照字母表順序。你也可以提供一個接受兩個元素作為獨立參數進行比較的函數。這個比較函數會返回一個數字，它將被用于以一個給定的方式對提供的值進行排序。

如果函數返回的數小于0，則作為***個參數提供的值優先;

如果函數返回的數字等于0，則值將保持不變(規范并沒有真正保證);

如果函數返回的數大于0，則作為第二個參數提供的值優先;

 

 

.some()

.some()是一個類似于.every()的方法。它檢查源數組中的元素是否滿足某些規則(以檢查函數的形式提供)，并在***返回一個布爾值。所不同的是, .some()只需要一個元素滿足測試,就返回一個正值,不像.every()那樣要求每個元素都滿足測試。它可以幫助你，例如檢查是否至少有一個值帶有給定的屬性。提供的測試函數接收一個標準參數集合(元素、索引和源數組)。

 

 

迭代

令人驚訝!實際上，在數組API中，只有一個方法可以執行迭代操作。對于那些使用.map()、.reduce()和類似方法的人來說，這只是一個警告，因為這些方法只用于遍歷源數組。只有一個方法適用于這個任務，因此，它應該被尊重和眾所周知。

.forEach()

.forEach()會執行其名稱所代表的操作——遍歷源數組的每個元素。在提供一個接收標準參數集的函數的情況下，它會在給定數組的每個元素上運行該函數。

 

 

其他

除了以上所有類別之外，數組API還有更多的方法。下面是其中一些，它們肯定不太為人所知和使用，但在某些特殊情況下可能會派上用場。

.entries()

.entries()是三個返回迭代器-對象方法中的***個。數組迭代器對象或所謂的iterable是一個簡單的結構，可以通過使用for... of循環對該結構進行迭代，它還有一個單獨的.next()方法，該方法在迭代時被稱為底層方法。當直接調用時，它會返回一個包含value和done屬性的對象，這兩個屬性分別指示當前值和迭代是否完成。當再次調用時,它會返回數組的下一個值,這個過程會持續到源數組的末尾，此時，done 屬性將被設置為true。

.entries()方法返回的迭代器將帶有以鍵值對(數組)的形式存在的值，其中***個元素表示當前索引，第二個元素表示各自的值。你可以將其(稍后將討論其他方法)與對應的對象進行比較。像Object.entries()或Object.keys() (不在原型中)這樣的函數當然比它們的數組兄弟函數更受歡迎，但是它們也做類似的事情。

 

 

迭代完成后，你不能重新啟動它。再次執行相同操作的惟一方法是使用相同的方法再創建一個新的iterable。

但是這種方法的用例是什么呢?.next()方法肯定會給你更多的如何迭代你的數組的控制權。而且，.entries()返回的類鍵值對在我們想同時訪問元素的值和索引時肯定是很有用的。但是，在這些情況下，標準對象或映射(我在前一篇文章中討論過)可能對你來說會更方便。

.keys()

前面我們已經介紹了iterable背后的所有復雜性，還里有兩個類似于.entries()的方法——.keys() 和 .values()。***個方法，顧名思義，會返回一個其值等于源數組索引(即鍵)的iterable。代替鍵值數組，它會返回表示數組元素索引的數字。

.values()

.values()方法同樣會返回iterable。這一次它的值等于源數組元素的值。

 

 

.toString()

我想討論的***一個方法是.toString()。它存在于JS對象、函數、字符串、數字、數組和更多對象中!可能存在于每個JS對象(一切皆對象)中! 但我認為，盡管.toString()方法無處不在，但它仍然沒有得到應有的關注。

從其核心來說，.toString()方法只是將一個數組轉換為字符串。返回的值有一種數組元素的形式，這些元素緊密地放在一起，用逗號分隔。

 

 

但是它***的優點是不需要被直接調用!

 

 

這樣一來，每次當你的值需要轉換為字符串(例如字符串常量或連接)時，你都可以調用此方法。考慮到這一點，以及你可以使用自己的實現自由地更改這個方法，在執行這些操作時，你不但可以返回自定義的字符串，還可以執行特定的操作! ✨相信我——這可以讓你進行一些很有趣的操作!

數組時間!

這些是我個人挑選的一些最有趣和最有價值的數組API方法!你都知道它們嗎? 我知道內置的API很容易被遺忘，從而會導致我們去尋找沒有必要存在的問題的解決方案。我希望這篇文章至少能幫你解決其中的一些。

現在，你覺得這篇文章怎么樣? 請在評論區寫下你的觀點，如果你喜歡，請在下面的回復中告訴我!當然，你也可以在Twitter和我的Facebook頁面上關注我,你也可以注冊時事通訊來獲取本博客的***內容。和往常一樣，謝謝你閱讀這篇文章，下期再見!✌

英文原文：https://areknawo.com/exploring-the-hidden-potential-of-javascript-arrays/

譯者：Nothing