如何编写可复用JS函数将对象数组转换为ApexCharts适配格式

你可以把需要提取的字段作为入参传入函数，即可实现通用复用，同时还兼容自定义显示名称的需求，顺便也修复了你原有实现中map遍历返回值冗余的问题。

基础通用实现 #

/**
 * 通用转换ApexCharts series格式函数
 * @param {Array} data 原始对象数组
 * @param {Array} extractKeys 需要提取的字段名数组
 * @returns {Array} 适配ApexCharts的series数组
 */
export const setupGraphSeries = (data, extractKeys) => {
  // 初始化结果数组
  const series = extractKeys.map(key => ({
    // 字段名首字母大写，和你原有输出格式对齐
    name: key.charAt(0).toUpperCase() + key.slice(1),
    data: []
  }))

  // 遍历原始数据填充数值
  data.forEach(item => {
    extractKeys.forEach((key, index) => {
      // 仅当字段存在时才写入，避免undefined污染数据
      if (item.hasOwnProperty(key)) {
        series[index].data.push(item[key])
      }
    })
  })

  return series
}

调用示例

针对你当前的场景，直接传入对应字段数组即可：

const result = setupGraphSeries(pressure, ['sistolica', 'diastolica', 'pulsazione'])

返回结果和你需要的目标格式完全一致。

进阶灵活版本（支持自定义显示名称） #

如果需要series的name和原字段名解耦（比如显示中文名称），可以用支持配置项的版本：

export const setupGraphSeries = (data, keyConfig) => {
  const series = keyConfig.map(config => ({
    name: typeof config === 'string' 
      ? config.charAt(0).toUpperCase() + config.slice(1)
      : config.name,
    data: []
  }))

  data.forEach(item => {
    keyConfig.forEach((config, index) => {
      const key = typeof config === 'string' ? config : config.key
      if (item.hasOwnProperty(key)) {
        series[index].data.push(item[key])
      }
    })
  })

  return series
}

该版本支持两种传入格式：

• 字符串数组格式，用法和基础版一致
• 配置对象数组格式，可自定义显示名称：

const result = setupGraphSeries(pressure, [
  {key: 'sistolica', name: '收缩压'},
  {key: 'diastolica', name: '舒张压'},
  {key: 'pulsazione', name: '脉搏'}
])

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