Axios请求响应遍历异常求助：数组未正确生成

首先咱们来拆解你遇到的两个问题：

1. 为什么console.log('run: ' + item)只打印一次[object Object]？ #

这是JavaScript字符串拼接的特性导致的：当你把一个对象和字符串用+拼接时，JS会自动调用对象的toString()方法，而普通对象的默认toString()返回值就是[object Object]。实际上你的forEach循环是正常执行了多次的，只是每次打印的内容都一样，让你误以为只跑了一次。

如果想看到每个item的具体内容，直接用console.log('run:', item)（不用字符串拼接），或者console.dir(item)，就能看到完整的对象结构了；而你换成item.var4时，因为这是一个数值，拼接后会显示具体的数值，所以能看到多次不同的输出。

2. 为什么obj变量无法正确生成？ #

你的核心问题在于用数组obj来存储按index分组的数据，但数组的索引是基于0的连续整数，而你的item.index是从1开始的（比如示例里的index都是1），这会导致：

• 数组obj的第0位是undefined（因为你从来没给obj[0]赋值）
• 如果后续有不同的index值（比如2、3），数组会自动扩容，中间缺失的索引位置也会是undefined，最终得到一个稀疏数组，这大概率不是你想要的结果（比如后续用这个数组渲染图表时，空元素会导致异常）。

另外，你代码里的delete item.index其实是多余的，不会影响分组逻辑，可以去掉。

修复方案 #

推荐用对象来暂存分组数据，最后再把对象的值转换成数组，这样就能避免稀疏数组的问题：

.then(response => {
  let test = response.data;
  let groupedData = {}; // 用对象替代数组存储分组
  test.forEach(item => {
    console.log('run:', item); // 正确打印每个对象
    const index = item.index;
    // 如果当前index还没有对应的分组，初始化一个
    if (!groupedData[index]) {
      groupedData[index] = { name: index, type: 'scatter', data: [] };
    }
    // 把数据push到对应分组的data中
    groupedData[index].data.push([parseFloat(item.var3), parseFloat(item.var4)]);
  });
  // 把对象的所有值转换成数组，得到干净的分组数组
  this.series = Object.values(groupedData);
})

如果你坚持要用数组存储，也可以在最后过滤掉数组中的空元素：

.then(response => {
  let test = response.data;
  let obj = [];
  test.forEach(item => {
    console.log('run:', item);
    const index = item.index;
    if (!obj[index]) {
      obj[index] = { name: index, type: 'scatter', data: [] };
    }
    obj[index].data.push([parseFloat(item.var3), parseFloat(item.var4)]);
  });
  // 过滤掉数组中的undefined元素
  this.series = obj.filter(item => item !== undefined);
})

这样处理后，this.series就会是一个包含所有分组对象的正常数组，每个对象的data数组也会正确收集对应index的var3和var4数据了。

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