• 如果你在使用reduce時，希望能清楚的掌握每個過程，方便debug，除了可以在accumulate func裡去印出之外，另一個就是scan啦!

scan

• 從彈珠圖來看，scan再每一次進行累加的動作，都會回報累加的結果，來看個例子
  

圖片來源-RxJS官網-scan

case1: 比較一下scan及reduce

stackblitz

console.log('=== reduce() ===');
import { from, reduce, scan } from 'rxjs';
const myReduce$ = from([1, 2, 3, 4, 5])
  .pipe(
    reduce((accum, current) => accum + current, 0) //<-- RxJS reduce
  )
  .subscribe(console.log);

console.log('=== scan() ===');
const myScan$ = from([1, 2, 3, 4, 5])
  .pipe(
    scan((accum, current) => accum + current, 0) //<-- RxJS scan
  )
  .subscribe(console.log);

• 從印出的結果來看，reduce僅在最後一次印出，而scan則每一次的結果，都會回報，確實掌握每個動作!

case2: scan + Object+array data

• 接到Object-array如果想把特定的值蒐集起來，方便後續使用，你可以這麼做!
  stackblitz

import { from, scan, map } from 'rxjs';

console.log('=== scan() Object-array data ===');
const data = [
  { name: 'One', height: '160', sex: 'male' },
  { name: 'Two', height: '180', sex: 'female' },
  { name: 'Three', height: '155', sex: 'male' },
];
const myScan$ = from(data)
  .pipe(
    scan((accum, current) => [...accum, current.name], []) //<-- 將每次的結果放入array中
  )
  .subscribe(console.log);

  
//印出結果
//["One"]
//["One", "Two"]
//["One", "Two", "Three"]

同場加映:將累加的結果做些加工，並輸出array

...
const myScan$ = from(data)
  .pipe(
    scan((accum, current) => [...accum, current.name], []), //<-- 將每次的結果放入array中

    // 看看底下出現什麼有趣的情形
     map((name) => 'member-' + name), //<-- 做個加工
     toArray() // 將累加的最終結果蒐集完，轉為array以利下一步
  )
  .subscribe(console.log);

// 印出
// ["member-One", "member-One,Two", "member-One,Two,Three"]

✍Recap

1. reduce:累加每一個值，直到最後一個值處理完，才會發出訊號。
2. scan:累加每一個值，過程中會持續回報累加的結果，直到最後一個值處理完才結束。
3. 善用accumulate func針對Object-array資料進行拆解，組合出你要的array，以利後續動作。

• 今天依然優秀，完成了day12的任務，成功只給願意付出的人，咱們繼續努力~ Rock