Chart.js generateLabels回调无法返回多组min/max/avg标签问题求助

我基于以下对象数组开发图表：

var probeData = [ { min: 0.02, max: 1.44, avg: 0.73 },
                   { min: 0.06, max: 1.57, avg: 0.76 } ]

原本的回调函数仅返回每个对象的max标签：

generateLabels: (_chart) => {
  return probeData.map((obj, i) => ({
    text: `UCL ${i+1} ${obj.max}`,
    index: i,
  })
);

现在我想为每个对象返回对应的min、max、avg三个标签，但尝试以下写法后，回调仅返回两个avg标签，而非预期的6个值：

generateLabels: (_chart) => {
  return probeData.map((obj, i) => ({
    text: `UCL ${i+1} ${obj.max}`,
    index: i,
  },
  {
    text: `LCL ${i+1} ${obj.min}`,
    index: i,
  },
  {
    text: `AVG ${i+1} ${obj.avg}`,
    index: i,
  }) 
);

请问我哪里出错了？

问题原因与修复方案 #

错误原因 #

你在map回调里用逗号分隔三个对象的写法是错误的。JavaScript中，()包裹的逗号表达式会返回最后一个值，所以每个probeData元素的map回调最终只返回了最后一个AVG对应的对象，导致最终数组只有2个元素，也就是两个avg标签。

修复方案 #

要让每个probeData元素生成3个标签对象，需要把这三个对象放到一个数组里，再用flatMap替代map（flatMap会自动将嵌套数组展平为一维数组）：

generateLabels: (_chart) => {
  return probeData.flatMap((obj, i) => [
    {
      text: `UCL ${i+1} ${obj.max}`,
      index: i,
    },
    {
      text: `LCL ${i+1} ${obj.min}`,
      index: i,
    },
    {
      text: `AVG ${i+1} ${obj.avg}`,
      index: i,
    }
  ]);
}

如果你的运行环境不支持flatMap，可以用map结合扩展运算符和concat实现同样效果：

generateLabels: (_chart) => {
  return [].concat(...probeData.map((obj, i) => [
    {
      text: `UCL ${i+1} ${obj.max}`,
      index: i,
    },
    {
      text: `LCL ${i+1} ${obj.min}`,
      index: i,
    },
    {
      text: `AVG ${i+1} ${obj.avg}`,
      index: i,
    }
  ]));
}

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