探索JavaScript 數(shù)組的隱藏潛力

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

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

轉(zhuǎn)換

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

.filter()

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

.map()

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

.copyWithin()

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

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

開始索引，標(biāo)記要復(fù)制的數(shù)據(jù)的開頭(默認(rèn)為0，數(shù)組的起始索引)

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

迭代

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

.forEach()

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

其他

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

.entries()

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

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

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

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

.keys()

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

.values()

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

.toString()

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

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

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

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

數(shù)組時間!

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

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

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

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

廣告

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