JavaScript中array.push方法的异常行为问题排查

我之前也踩过一模一样的坑！你遇到的这个诡异问题，大概率是因为每次push到矩阵里的都是同一个数组/对象的引用，而不是新创建的独立行。当你修改这个“模板”行的内容时，所有已经push进去的行因为指向同一个内存地址，都会跟着同步变化。

先把你的场景里的问题逻辑还原一下（假设你的行构建逻辑是类似这样的错误写法）：

// 错误示例：重复复用同一个数组引用
function buildChartSeries(qry) {
  var chartMatrix = [];
  // 错误点：只创建了一次数组，后续循环一直复用这个引用
  var tempRow = ['', '', 0]; 
  var uniqueModels = ['California T', 'Ferrari 488', 'GTC4Lusso']; // 提取的唯一车型

  for (var i = 0; i < uniqueModels.length; i++) {
    tempRow[1] = uniqueModels[i];
    tempRow[2] = parseFloat(10 + i*5);
    chartMatrix.push(tempRow); // 每次push的都是同一个tempRow的引用！
  }
  return chartMatrix;
}

这种写法下，chartMatrix里的每一行其实都是指向同一个tempRow数组，最后所有行都会变成循环最后一次赋值的结果。

解决办法：每次push前创建新的行实例 #

核心就是确保每次添加到矩阵的都是新的独立数组/对象，而不是复用同一个引用。有几种常用的实现方式：

1. 每次循环时直接新建数组
   最直观的方式，在循环内部创建新数组，彻底避免引用复用：

function buildChartSeries(qry) {
  var chartMatrix = [];
  var uniqueModels = ['California T', 'Ferrari 488', 'GTC4Lusso'];

  for (var i = 0; i < uniqueModels.length; i++) {
    // 每次循环都创建全新的数组实例
    var newRow = ['', uniqueModels[i], parseFloat(10 + i*5)]; 
    chartMatrix.push(newRow);
  }
  return chartMatrix;
}

2. 用slice()或展开语法创建副本
   如果你的行是基于某个模板修改的，可以用slice()（针对数组）或者对象展开语法（针对对象）来创建独立副本：

// 数组副本示例
var templateRow = ['', '', 0];
var newRow = templateRow.slice(); // 创建一个全新的数组副本
newRow[1] = 'California T';
chartMatrix.push(newRow);

// 对象类型的行用展开语法
var templateObj = {month: '', model: '', total: 0};
var newObj = {...templateObj}; // 创建对象副本
newObj.model = 'California T';
chartMatrix.push(newObj);

3. 检查extractColumn函数里的引用问题
   回到你的原始需求，在提取唯一车型构建折线图系列的逻辑里，要确保处理每一行时都是操作新的数组实例，不要在循环外提前创建行变量然后反复修改复用。

快速验证问题的方法 #

你可以在push之后打印一下数组的引用关系，确认是不是同一个对象：

console.log(chartMatrix[0] === chartMatrix[1]); 
// 如果返回true，说明两行指向同一个引用，问题根源就在这！

这样修改后，再push新行就只会添加独立的新数据，再也不会出现修改新行影响所有旧行的情况了。

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