Javascript使用push添加对象时数组原有对象全部被替换问题

问题原因 #

• JS中对象属于引用类型，你在全局作用域只初始化了唯一一个person对象，后续所有修改操作都是在这同一个对象上执行，push到数组里的所有元素都是指向该对象的内存地址，所以你每次修改属性都会同步影响数组里所有的元素，看起来就像旧元素被新对象替换了。
• 额外的代码疏漏：HTML里的姓氏输入框id为surnam，但JS中取值时用的id是surname，二者不匹配会导致姓氏字段永远取不到值。

修复方案 #

1. 删掉全局无用的var person={};声明，每次添加用户时创建全新的对象
2. 统一输入框id和JS取值的id，你可以选择修改HTML里的输入框id为surname，也可以修改JS里的取值id为surnam

修改后的addPerson代码参考：

function addPerson(){
    // 每次新增都创建独立的新对象
    const newPerson = {};
    newPerson.name = document.getElementById("name").value;
    // 这里要和你实际的输入框id保持一致，我这里用HTML里的surnam为例
    newPerson.surname = document.getElementById("surnam").value;
    newPerson.age = document.getElementById("age").value;
    people.push(newPerson);
    updTable();
}

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