如何更好的使用JavaScript陣列
快速閱讀,我保證。在過去幾個月,在我檢查拉取請求時,確切相同的四個錯誤不斷出現。我也發表了這篇文章,因為我自己也犯過這些錯誤!讓我們瀏覽它們以確保正確使用陣列方法!
用 Array.includes代替Array.indexOf
“如果想在陣列中查詢某些內容,請使用Array. indexof”。我記得在學習JavaScript的時候,我在課上讀過這樣一句話。毫無疑問,這句話是千真萬確的!
Array.indexOf “返回可以找到給定元素的第一個索引”,MDN文件這樣說。因此,如果我們稍後在程式碼和陣列中使用返回的索引。indexOf是解決方案。
但是,如果我們只需要知道陣列是否包含一個值,該怎麼辦?看起來像是一個是/否的問題,一個布林問題。像這種情況,我推薦使用返回布林值的Array.includes。
使用Array.find 代替Array.filter
Array.filter是一個非常有用的方法。它從另一個數組中建立一個新陣列,所有項都傳遞迴調引數。 如其名稱所示,我們必須使用此方法進行過濾,並獲得更短的陣列。
但是,如果知道我們的回撥函式只能返回一個項,我將不會推薦它,例如,當使用一個通過唯一ID過濾的回撥引數時。在這種情況,Array.filter 將會返回一個新的只含有一個項陣列。通過查詢特定的ID,我們的意圖可能是使用陣列中包含的唯一值,使這個陣列無用。
一起討論下效能,為了返回所有與回撥函式陣列匹配的項。Array.filter必須遍歷整個陣列。 此外, 想象一下,如果返回值有數百個是符合的項 ,過濾陣列將變得非常龐大。
為了避免這些情況,我推薦Array.find.它需要一個像 Array.filter的回撥引數,它返回滿足這個回撥的第一個元素的值。此外,Array.find 當項返回回撥的時停止,它不需要瀏覽全部陣列。
使用Array.some代替Array.find
我承認我犯過很多次這個錯誤,然而,一個好朋友告訴我,檢查 JavaScript/Reference/Global_Objects/Array#Methods_2" rel="nofollow,noindex" target="_blank">MDN documentation 是一個很好的方法。事情是這樣的:這與我們的Array. indexof /Array.includes 非常相似。
在前面的例子中,我們看到了Array.find需要一個回撥作為引數,並返回一個元素。如果我們需要知道陣列中是否包含值,那麼Array.find是最佳解決方案?可能不會,因為它返回一個值,而不是一個布林值。
像這種情況,我推薦使用Array.some 返回一個需要的布林值。
使用Array.reduce代替Array.filter連線Array.map
事實上,理解Array.reduce並不簡單。這是真的,但是,如果我們執行 Array.filter, 然後執行Array.map 看起來像遺漏了些什麼對吧?
我的意思是,這裡我們遍歷了兩遍陣列。第一次過濾並生成一個短陣列,第二次通過Array.filter又創造了新的陣列,包含基於獲得的新值。為了得到新的陣列,我們使用了兩個Array方法。每個方法有自己的回撥函式和一個以後不能使用的陣列—由Array.filter建立陣列。
為了避免在這個問題上表現不佳, 我建議使用Array.reduce 來代替.同樣的結果,更完美的程式碼!Array.reduce 允許您過濾和新增滿意的專案累加器。例如, 這個累加器可以是要遞增的數字、要填充的物件、要連線的字串或陣列。
在我們的例子中,自從我們使用 Array.map,我推薦使用Array.reduce 作為陣列累加器. 在下面的例子中, 根據env的值, 我們將把它新增到累加器中,或者讓這個累加器保持原樣。
就是這樣!
希望這個有幫助. 如果你對這篇文章有什麼想法或者有其他例子要展示,一定要留下評論。如果你發現這篇文章對你有幫助,一定要給我個贊並將它分享出去。感謝閱讀!
PS: 你可以在twitter( https://twitter.com/pacdiv_io) 上關注我。
Note: 在評論中 ,正如前面提到的 malgosiastp 和 David Piepgrass , 使用前請檢查框架是否支援 Array.find 和 Array.includes,目前Internet Explorer是不支援的。