JavaScript：如何用循环创建对象数组？网页开发作业求助

你的代码卡顿甚至崩溃有两个核心问题：

• 循环内反复调用personsArr.fill(person)：fill会把数组所有元素替换成同一个person对象，循环10次重复执行这个操作属于完全冗余的低效行为，会造成不必要的性能消耗。
• 复用同一个person对象：就算调用randomPerson()，它修改的也是同一个对象的属性，最终数组里的10个元素其实都是指向同一个对象的引用，根本不是10个独立的随机person实例。

修复后的代码 #

// 每次创建全新的person结构，避免引用复用
function createEmptyPerson() {
  return {
    fname: "",
    lname: "",
    city: "",
    street: "",
    hobbies: [],
  };
}

const personsArr = [];

function persons10() {
  for (let i = 0; i < 10; i++) {
    const newPerson = createEmptyPerson(); // 生成新的空person对象
    randomPerson(newPerson); // 给新对象填充随机数据
    personsArr.push(newPerson); // 将独立对象加入数组
  }
}

persons10();
console.log(personsArr);

关键修改说明 #

• 新增createEmptyPerson()函数：每次调用都返回全新的person对象结构，确保数组中每个元素都是独立的引用。
• 用push替代fill：循环内完成「创建新对象→填充数据→加入数组」的流程，这才是批量生成独立对象的正确方式。
• 调整randomPerson()的调用方式：让它接收对象参数，直接修改传入的新对象属性，而不是修改全局的person变量，保证每个实例的随机数据独立。

如果你的原randomPerson()是直接修改全局对象的，需要改成参数形式，示例如下：

function randomPerson(person) {
  // 替换成你自己的随机填充逻辑
  person.fname = ["Alice", "Bob", "Charlie"][Math.floor(Math.random()*3)];
  person.lname = ["Smith", "Johnson", "Williams"][Math.floor(Math.random()*3)];
  // ...其他属性的随机赋值逻辑
}

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