iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧系列 第 28

[想試試看JavaScript ] 陣列一些操作陣列好用的方法 reduce

reduce()

reduce 很常用在計算累加上面。

之前介紹的方法,大多都是將陣列的值一個一個放進 callback 函式做計算,接著回傳新陣列

reduce 則是將每次放進 callback 函式計算完的值,再一次一次放進 callback 函式計算,最後再回傳一個值出來。

reduce 可以將原陣列的元素,由左至右,從第一個到最後一個,一個一個傳進 callback 函式做計算,同時也將每一次計算完的值,一次一次地傳進 callback 函式

簡單範例:

var a=[1,2,3,4,5,6,7,8];
var b=a.reduce(function(sum,e){
	return sum+e;
})
console.log(a); // [1,2,3,4,5,6,7,8]
console.log(b); // 36 (1+2+3+4+5+6+7+8)

參數 sum 就是上一次計算完的結果

可以印出來看看

var a=[1,2,3,4,5,6,7,8];
var b=a.reduce(function(sum,e){
	console.log(sum); // 印出 1,3,6,10,15,21,28,36
	return sum+e;
})
console.log(a); // [1,2,3,4,5,6,7,8]
console.log(b); // 36 (1+2+3+4+5+6+7+8)

會印出

1

3 (1+2)

6 (3+3)

10 (6+4)

15 (10+5)

21 (15+6)

28 (21+7)

36 (28+8)

語法:

reduce 會將元素以及 callback 函式運算的結果,一次一次傳進 callback 函式做計算

calback 函式有四種參數

  1. accumulator,累加器,累加器上一次呼叫後,所回傳的累加數值
  2. currentValue,陣列中正在處理的元素,也就是正被傳進 callback 函式的元素
  3. currentIndex(選填),原陣列正被處理的元素的索引,如果有傳入
  4. array(選填),

另外 callback 函式後面還可以放一個參數

  1. initialValue(選填),累加器的初始值
Array.reduce(function callback(accumulator,currentValue,currentIndex,array){
  //	return 
},initailValue)

上一篇
[想試試看JavaScript ] 陣列一些操作陣列好用的方法 map
下一篇
[想試試看JavaScript ] 陣列一些操作陣列好用的方法 some() every()
系列文
想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧30

尚未有邦友留言

立即登入留言