将构造函数创建的对象存入数组时出现索引为空问题求助

问题根源 #

• 你把myperson数组声明在了get_data函数内部，每次点击按钮都会重新创建一个空数组，之前存储的对象全部丢失。
• 全局变量i持续递增，第二次点击时i=1，直接给新数组的索引1赋值，导致数组索引0为空，看起来就只有一个有效元素。

修复方案 #

将myperson数组移到函数外部作为全局变量，同时用数组的push()方法追加元素，无需手动维护索引i，代码更简洁可靠。

修改后的JavaScript代码 #

// 数组放在全局，仅初始化一次
let myperson = [];
document.querySelector(".btn-danger").addEventListener("click", get_data);

function get_data() { 
    let first_name = document.querySelector(".f_name").value;
    let last_name = document.querySelector(".l_name").value;
    let age = document.querySelector(".age").value;
    // 用push自动将新对象追加到数组末尾
    myperson.push(new Person(first_name, last_name, age));
    console.log(myperson);
}

function Person(f_name, l_name, age) {
    this.f_name = f_name;
    this.l_name = l_name;
    this.age = age;
}

关键说明 #

• myperson作为全局变量，只会初始化一次，每次点击都会往同一个数组里添加新对象。
• push()方法自动将新元素放到数组最后，无需手动管理索引，彻底避免空索引问题。
• 移除了多余的全局变量i，代码逻辑更清晰。

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