RxJS：使用 groupBy 并从值创建键/值对

Question

假设我有这个 observables 数组：

animals$ = from([ 
   { animal: 'rat', color: 'grey', speed: 2 },
   { animal: 'rat', color: 'black', speed: 3 },
   { animal: 'dog', color: 'grey', speed: 2 },
   { animal: 'dog', color: 'black', speed: 1 },
   { animal: 'cat', color: 'grey', speed: 5 },
   { animal: 'cat', color: 'black', speed: 1 },
]);

我想得到一个如下格式的可观​​察数组，其中结果按动物类型分组，按动物字母顺序排序，颜色值转换为速度值的键：

[ 
   { animal: 'cat', grey: 5, black: 1 },
   { animal: 'dog', grey: 2, black: 1 },
   { animal: 'rat', grey: 1, black: 3 },
]

是否可以使用 groupBy？到目前为止，我发现的大多数示例都大不相同，结果是在数组中，而不是组合成键/值对。

Answer 1

IMO 更适合这种情况的是 RxJS reduce 运算符 + Array#findIndex 函数对对象进行分组，RxJS map 运算符 + Array#sort 函数对数组元素进行排序。

试试下面的

const { from } = rxjs;
const { map, reduce } = rxjs.operators;

const animals$ = from([ { animal: 'rat', color: 'grey', speed: 2 }, { animal: 'rat', color: 'black', speed: 3 }, { animal: 'dog', color: 'grey', speed: 2 }, { animal: 'dog', color: 'black', speed: 1 }, { animal: 'cat', color: 'grey', speed: 5 }, { animal: 'cat', color: 'black', speed: 1 }, ]);

animals$.pipe(
  reduce((acc, curr) => {
    const idx = acc.findIndex((item) => item.animal === curr.animal);
    if (idx !== -1) {
      acc[idx] = {
        ...acc[idx],
        [curr.color]: curr.speed,
      };
    } else {
      acc = [
        ...acc,
        {
          animal: curr.animal,
          [curr.color]: curr.speed,
        },
      ];
    }
    return acc;
  }, []),
  map((animals) =>
    animals.sort((a1, a2) =>
      a1.animal > a2.animal ? 1 : a1.animal < a2.animal ? -1 : 0
    )
  )
).subscribe(console.log);

.as-console-wrapper { max-height: 100% !important; top: 0px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.4.0/rxjs.umd.min.js"></script>

工作示例：Stackblitz

Answer 2

另一种解决方案如下：

of([
  { animal: 'rat', color: 'grey', speed: 2 },
  { animal: 'rat', color: 'black', speed: 3 },
  { animal: 'dog', color: 'grey', speed: 2 },
  { animal: 'dog', color: 'black', speed: 1 },
  { animal: 'cat', color: 'grey', speed: 5 },
  { animal: 'cat', color: 'black', speed: 1 },
])
  .pipe(
    map((result) => {
      let res: { animal: string; grey: number; black: number }[] = [];

      const animals = new Set(result.map((x) => x.animal));

      animals.forEach((animal) => {
        const grey: number = result
          .filter((x) => x.animal === animal && x.color === 'grey')
          .map((x) => x.speed)
          .reduce((x, y) => x + y);

        const black = result
          .filter((x) => x.animal === animal && x.color === 'black')
          .map((x) => x.speed)
          .reduce((x, y) => x + y);

        res.push({
          animal,
          grey,
          black,
        });
      });

      return res;
    })
  )

工作示例：Stackblitz