JS陣列常用方法(一):reduce/filter/map

tingyiiii
tingyiiii
Published in
3 min readDec 27, 2020

常常拿到資料就開始跑迴圈,看到別人的程式碼都簡潔有力都好生羨慕呀!!於是常常看到別人用的方法就拿去查資料,想紀錄一下怎麼使用,才不會老是忘記又開始for…..XD

1. reduce((a, b, c, d) => ( ), initialValue )

//將陣列由左至右執行函式後,傳回單一值,共可接4個引數,其中a,b為必須,其他為optional//

a:可持續操作互動之值/b:當前迴圈跑到的陣列值/

可不填:

c:b在陣列中的索引值/d:呼叫此方法的陣列/initialValue:a的初始值

# 定義arr為數字1-5的陣列
const arr = [1,2,3,4,5]
# 對arr執行reduce方法,第一個參數sum可持續累積,第二個參數為陣列中的每個元素
arr.reduce((sum, number) => sum + number) #=> 15 (陣列總和)
# 第三個參數為目前number在陣列的索引值
arr.reduce((sum, number, currentIndex) => sum + number + currentIndex)
#=> 25
#=> (0+1+0)->(1+2+1)->(4+3+2)->(9+4+3)->(16+5+4) = 25
# 第四個參數為呼叫此方法的陣列本身
arr.reduce((sum, _number, _currentIndex, array) => sum + arr[0])
#=> 5
#=> 1 + (1 + 1 + 1 + 1) = 5
# 對arr執行reduce方法,初始值為5,得到陣列總和再+5
arr.reduce((sum, number) => sum + number, 5) #=> 20

2. filter((a, b, c) => ( ), thisArg)

//將陣列中函式回傳值為true的元素組合成新陣列02回傳//

a:當前迴圈跑到的陣列值/

可不填:

b:a在陣列中的索引值/c:呼叫此方法的陣列/thisArg:前面函式的 this

# 定義arr為數字1-5的陣列
const arr = [1,2,3,4,5]
# 對arr執行filter方法,將陣列中大於2的元素回傳回來成為新陣列
arr.filter((i) => i > 2) #=> [3, 4, 5]
# 第二個參數為目前number在陣列的索引值
arr.filter((i, index) => i > 2 && i === index + 1) #=> [3, 4, 5]

3. map((a, b, c) => ( ), thisArg)

//回傳陣列中每個元素經過函式運算後的回傳值為新陣列//

a:當前迴圈跑到的陣列值/

可不填:

b:a在陣列中的索引值/c:呼叫此方法的陣列/thisArg:前面函式的 this

# 定義arr為數字1-5的陣列
const arr = [1,2,3,4,5]
# 對arr執行map方法,將陣列中元素都x2後回傳回來成為新陣列
arr.map((i) => i * 2) #=> [2, 4, 6, 8, 10]
# 第二個參數為目前number在陣列的索引值
arr.map((i, index) => i * 2 + index) #=> [2, 5, 8, 11, 14]

--

--