在JS中将JSON对象转类表格数组时遇所有行值重复问题

这种问题我见得太多了，十有八九是你在循环里重复使用了同一个对象的引用，而不是每次迭代都创建新对象。

举个例子，你可能写了类似这样的错误代码：

function formatJson(arr) {
  const newArr = [];
  const temp = {}; // 只创建了一个对象！
  for (let i = 0; i < arr.length; i++) {
    temp.date = arr[i].date_hour.value;
    temp.pm25 = arr[i].avg_pm2_5;
    temp.pm10 = arr[i].avg_pm10;
    newArr.push(temp); // 每次push的都是同一个temp的引用
  }
  return newArr;
}

为什么会出现全相同的结果？因为temp对象只在循环外初始化了一次，每次循环你修改的都是这个对象的属性，最后数组里的所有元素其实都是指向同一个对象的指针——自然最后全是最后一次循环赋值的内容。

正确的解决方法 #

方法1：每次循环创建新对象

把对象的初始化放到循环内部，确保每一行都是独立的新对象：

function formatJson(arr) {
  const newArr = [];
  for (let item of arr) {
    // 每次循环都新建一个对象
    const temp = {
      date: item.date_hour.value,
      pm25: item.avg_pm2_5,
      pm10: item.avg_pm10,
      ech1: item.avg_ech1,
      ech2: item.avg_ech2,
      ech3: item.avg_ech3,
      ech4: item.avg_ech4,
      data_points: item.data_points
    };
    newArr.push(temp);
  }
  return newArr;
}

方法2：用Array.map更简洁

map方法天生适合这种数组转换场景，它会为每个元素返回一个新对象，代码更清爽：

const formattedArray = array_json.map(item => ({
  date: item.date_hour.value,
  pm25: item.avg_pm2_5,
  pm10: item.avg_pm10,
  ech1: item.avg_ech1,
  ech2: item.avg_ech2,
  ech3: item.avg_ech3,
  ech4: item.avg_ech4,
  data_points: item.data_points
}));

验证一下 #

你可以打印新数组的元素，或者尝试修改其中一个元素的属性，看看其他元素会不会跟着变——如果是正确的写法，修改一个元素不会影响其他元素，说明每个对象都是独立的。

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