毫無疑問，數(shù)組是最有用和***的JS數(shù)據(jù)結(jié)構(gòu)之一。這些索引的集合一次又一次地證明，它們?nèi)匀皇歉鞣N用例的***選擇(如果不只是它一個的話)。但是，如果沒有它們完整的、***表現(xiàn)力的API，數(shù)組本身就不會那么有價值。這就是今天帖子的主題!

[[270898]]

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

轉(zhuǎn)換

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

.filter()

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

 

 

.map()

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

 

 

.flat[Map]()

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

 

 

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

 

 

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

交互

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

.reverse()

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

 

 

.reduce[Right]()

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

 

 

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

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

數(shù)組的當前值會被縮減;

當前值的索引;

將被縮減的數(shù)組;

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

.find[Index]()

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

 

 

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

 

 

 

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

.every()

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

 

 

.copyWithin()

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

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

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

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

 

 

.sort()

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

如果函數(shù)返回的數(shù)小于0，則作為***個參數(shù)提供的值優(yōu)先;

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

如果函數(shù)返回的數(shù)大于0，則作為第二個參數(shù)提供的值優(yōu)先;

 

 

.some()

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

 

 

迭代

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

.forEach()

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

 

 

其他

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

.entries()

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

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

 

 

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

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

.keys()

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

.values()

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

 

 

.toString()

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

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

 

 

但是它***的優(yōu)點是不需要被直接調(diào)用!

 

 

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

數(shù)組時間!

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

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

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

譯者：Nothing