建站
咨詢
售后
建站咨詢
新聞中心
毫無(wú)疑問(wèn)，數(shù)組是最有用和***的JS數(shù)據(jù)結(jié)構(gòu)之一。這些索引的集合一次又一次地證明，它們?nèi)匀皇歉鞣N用例的***選擇(如果不只是它一個(gè)的話)。但是，如果沒(méi)有它們完整的、***表現(xiàn)力的API，數(shù)組本身就不會(huì)那么有價(jià)值。這就是今天帖子的主題!
在平湖等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作定制網(wǎng)站制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷推廣,成都外貿(mào)網(wǎng)站制作,平湖網(wǎng)站建設(shè)費(fèi)用合理。
我們將介紹一些不太為人所知的方法，以及其他一些可能很難記住的方法，這些方法是在數(shù)組API中原生包含的。有些甚至可以追溯到很久以前!在它們的幫助下，你將能夠編寫更簡(jiǎn)潔、更實(shí)用的代碼(當(dāng)然是以FP-style)，有時(shí)甚至可以編寫更高性能的JS代碼!其中一些可能簡(jiǎn)單一些，一些可能要困難點(diǎn)，但是本文絕對(duì)不是針對(duì)完全初學(xué)者的!當(dāng)然，如果你已經(jīng)知道并記住了所有這些，花點(diǎn)時(shí)間來(lái)提醒自己一些細(xì)節(jié)或?qū)W習(xí)一些新技巧!
轉(zhuǎn)換
為了更好的閱讀體驗(yàn)，我將所有列出的方法分成4組。每個(gè)組都收集至少共享一個(gè)特殊屬性的方法。***組稱為“轉(zhuǎn)換”。它里邊的所有的方法都是將數(shù)組轉(zhuǎn)換為其他形式。它們都以不可變的方式運(yùn)行，在結(jié)果中返回一個(gè)新的數(shù)組，并不影響原始數(shù)組。
.filter()
我想我不需要討論過(guò)濾數(shù)組有多有用。使用.filter()你可以做到這一點(diǎn)!你所要做的就是傳遞一個(gè)過(guò)濾函數(shù)，給定當(dāng)前元素的值、索引和源數(shù)組，該函數(shù)會(huì)輸出布爾值，用于指示給定元素是否應(yīng)該包含在結(jié)果數(shù)組中。
.map()
.map()可能是FP定制的JS編程中***的數(shù)組方法之一。如你所指，它使用給定的映射函數(shù)來(lái)處理(“map”)你的數(shù)組，并返回一個(gè)帶有新處理過(guò)的數(shù)據(jù)的新數(shù)組。上面提到的函數(shù)提供了一個(gè)標(biāo)準(zhǔn)參數(shù)集，其中包括元素、索引和源數(shù)組參數(shù)，并且應(yīng)該返回將要包含在結(jié)果中的值。因此，有了所有這些數(shù)據(jù)，你就已經(jīng)具備了以你想要的方式改變你的數(shù)組所需要的所有東西.
.flat[Map]()
嵌套數(shù)組在現(xiàn)在是很常見(jiàn)的。實(shí)踐證明它們?cè)诒硎?D或3D數(shù)據(jù)格式時(shí)特別有用。使用這樣的維度完全有可能進(jìn)行更深入的研究，但是，正如我們都知道的，跟蹤和訪問(wèn)這樣的數(shù)據(jù)會(huì)變得越來(lái)越困難。ECMAScript規(guī)范的開(kāi)發(fā)人員清楚地認(rèn)識(shí)到了這種模式，并從***的ES規(guī)范和始終綠色的瀏覽器開(kāi)始，為我們引入了新的.flat()方法。它的規(guī)則很簡(jiǎn)單——它只是按指定的深度(默認(rèn)為1)將嵌套數(shù)組扁平化，并有效地為你提供一個(gè)比以往任何時(shí)候都要扁平的數(shù)組!
還有另一個(gè)與數(shù)組扁平化相關(guān)的方法。我說(shuō)的是. flatMap()，正如你所預(yù)料的，它是.map()和.flat()方法的***結(jié)合。基本上，你可以像.map()那樣使用這個(gè)方法——使用相同的參數(shù)集，等等，但是生成的數(shù)組稍后會(huì)被扁平化1層。很簡(jiǎn)單的。那么，這種方法可能的用例有哪些?為此，請(qǐng)思考一下下面的字符串處理示例。
也許這有點(diǎn)粗略，但我想你已經(jīng)明白了。一旦你理解了這個(gè)方法是如何工作的，你肯定會(huì)發(fā)現(xiàn)一些你自己的用例。附注,這種方法比分別使用.map()和.flat()性能要好一點(diǎn)。
交互
“交互”類別將所有在源數(shù)組上運(yùn)行的方法進(jìn)行了分組，這些方法并不會(huì)提供一個(gè)全新的數(shù)組，而是對(duì)數(shù)組進(jìn)行改變或返回完全不同類型的值。
.reverse()
當(dāng)然，.reverse()方法很簡(jiǎn)單，但是不太為人所知，它的作用與其名稱的含義完全相同——反轉(zhuǎn)數(shù)組中元素的順序。因此，***的將被放在***個(gè)。在處理不同類型的隊(duì)列時(shí)，這個(gè)方法很可能會(huì)派上用場(chǎng)。記住，這個(gè)方法會(huì)改變?cè)磾?shù)組。
.reduce[Right]()
如果你想快速地將你的數(shù)組(“reduce”)轉(zhuǎn)換為單個(gè)值，你可以使用.reduce()方法來(lái)輕松地實(shí)現(xiàn)。如果提供了正確的函數(shù)(所謂的縮減器)，它稍后會(huì)對(duì)數(shù)組中的每個(gè)元素執(zhí)行該函數(shù)，并將結(jié)果累積到一個(gè)變量中。
這個(gè)參數(shù)函數(shù)會(huì)返回一個(gè)累積值，稍后你可以用它的***個(gè)參數(shù)來(lái)引用它。在頂峰時(shí)，該函數(shù)可以提供4個(gè)參數(shù)(按給定順序):
累積值 (可以是字符串、數(shù)組、對(duì)象或任何其他什么);
數(shù)組的當(dāng)前值會(huì)被縮減;
當(dāng)前值的索引;
將被縮減的數(shù)組;
如果縮減順序?qū)δ銇?lái)說(shuō)很重要，那么你應(yīng)該知道你還可以使用.reduceRight()方法，它與前面的方法執(zhí)行完全相同的操作，但是它是從右邊開(kāi)始，向前進(jìn)行。
.find[Index]()
查找數(shù)組中的特定元素可能是一項(xiàng)艱巨的任務(wù)，除非它是***個(gè)或***一個(gè)元素。這里，ES6規(guī)范中添加的 .find()方法就非常有用。它只接受處理標(biāo)準(zhǔn)參數(shù)集的檢查函數(shù)，并從給定數(shù)組中返回***個(gè)匹配的值，否則返回undefined。
還有一個(gè).findIndex()方法，與***個(gè)方法一樣，它使用匹配函數(shù)來(lái)查找值，但是返回的是索引而不是原始值。它可以與.indexOf() 或 .lastIndexOf()進(jìn)行比較，也可以用來(lái)檢索與提供的值匹配的***個(gè)和***一個(gè)值的索引，但是它的表達(dá)能力不如.findIndex()及其匹配函數(shù)。
***一點(diǎn)需要注意的是——如果你使用.indexOf()只是為了檢查一個(gè)值是否在給定的數(shù)組中，你可以考慮使用.includes() (ES6特性)——它返回一個(gè)布爾值，并且比它的替代方法具有更好的性能。
.every()
正如一些人所期望的那樣，.every()只是在給定數(shù)組的每個(gè)元素上運(yùn)行提供的函數(shù)，這里的命名可能會(huì)產(chǎn)生誤導(dǎo)。相反，.every()確實(shí)在每個(gè)元素上運(yùn)行一個(gè)函數(shù)，但只是為了檢查它們是否遵循了我們提供的準(zhǔn)則，并最終返回一個(gè)合法的布爾值。檢查函數(shù)提供了參數(shù)的標(biāo)準(zhǔn)集合。
.copyWithin()
對(duì)于某些人來(lái)說(shuō)，在單個(gè)數(shù)組的邊界內(nèi)復(fù)制數(shù)據(jù)可能會(huì)有點(diǎn)復(fù)雜和無(wú)意義。但是，由于它優(yōu)越的性能(特別是對(duì)它的對(duì)手TypedArrays來(lái)說(shuō))， 這個(gè)方法提供了一種快速移動(dòng)數(shù)組元素的好方法! 在這里，你可以傳入1到3個(gè)參數(shù):
復(fù)制的數(shù)據(jù)將被粘貼的目標(biāo)索引。由于 .copyWithin()不會(huì)改變?cè)磾?shù)組的長(zhǎng)度，因此，源數(shù)組會(huì)被替換，舊的數(shù)據(jù)會(huì)被移除。
開(kāi)始索引，標(biāo)記要復(fù)制的數(shù)據(jù)的開(kāi)頭(默認(rèn)為0，數(shù)組的起始索引)
結(jié)束索引，標(biāo)記要復(fù)制的數(shù)據(jù)的末尾(不包括提供的索引)(默認(rèn)為.length，即給定數(shù)組的末尾)
.sort()
.sort()是執(zhí)行其名稱所說(shuō)明的操作的方法之一。在本例中，它只是對(duì)數(shù)組進(jìn)行排序，你可以為它提供一個(gè)比較函數(shù)，也可以不提供。默認(rèn)情況下，所有的值都會(huì)被轉(zhuǎn)換成字符串，并按照UTF-16編碼進(jìn)行升序排序，也就是說(shuō)數(shù)字從小到大，字符串按照字母表順序。你也可以提供一個(gè)接受兩個(gè)元素作為獨(dú)立參數(shù)進(jìn)行比較的函數(shù)。這個(gè)比較函數(shù)會(huì)返回一個(gè)數(shù)字，它將被用于以一個(gè)給定的方式對(duì)提供的值進(jìn)行排序。
如果函數(shù)返回的數(shù)小于0，則作為***個(gè)參數(shù)提供的值優(yōu)先;
如果函數(shù)返回的數(shù)字等于0，則值將保持不變(規(guī)范并沒(méi)有真正保證);
如果函數(shù)返回的數(shù)大于0，則作為第二個(gè)參數(shù)提供的值優(yōu)先;
.some()
.some()是一個(gè)類似于.every()的方法。它檢查源數(shù)組中的元素是否滿足某些規(guī)則(以檢查函數(shù)的形式提供)，并在***返回一個(gè)布爾值。所不同的是, .some()只需要一個(gè)元素滿足測(cè)試,就返回一個(gè)正值,不像.every()那樣要求每個(gè)元素都滿足測(cè)試。它可以幫助你，例如檢查是否至少有一個(gè)值帶有給定的屬性。提供的測(cè)試函數(shù)接收一個(gè)標(biāo)準(zhǔn)參數(shù)集合(元素、索引和源數(shù)組)。
迭代
令人驚訝!實(shí)際上，在數(shù)組API中，只有一個(gè)方法可以執(zhí)行迭代操作。對(duì)于那些使用.map()、.reduce()和類似方法的人來(lái)說(shuō)，這只是一個(gè)警告，因?yàn)檫@些方法只用于遍歷源數(shù)組。只有一個(gè)方法適用于這個(gè)任務(wù)，因此，它應(yīng)該被尊重和眾所周知。
.forEach()
.forEach()會(huì)執(zhí)行其名稱所代表的操作——遍歷源數(shù)組的每個(gè)元素。在提供一個(gè)接收標(biāo)準(zhǔn)參數(shù)集的函數(shù)的情況下，它會(huì)在給定數(shù)組的每個(gè)元素上運(yùn)行該函數(shù)。
其他
除了以上所有類別之外，數(shù)組API還有更多的方法。下面是其中一些，它們肯定不太為人所知和使用，但在某些特殊情況下可能會(huì)派上用場(chǎng)。
.entries()
.entries()是三個(gè)返回迭代器-對(duì)象方法中的***個(gè)。數(shù)組迭代器對(duì)象或所謂的iterable是一個(gè)簡(jiǎn)單的結(jié)構(gòu)，可以通過(guò)使用for... of循環(huán)對(duì)該結(jié)構(gòu)進(jìn)行迭代，它還有一個(gè)單獨(dú)的.next()方法，該方法在迭代時(shí)被稱為底層方法。當(dāng)直接調(diào)用時(shí)，它會(huì)返回一個(gè)包含value和done屬性的對(duì)象，這兩個(gè)屬性分別指示當(dāng)前值和迭代是否完成。當(dāng)再次調(diào)用時(shí),它會(huì)返回?cái)?shù)組的下一個(gè)值,這個(gè)過(guò)程會(huì)持續(xù)到源數(shù)組的末尾，此時(shí)，done 屬性將被設(shè)置為true。
.entries()方法返回的迭代器將帶有以鍵值對(duì)(數(shù)組)的形式存在的值，其中***個(gè)元素表示當(dāng)前索引，第二個(gè)元素表示各自的值。你可以將其(稍后將討論其他方法)與對(duì)應(yīng)的對(duì)象進(jìn)行比較。像Object.entries()或Object.keys() (不在原型中)這樣的函數(shù)當(dāng)然比它們的數(shù)組兄弟函數(shù)更受歡迎，但是它們也做類似的事情。
迭代完成后，你不能重新啟動(dòng)它。再次執(zhí)行相同操作的惟一方法是使用相同的方法再創(chuàng)建一個(gè)新的iterable。
但是這種方法的用例是什么呢?.next()方法肯定會(huì)給你更多的如何迭代你的數(shù)組的控制權(quán)。而且，.entries()返回的類鍵值對(duì)在我們想同時(shí)訪問(wèn)元素的值和索引時(shí)肯定是很有用的。但是，在這些情況下，標(biāo)準(zhǔn)對(duì)象或映射(我在前一篇文章中討論過(guò))可能對(duì)你來(lái)說(shuō)會(huì)更方便。
.keys()
前面我們已經(jīng)介紹了iterable背后的所有復(fù)雜性，還里有兩個(gè)類似于.entries()的方法——.keys() 和 .values()。***個(gè)方法，顧名思義，會(huì)返回一個(gè)其值等于源數(shù)組索引(即鍵)的iterable。代替鍵值數(shù)組，它會(huì)返回表示數(shù)組元素索引的數(shù)字。
.values()
.values()方法同樣會(huì)返回iterable。這一次它的值等于源數(shù)組元素的值。
.toString()
我想討論的***一個(gè)方法是.toString()。它存在于JS對(duì)象、函數(shù)、字符串、數(shù)字、數(shù)組和更多對(duì)象中!可能存在于每個(gè)JS對(duì)象(一切皆對(duì)象)中! 但我認(rèn)為，盡管.toString()方法無(wú)處不在，但它仍然沒(méi)有得到應(yīng)有的關(guān)注。
從其核心來(lái)說(shuō)，.toString()方法只是將一個(gè)數(shù)組轉(zhuǎn)換為字符串。返回的值有一種數(shù)組元素的形式，這些元素緊密地放在一起，用逗號(hào)分隔。
但是它***的優(yōu)點(diǎn)是不需要被直接調(diào)用!
這樣一來(lái)，每次當(dāng)你的值需要轉(zhuǎn)換為字符串(例如字符串常量或連接)時(shí)，你都可以調(diào)用此方法?？紤]到這一點(diǎn)，以及你可以使用自己的實(shí)現(xiàn)自由地更改這個(gè)方法，在執(zhí)行這些操作時(shí)，你不但可以返回自定義的字符串，還可以執(zhí)行特定的操作! 相信我——這可以讓你進(jìn)行一些很有趣的操作!
數(shù)組時(shí)間!
這些是我個(gè)人挑選的一些最有趣和最有價(jià)值的數(shù)組API方法!你都知道它們嗎? 我知道內(nèi)置的API很容易被遺忘，從而會(huì)導(dǎo)致我們?nèi)ふ覜](méi)有必要存在的問(wèn)題的解決方案。我希望這篇文章至少能幫你解決其中的一些。
現(xiàn)在，你覺(jué)得這篇文章怎么樣? 請(qǐng)?jiān)谠u(píng)論區(qū)寫下你的觀點(diǎn)，如果你喜歡，請(qǐng)?jiān)谙旅娴幕貜?fù)中告訴我!當(dāng)然，你也可以在Twitter和我的Facebook頁(yè)面上關(guān)注我,你也可以注冊(cè)時(shí)事通訊來(lái)獲取本博客的***內(nèi)容。和往常一樣，謝謝你閱讀這篇文章，下期再見(jiàn)!
英文原文：https://areknawo.com/exploring-the-hidden-potential-of-javascript-arrays/
譯者：Nothing
本文名稱：探索JavaScript 數(shù)組的隱藏潛力
文章鏈接：http://www.5511xx.com/article/cdhhogg.html
