如何以 Javascript 的方式運行多個過濾器

Question

基本上我有一個 React 前端，它從 API 接收一個包含 10,000 多個對象的數組，並且在這個對象內部它有幾個屬性。

像這樣：

const myArray =    
      [
         {
              userStatus: 'status1',
              userOrigin: 'city',
              userCountry: 'USA',
              ...
         },
         {
              userStatus: 'status2',
              userOrigin: 'city',
              userCountry: 'USA',
              ...
         },
         {
              userStatus: 'status3',
              userOrigin: 'city',
              userCountry: 'USA',
              ...
         },
        ....
    ]

我需要知道一些屬性的長度，所以我正在做的是使用 filter()。

...
myArray.filter((a) => a.userStatus === 'status1').length
myArray.filter((a) => a.userStatus === 'status2').length
myArray.filter((a) => a.userStatus === 'status3').length
...

問題是，由於有大量數據，我需要為幾個參數制作這些過濾器，結果最終會變得非常糟糕，有時甚至會導致瀏覽器崩潰。 有什么辦法可以更有效地做到這一點嗎？

Answer 1

通過減少對昂貴值的不必要的重新計算， useMemo掛鈎通常可以幫助解決此類問題。

import { useMemo } from 'react';
// ...
function MyComponent({myArray}) {
  const countStatus1 = useMemo(()=> myArray.filter(a => a.userStatus === 'status1').length, [myArray]);
  const countStatus2 = useMemo(()=> myArray.filter(a => a.userStatus === 'status2').length, [myArray]);
  const countStatus3 = useMemo(()=> myArray.filter(a => a.userStatus === 'status3').length, [myArray]);
  // ...
}

結合記憶化，您可以做的另一件事是使用reduce計算單個循環中的所有計數。 在上述情況下，這應該提高 3 倍的效率。

const counts = myArray.reduce((a, o) => {
  if(!a[o.userStatus]) a[o.userStatus] = 0;
  a[o.userStatus]++;
  return a;
}, {});
console.log(counts);
// example output, object of statuses with their counts:
// => { status1: 41, status2: 9, status3: 16 }