Angular NgRx Store中合并两数组后按索引删元素的问题求助

方法1：计算索引偏移量 #

这是最直接的方式，利用两个原数组的长度差转换索引：

• 原数组a的元素，在store数组中的索引和原索引一致，直接使用即可
• 原数组b的元素，在store数组中的索引 = 原数组a的长度 + 原数组b中的索引

比如你的例子：

• 原数组a长度为3，要删除b中索引2的元素'y'，转换后store中的索引是3 + 2 = 5，直接删除store数组第5项即可。

代码示例（NgRx reducer中处理）：

// 假设action携带了来源数组标识（比如source: 'a'或'b'）和原索引originalIndex
case YourActionTypes.DeleteItem:
  const { source, originalIndex } = action.payload;
  let storeIndex: number;
  if (source === 'a') {
    storeIndex = originalIndex;
  } else {
    // 建议动态获取原数组a的长度，避免硬编码
    storeIndex = state.a.length + originalIndex;
  }
  return {
    ...state,
    store: state.store.filter((_, idx) => idx !== storeIndex)
  };

方法2：存储带来源标识的对象 #

修改store的存储结构，每个元素携带原数组的来源和原索引信息，这样删除时可以精准匹配：
store数组结构改为：

[
  { source: 'a', originalIndex: 0, value: 'a' },
  { source: 'a', originalIndex: 1, value: 'b' },
  { source: 'a', originalIndex: 2, value: 'c' },
  { source: 'b', originalIndex: 0, value: 'x' },
  { source: 'b', originalIndex: 1, value: 'y' },
  { source: 'b', originalIndex: 2, value: 'z' }
]

删除时，直接根据来源和原索引过滤：

case YourActionTypes.DeleteItem:
  const { source, originalIndex } = action.payload;
  return {
    ...state,
    store: state.store.filter(item => !(item.source === source && item.originalIndex === originalIndex))
  };

这种方式虽增加了存储体积，但无需计算索引，逻辑更直观，也能避免原数组长度变化导致的偏移错误。

方法3：维护索引映射表 #

在store中额外维护一个索引映射对象，记录每个原数组元素对应的store索引：

// store中的结构
{
  store: ['a','b','c','x','y','z'],
  indexMap: {
    a: [0,1,2],
    b: [3,4,5]
  }
}

删除时，通过映射表直接获取store索引，同时同步更新映射表的后续索引：

case YourActionTypes.DeleteItem:
  const { source, originalIndex } = action.payload;
  const storeIndex = state.indexMap[source][originalIndex];
  const newStore = state.store.filter((_, idx) => idx !== storeIndex);
  
  // 同步更新索引映射表
  const newIndexMap = { ...state.indexMap };
  if (source === 'a') {
    newIndexMap.a = newIndexMap.a.map(idx => idx > storeIndex ? idx - 1 : idx);
    newIndexMap.b = newIndexMap.b.map(idx => idx - 1);
  } else {
    newIndexMap.b = newIndexMap.b.map(idx => idx > storeIndex ? idx - 1 : idx);
  }
  
  return {
    ...state,
    store: newStore,
    indexMap: newIndexMap
  };

这种方式适合频繁通过原索引操作的场景，但需要额外维护映射表的一致性，逻辑相对复杂。

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