如何更好的使用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是不支援的。