解决JavaScript循环中对象引用导致的数据覆盖问题-js教程-PHP中文网

解决JavaScript循环中对象引用导致的数据覆盖问题

霞舞

发布： 2025-09-30 17:26:01

原创

331人浏览过

解决JavaScript循环中对象引用导致的数据覆盖问题

在使用JavaScript循环处理数据并构建对象数组时，常见陷阱是因对象引用导致数据覆盖。若在循环外初始化对象，每次迭代修改并推入数组的将是同一对象的引用，最终数组所有元素都指向最后一次修改的值。解决方案是在循环内部为每次迭代创建新的对象实例，确保每个数组元素都引用独立的数据副本，从而避免数据丢失或覆盖，实现正确的数据累积和文件写入。

理解JavaScript中的对象引用

在javascript中，当您将一个对象赋值给一个变量时，实际上是为该变量存储了指向内存中该对象的引用。这意味着，如果您将同一个对象引用多次推入一个数组，数组中的所有元素都将指向内存中的同一个对象。当该对象在循环中被修改时，所有引用它的数组元素都会反映这些修改，导致数据被覆盖，最终数组中的所有元素都显示为最后一次迭代的值。

问题场景分析

考虑以下代码片段，它尝试从一个JSON文件中读取数据，并通过循环构建一个新的数据结构并写入另一个JSON文件：

    let rawdata = fs.readFileSync('./input_data.json');
    let jsondata = JSON.parse(rawdata);
    let result='';
    let key='';
    let data = { // 'data' 对象在循环外部被初始化
       items: []
    } 
    myrecords=[];
      for(let i = 0; i < jsondata.records.length; i++) {
        let obj = jsondata.records[i];
        result = obj.Id
        items = jsondata.records[i].data
        data.items = [items]; // 每次循环都修改同一个 'data' 对象的属性
        data.key=result
        myrecords.push(data) // 将同一个 'data' 对象的引用推入数组
      }
   var log_file = fs.createWriteStream(__dirname + '/output.json', {flags : 'w'});
   var log_stdout = process.stdout;
   console.log = function(d) {
    log_file.write(util.format(d) + '\n');
    log_stdout.write(util.format(d) + '\n');
   };
   console.log(JSON.stringify(myrecords, null, 2))

登录后复制

上述代码的问题在于 data 对象在 for 循环外部被声明和初始化。在循环的每次迭代中，代码都修改了 data 对象的 items 和 key 属性，然后将 data 对象推入 myrecords 数组。由于 data 是一个对象，myrecords.push(data) 操作实际上是将 data 对象的引用添加到数组中。因此，myrecords 数组中的所有元素最终都指向内存中的同一个 data 对象。当循环结束后，data 对象会持有最后一次迭代的值，而 myrecords 数组中的所有引用都将指向这个被修改到最终状态的 data 对象，导致输出文件中只包含最后一个记录的数据。

解决方案：每次迭代创建新对象

要解决这个问题，关键是在每次循环迭代时创建一个全新的对象实例。这样可以确保每次推入 myrecords 数组的对象都是独立的，拥有各自的数据副本，而不是共享同一个引用。

以下是修正后的代码示例：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

立即学习“Java免费学习笔记（深入）”；

const fs = require('fs');
const util = require('util'); // 引入 util 模块，如果 console.log 重新定义需要用到

let rawdata = fs.readFileSync('./input_data.json');
let jsondata = JSON.parse(rawdata);
let myrecords = [];

for (let i = 0; i < jsondata.records.length; i++) {
  let obj = jsondata.records[i];
  let result = obj.Id;
  let items = jsondata.records[i].data;

  // 在每次循环迭代中创建一个新的 'data' 对象
  let data = { 
    items: [items],
    key: result
  };
  myrecords.push(data); // 推入新创建的独立对象
}

// 文件写入逻辑保持不变
var log_file = fs.createWriteStream(__dirname + '/output.json', { flags: 'w' });
var log_stdout = process.stdout;
console.log = function (d) {
  log_file.write(util.format(d) + '\n');
  log_stdout.write(util.format(d) + '\n');
};
console.log(JSON.stringify(myrecords, null, 2));

登录后复制

关键改动点： 将 let data = { items: [] } 的声明和初始化移动到 for 循环的内部。这样，在每次循环迭代时，都会创建一个全新的 data 对象。当 myrecords.push(data) 执行时，它会将一个指向这个新创建的、独立 data 对象的引用推入数组。因此，myrecords 数组将包含多个独立的 data 对象，每个对象都保存着其对应迭代的数据，从而正确地累积所有记录。

最佳实践与注意事项

对象引用与值拷贝： 在JavaScript中，基本数据类型（如字符串、数字、布尔值）是按值传递的，而对象（包括数组、函数）是按引用传递的。在处理对象时，务必注意这一点，以避免意外的数据覆盖。
循环中创建新对象： 当您需要在循环中构建一个包含多个独立对象的数据结构时，始终确保在每次迭代中创建新的对象实例。
使用 const 或 let： 推荐在循环内部使用 const 或 let 声明变量，这有助于限制变量的作用域，避免潜在的命名冲突和意外修改。
深拷贝与浅拷贝： 如果您的对象包含嵌套对象，并且您需要完全独立的副本（包括嵌套对象），则可能需要进行深拷贝（例如，使用 JSON.parse(JSON.stringify(originalObject)) 或专门的深拷贝库）。在本例中，由于 items 只是一个数组，[items] 创建了一个包含该数组的新数组，如果 items 本身是原始数据，这通常足够了。
文件写入： fs.createWriteStream 提供了一种高效的方式来写入文件。JSON.stringify(myrecords, null, 2) 用于将JavaScript对象转换为格式化的JSON字符串，其中 null 表示不使用替换函数，2 表示缩进级别，使输出JSON更具可读性。