如何实现订单步骤数组默认值与历史状态数据的匹配逻辑

你可以通过「先构建历史状态映射，再遍历默认步骤匹配」的逻辑实现需求，两种常用写法如下：

写法1：高性能版本（推荐） #

用Map构建状态名到历史记录的映射，避免重复遍历历史数组，适合状态数量较多的场景：

// 默认订单步骤
const defaultSteps = [
  'In preparation',
  'Order taken from courier',
  'Order is on its way',
  'Order delivered to customer',
  'Partner declined order'
];

// 后端返回的状态历史数据
const history = [ 
  { status_name: "In preparation", status_id: "62a74ac2fc767ef024f031cd", date_updated: "2022-06-14T20:29:51.784+00:00" }, 
  { status_name: "Order taken from courier", status_id: "62a74ac2fc767ef024f031cd", date_updated: "2022-06-14T20:29:51.784+00:00" } 
];

// 构建状态名 -> 历史记录的映射表
const historyMap = new Map(
  history.map(record => [record.status_name, record])
);

// 遍历默认步骤生成目标数组
const result = defaultSteps.map(step => {
  return historyMap.get(step) ?? step;
});

写法2：简洁版本（适合少量步骤场景） #

如果订单步骤数量很少（比如个位数），可以直接用数组find方法匹配，代码更简短：

const result = defaultSteps.map(step => {
  const matchedRecord = history.find(record => record.status_name === step);
  return matchedRecord || step;
});

运行结果 #

两种写法得到的result结构完全一致：

[
  {
    status_name: "In preparation",
    status_id: "62a74ac2fc767ef024f031cd",
    date_updated: "2022-06-14T20:29:51.784+00:00"
  },
  {
    status_name: "Order taken from courier",
    status_id: "62a74ac2fc767ef024f031cd",
    date_updated: "2022-06-14T20:29:51.784+00:00"
  },
  "Order is on its way",
  "Order delivered to customer",
  "Partner declined order"
]

兼容性提示：如果需要适配非常老的浏览器不支持??运算符，可以把return historyMap.get(step) ?? step替换为return historyMap.has(step) ? historyMap.get(step) : step即可。

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