如何在NgRx选择器中正确实现两个数组间的参数赋值？

嘿，我明白你现在的需求——你已经有两个独立的选择器分别获取array和associates数据，现在想要把这两个数组的参数关联起来，给其中一个数组的项附上另一个数组的对应数据对吧？这种场景在NgRx里太常见了，咱们可以通过创建组合选择器来解决。

先回顾下你现有的基础选择器：

// array data
export const getArray = createSelector(
  selectArrayFeature,
  (state: fromArray.State) => state.array
);

// associates data
export const getAssociates = createSelector(
  selectAssociatesFeature,
  (state: fromAssociates.State) => state.associates
);

接下来咱们创建一个新的组合选择器，把两个数组的数据结合起来完成参数赋值。假设你的array项里有一个associateId字段，用来匹配associates数组中项的id字段，具体代码如下：

// 组合两个数组，给array的每个项关联对应的associate数据
export const getArrayWithAssociates = createSelector(
  getArray,
  getAssociates,
  (array, associates) => {
    // 先把associates转成Map结构，这样查找对应项的时间复杂度是O(1)，性能更好
    const associatesLookupMap = new Map(associates.map(assoc => [assoc.id, assoc]));
    
    // 遍历array，给每个项添加对应的associate属性
    return array.map(item => ({
      ...item,
      // 根据实际的匹配字段调整，这里用item.associateId匹配assoc.id
      matchedAssociate: associatesLookupMap.get(item.associateId) || null
    }));
  }
);

这个选择器的工作逻辑： #

• 它会自动依赖你已有的getArray和getAssociates选择器，只要其中任意一个数组的数据更新，这个组合选择器就会重新计算结果
• 把associates转成Map是为了避免嵌套循环（如果直接用find的话，时间复杂度是O(n*m)），当数组数据量较大时，这个优化很重要
• 遍历array的每个项，通过匹配字段找到对应的associate数据，赋值给新的属性（比如这里的matchedAssociate），如果找不到对应项就设为null，避免出现undefined

如何使用这个选择器： #

在你的组件里，直接订阅这个组合选择器就能拿到已经关联好数据的数组：

this.arrayWithAssociates$ = this.store.select(getArrayWithAssociates);

如果你的匹配逻辑不是基于ID，而是其他字段，只需要调整Map的键和查找的字段就行，比如如果是用name匹配，就把assoc.id换成assoc.name，item.associateId换成item.associateName。

内容的提问来源于stack exchange，提问作者antonyboom