JavaScript | 你常用的 Array Methods 是我常用的嗎？

Published in

Starbugs Weekly 星巴哥技術專欄

8 min readJan 4, 2022

Hi！大家好，我是神 Q 超人！在整理 StarBugs 推薦文章的時候，常常會看到許多人分享他們覺得常用且重要的 array methods。於是我就好奇了，那麼多人常用的 array methods 都會是相同的嗎？為了滿足這個好奇心，我就一口氣找了十篇介紹 array methods 的文章 👏：

今天這篇文章的內容，就要從以上十篇文章中統計出五個，這些開發者覺得最讚的 array methods！那在開始之前，我也先來列出我自己心中最愛的五個 array methods，待會來看看會命中多少。另外大家也可以一起想想，如果要推薦給朋友的話，會首推哪些 array methods 呢？

就我的話大概會是以下排名：

Array.map
Array.filter
Array.includes
Array.find
Array.some/Array.every

那廢話不多說，我們就直接開始吧！ 🚀

Array Methods

公佈名次前，先來簡單介紹什麼是 array methods 吧！它又和 for 迴圈有什麼不一樣？對我來說 array methods 它定義了更加「語義化」的函式名稱，像是如果你要對 array 裡每個值都做一些操作，並產生出新的 Array，就使用 Array.map；想要判斷 array 中是否擁有某些元素就用 Array.includes。

這些 array methods 都可以讓我們不需要寫一行又臭又長的 for 迴圈，也不需要做一些邏輯外的操作，像是還要自己建立新 array 然後慢慢 push，或是判斷要不要提早結束迴圈等等。建議在學習或寫 JavaScript 的開發者都可以去著了解各個 array methods 提供的操作！

接下來就開始公佈名次吧！

Array.filter（第一名，10 票）

上方總共收入了 10 篇文章，而所有的文章中都提到了 Array.filter！Array.filter 可以幫你過濾元素，並回傳一個新的 Array。例如你有一串數字，但只想要留下大於 100 的數字，就可以這樣子寫：

除此之外，我在工作中也常用 Array.filter 做移除。例如在眾多待辦事項中我想要移除其中一個，就會這樣做：

Array.reduce（第二名，9 票）

我想 Array.reduce 是在前五名中相對少人知道的一個，Array.reduce 會將「上一次的結果」放進「這一次的參數」執行。介紹到 Array.reduce 的用法幾乎都是用在計算加總（包括 MDN 也是），像是這樣子：

可以看到上方的 Array.reduce 接收的方法有兩個參數，一個是 prevTotal，另一個是 num，prevTotal 的值會是上一次的回傳值，而 num 就是當前的數字。比較特別的是 Array.reduce 在第一次執行的時候，會沒有上一次的執行結果，所以 Array.reduce 可以有第二個參數指定初始值（上方程式碼區塊第三行的 0），但如果沒有特別指定的話預設值也會是 0。

所以以上方的例子來說，每一次的 prevTotal 和 num 會是這樣子：

// 第一次，prevTotal 是初始值，num 是 array 裡第一個值
prevTotal = 0, nums = 89// 第二次，prevTotal 是 0 + 89，num 是 array 裡第二個值
prevTotal = 89, nums = 32// 第三次，prevTotal 是 89 + 32，num 是 array 裡第三個值
prevTotal = 121, nums = 104...依此類推

還有另外一個比較特別的用法，就是把一連串要執行的方法放到 array 中，並讓 Array.reduce 依序執行，例如我要將某個字串轉成數字，並且將小數無條件進位：

雖然正常來說不需要特地這樣寫，但如果你無法事先知道到底會需要執行多少方法的時候才會有奇效，像是之前在面試某間公司的時候，就有提過可以用 Array.reduce 來實作類似 middleware 的功能，但就目前為止我還是只有在計算合計時用上而已。順帶一提 Array.reduce 是從左到右執行，如果有特殊需求的話 Array.reduceRight 可以由右到左執行喲！

Array.find/Array.findIndex（第三名，8 票）

因為 Array.find 和 Array.findIndex 的差別只有在 Array.find 是回傳找到的元素，Array.findIndex 則是回傳找到的 index，所以在統計時的這兩個方法我就一起算了。就像上方所說的 array methods 會提供統一且更語義化的操作名稱，而 Array.find 和 Array.findIndex 就人如其名，是用來在 array 中找符合元素的：

使用時需要注意的大概就是 Array.find/Array.findIndex 都只會找到第一個符合的元素，所以如果你是想要找出所有符合元素，那就得使用 Array.filter。還有就是如果找不到東西的話，Array.find 會回傳 undefined；Array.findIndex 則是回傳 -1。

Array.map/Array.forEach（第四名，7 票）

第四名有兩個 array methods 同時得到 7 票，所以就一起抓出來講。首先說說 Array.map，它會將 array 中所有的值都經過處理，並回傳處理過後的新 array。像是這樣子：

另外如果有在寫 React 的話，因為 React 沒有像 Vue 一樣的 v-for 語法糖，因此在需要顯示某個 array 的資料時，幾乎都會使用 map 處理。

另一個第四名是 Array.forEach，它可以取代 for 的用法，但它沒有像是 filter 或 map 一樣的特殊功能，也不會回傳任何東西，就單純只是跑過 array 的所有元素而已，該做什麼事情全都由你決定。使用方式如下：

我只有在沒有對應方法可以使用的時候，才會選擇 Array.forEach，另外要注意的是 Array.forEach 是一定會將全部的元素都跑過一遍，沒有什麼 break 等語法可以跳出哦！

Array.includes（第五名，6 票）

最後是得到 6 票的 Array.includes（每個名次都只有 1 票之差，看來競爭激烈 😂），Array.includes 會接收一個值，然後判斷該值有沒有在 array 中，有的話就回傳 true，否則回傳 false。使用方法如下：

但是 Array.includes 有個小缺點，就是如果要比對的 array 裡面是 object 的話，就不能用 Array.includes 去判斷（可能要搭配 Array.map 先把 id 取出來再用 Array.includes），但是在需要簡單判斷的情況下還是很好用的！

Array.some/Array.every（落選，4 票）

最後提一下我相當看好，但是沒有擠進前五名的 Array.some 和 Array.every。這兩個方法很像，先來說說 Array.some，Array.some 是指在執行過程有一個 true 就會回傳 true。它可以用來當作 Array.includes 的高階版，判斷某個符合條件的 object 是否有存在在 array 中：

另一個 Array.every 則是要執行過程全部都是 true 才會回傳 true，否則就是 false，在實務上我會在表單驗證時使用，代表當所有的驗證都回傳 true 才算通過。以下是一個判斷 input 是否為有效數字的簡單例子：

統計完後，其實我對 Array.reduce 在第二名有點意外 😂，感覺它不是那麼常見到的方法，但就很多人介紹。那不曉得大家看完統計出來的前五名有什麼想法，如果有有完全猜到所有上榜的 array methods，或是有哪些 array methods 你覺得是遺珠的都歡迎留言告訴我 🙌。