JavaScript ES6 - 陣列處理方法整理
ES6 的章節差不多也要告一段落了,最後來整理一下幾個常用的陣列方法吧!
本文介紹的陣列方法有 forEach、map、filter、find、every、some、reduce 等。
在開始之前,先定義一下這次會用到的資料集。
1 | const people = [ |
那麼,以下進入正題:
forEach 與 map
forEach()
將陣列內的每個元素都傳入並執行給定的函式一次。
item
、index
、array
分別是:陣列裡的值、陣列的索引、陣列本身。
(最後一個參數 array
通常不太會用到)
1 | people.forEach(function (item, index, array) { |
map()
雖然 map()
與 forEach()
很像,但是他們兩者有一個最大的不同之處,就是 map()
會 return
一個值。
1 | const newPeople = people.map(function (item, index, array) { |
上方範例是把物件的內容 return
回去,並且加上一個 icash
的值。
因為 return
需要一個變數去接收,所以我們新宣告一個變數叫做 newPeople
。
所以 forEach()
與 map()
的差異就在於:forEach()
不會做 return
,但是 map()
會做 return
並成為一個新的陣列,而新舊陣列之間並無關係。
練習:過濾資料
加上條件式,透過 map()
過濾資料。
1 | const newPeople = people.map(function (item, index, array) { |
結果發現有些資料因為不符合條件,所以沒有 return
。然而 map()
的資料如果沒有 return
,該筆資料會呈現 undefined
。
因此,map()
其實不太適合用來做過濾。
map 觀念整理
map()
就是將return
的結果一個一個塞回去變數裡面 (newpeople
)。- 這個變數 (
newpeople
) 基本上是用陣列方式呈現。 map()
會做return
,然後成為一個新的陣列,此新陣列與舊陣列毫無關係。
filter 與 find
filter()
如果要過濾資料,還是推薦用 filter()
方法。
filter()
方法的參數一樣是帶值的本身 item
與索引 index
,而 return
的結果則是只有 true
或 false
。
而 filter()
會將 return
為 true
的值傳到前方的陣列。
範例:挑出金額少於 5000 的物件
1 | const filterPeople = people.filter(function (item, index) { |
find()
只會回傳符合條件的第一筆資料
我們沿用剛才的範例,把 filter()
改成 find()
。
1 | const findPeople = people.find(function (item, index) { |
結果不太一樣,剛才使用 filter()
過濾出兩筆資料,但現在使用 find()
卻只有一筆。
這是 find()
與 filter()
不同的地方,也就是 find()
只會回傳一次!
所以 find()
比較適合用來搜尋特定的值。
例如:找到金額等於 500 的物件
1 | const findPeople = people.find(function (item, index) { |
every 與 some
every()
:所有結果都為true
,return
才會是true
some()
:部分結果為true
,return
就是true
範例一:所有物件是否都超過 10000 元
1 | const ans = people.every(function (item, index) { |
如果有物件的 money
沒有超過 10000 元,結果就會是 false
。
範例二:是否有物件超過 10000 元
1 | const ans = people.some(function (item, index) { |
只要有一個物件的 money
超過 10000 元,結果就會是 true
。
reduce
reduce()
滿適合用來做一些 “數字” 的操作。
寫法與參數都與剛才的幾個方法不太一樣。
首先,第一個參數是 prev
,就是指「前一個參數」。
如果沒有前一個參數,就會以逗號後面的數值作為前一個參數。
第二個就是當前的參數 item
,第三個參數就是索引 index
。
範例:+500
1 | const newNumber = people.reduce(function (prev, item, index) { |
情境一:使用 reduce 來做加總
依序是 +500, +3000, +60000:
1 | const newNumber = people.reduce(function (prev, item, index) { |
情境二:比大小
比大小的話會使用到 Math.max(a, b)
這個方法,
它會將前後的值做比較,最終取一個比較大的值。
1 | const newNumber = people.reduce(function (prev, item, index) { |
那麼,以上幾個就是在處理陣列時,比較常應用的方法!
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。