JavaScript如何合并两个Map数组并将多源数据渲染到同一张表格

1. 预处理第二个数组为ID映射表 #

首先将来自API的价格数组转换为以ID为键、价格为值的对象，避免每次渲染行都遍历数组查询，大幅提升查找效率。假设第二份接口返回的数组名为priceData，结构为[{id: 1, price: 149.03}, ...]，预处理代码如下：

// 基础写法
const priceMap = Object.fromEntries(
  priceData.map(item => [item.id, item.price])
)

// 兼容低版本JS的reduce写法
// const priceMap = priceData.reduce((acc, cur) => {
//   acc[cur.id] = cur.price
//   return acc
// }, {})

如果是React项目，推荐用useMemo缓存映射表，仅当价格数组变更时才重新计算：

import { useMemo } from 'react'

const priceMap = useMemo(() => {
  return Object.fromEntries(priceData.map(item => [item.id, item.price]))
}, [priceData])

2. 修改表格渲染逻辑新增列 #

在原有fees列的后方新增价格列，直接从映射表中取对应ID的价格即可，同时增加兜底展示处理无匹配数据的情况：

{data.portfolioHoldings.map((portfolioholding) => (
  <tbody key={portfolioholding.id}>
    <tr key={portfolioholding.id}>
      <th scope="row">{portfolioholding.id}</th>
      <td>{portfolioholding.ticker_symbol}</td>
      <td>{portfolioholding.amount}</td>
      <td>{portfolioholding.fees}</td>
      {/* 新增最新价格列 */}
      <td>{priceMap[portfolioholding.id] ?? '--'}</td>
    </tr>
  </tbody>
))}

注：使用??空值合并运算符做兜底，仅当匹配值为undefined/null时显示--，不会误处理0元的合法价格，比||更适配业务场景。另外你原有代码缺失</tr>、</tbody>闭合标签，需要补上避免渲染异常。

可选异步兼容处理 #

如果两个数据源是异步获取的，渲染前增加加载判断避免空值报错：

if (!data?.portfolioHoldings || !priceData) return <div>数据加载中...</div>

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