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

我們將介紹一些不太為人所知的方法，以及其他一些可能很難記住的方法，這些方法是在數(shù)組API中原生包含的。有些甚至可以追溯到很久以前!在它們的幫助下，你將能夠編寫(xiě)更簡(jiǎn)潔、更實(shí)用的代碼(當(dāng)然是以FP-style)，有時(shí)甚至可以編寫(xiě)更高性能的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ù)組所需要的所有東西.

.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ù)組的末尾)

迭代

令人驚訝!實(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ū)寫(xiě)下你的觀點(diǎn)，如果你喜歡，請(qǐng)?jiān)谙旅娴幕貜?fù)中告訴我!當(dāng)然，你也可以在Twitter和我的Facebook頁(yè)面上關(guān)注我,你也可以注冊(cè)時(shí)事通訊來(lái)獲取本博客的最新內(nèi)容。和往常一樣，謝謝你閱讀這篇文章，下期再見(jiàn)!?

當(dāng)前文章：探索JavaScript 數(shù)組的隱藏潛力
文章網(wǎng)址：http://www.js-pz168.com/news22/101272.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、微信公眾號(hào)、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)