数组未在Javascript中更新

所以我要做的是，获取表单中输入的数据，并将它们存储在对象中各自的变量中。之后，我想将所述对象附加到一个空数组中，并重复该过程。使用函数showMe（），我想打印指定索引处的值。但是，无论我设置了什么索引，它都只给我添加到数组中的最后一项的值。我哪里出错了

var USERS = [];



var user= {

    firstName: "None",
    lastName : "None",
    age : 0,
    bodyType : "None",
    height : 0,
    bdayDay : 0,
    bdayMonth : "None",
    bdayYear : 0,
    gender: "None"

};

function addnew(){


   user.firstName = document.getElementById("fname").value;

   user.lastName =  document.getElementById("lname").value;

   user.age = document.getElementById("age").value;

   if (document.getElementById("genMale").checked)
        user.bodyType = document.getElementById("btMale").value;
   else
        user.bodyType = document.getElementById("btFemale").value;;


user.height = document.getElementById("Height").value;

    if (document.getElementById("genMale").checked)
        user.gender =  document.getElementById("genMale").value;
    else 
        user.gender = document.getElementById("genFemale").value;

    USERS.push(user);


}

function showMe(){

console.log(USERS[1].firstName);
}

---

尝试直接在addNew函数中而不是在外部初始化用户对象：

function addNew(){

   var user= {
        firstName: "None",
        lastName : "None",
        age : 0,
        bodyType : "None",
        height : 0,
        bdayDay : 0,
        bdayMonth : "None",
        bdayYear : 0,
        gender: "None"
    };
...
}

---

尝试直接在addNew函数中而不是在外部初始化用户对象：

function addNew(){

   var user= {
        firstName: "None",
        lastName : "None",
        age : 0,
        bodyType : "None",
        height : 0,
        bdayDay : 0,
        bdayMonth : "None",
        bdayYear : 0,
        gender: "None"
    };
...
}

---

创建对象时，将其推送到数组中，然后进一步编辑该对象，也可以编辑数组中的对象，因为数组仅包含对该对象的引用

例如：

var obj = {
    name:'mark'
}

var arr = [obj]
console.log(arr)
// [ { name: 'mark' } ]

obj.name= "tom"
console.log(arr)
//[ { name: 'tom' } ]

每次都会覆盖数组中的对象。您可以改为执行以下操作：

function addnew(){
   var user = {}
   user.firstName = document.getElementById("fname").value;
   // etc.
}

每次函数运行时创建新对象

或者，您可以使用一种方法，在创建对象时定义构造函数并调用

new

：

function User(){
    this.firstName = "None"
    this.lastName = "None"
    this.age = 0
    this.bodyType = "None",
    this.height = 0
    this.bdayDay = 0
    this.bdayMonth = "None"
    this.bdayYear = 0
    this.gender = "None"
}

function addnew(){
   var user = new User()
   user.firstName = document.getElementById("fname").value;
   // etc.
}

---

这样做的好处是，以后可以通过在用户原型上定义方法来组织行为。

创建对象时，将其推送到数组中，然后进一步编辑对象，也可以编辑数组中的对象，因为数组只包含对对象的引用

例如：

var obj = {
    name:'mark'
}

var arr = [obj]
console.log(arr)
// [ { name: 'mark' } ]

obj.name= "tom"
console.log(arr)
//[ { name: 'tom' } ]

每次都会覆盖数组中的对象。您可以改为执行以下操作：

function addnew(){
   var user = {}
   user.firstName = document.getElementById("fname").value;
   // etc.
}

每次函数运行时创建新对象

或者，您可以使用一种方法，在创建对象时定义构造函数并调用

new

：

function User(){
    this.firstName = "None"
    this.lastName = "None"
    this.age = 0
    this.bodyType = "None",
    this.height = 0
    this.bdayDay = 0
    this.bdayMonth = "None"
    this.bdayYear = 0
    this.gender = "None"
}

function addnew(){
   var user = new User()
   user.firstName = document.getElementById("fname").value;
   // etc.
}

---

这样做的好处是以后可以通过在用户原型上定义方法来组织行为。

您的代码中只有一个全局变量

User

我认为您希望采用面向对象的风格，其中您的

var用户

是一个原型。看

除此之外，eykjs的解决方案是正确的。您的快速解决方案是必须在函数内部初始化变量：

function addnew(){
    var user = {
    ...

---

代码不起作用的原因是，在JavaScript中，对象是通过引用传递的，这本质上意味着如果将一个对象分配给另一个变量，它们将是同一个对象。

代码中只有一个全局变量

user

我认为您希望采用面向对象的风格，其中您的

var用户

是一个原型。看

除此之外，eykjs的解决方案是正确的。您的快速解决方案是必须在函数内部初始化变量：

function addnew(){
    var user = {
    ...

代码不起作用的原因是，在JavaScript中，对象是通过引用传递的，这本质上意味着如果将一个对象分配给另一个变量，它们将是同一个对象。

使用构造函数：

function User(firstNameElement, lastNameElement, ageElement) {
  this.firstName = document.querySelector(firstNameElement).value
  this.lastName = document.querySelector(lastNameElement).value
  this.age = document.querySelector(ageElement).value
}

当用户提交表单时，调用新用户（firstNameElement、lastNameElement、ageElement）

类似于

showFirstName

的方法可以放在原型中以节省内存，如下所示：

User.prototype.showFirstName = function() {
  return this.firstName
}

使用构造函数：

function User(firstNameElement, lastNameElement, ageElement) {
  this.firstName = document.querySelector(firstNameElement).value
  this.lastName = document.querySelector(lastNameElement).value
  this.age = document.querySelector(ageElement).value
}

当用户提交表单时，调用新用户（firstNameElement、lastNameElement、ageElement）

类似于

showFirstName

的方法可以放在原型中以节省内存，如下所示：

User.prototype.showFirstName = function() {
  return this.firstName
}

虽然我认为这是为什么失败的原因，但我想提供另一种解决方法。我建议使用新的对象文本，而不是使用函数作为新对象的构造函数。可能是这样的：

function addnew(){
   var user = {}
   user.firstName = document.getElementById("fname").value;
   // etc.
}

var用户=[]；
var defaultUser={
名字：“无”，
姓氏：“无”，
年龄:0,，
bodyType:“无”，
高度:0,，
B工作日：0，
bdayMonth：“无”，
b日期：0，
性别：“无”
};
函数addnew（）{
常量newUser={
名字：document.getElementById（“fname”）.value，
lastName:document.getElementById（“lname”）.value，
年龄：document.getElementById（“年龄”）.value，
高度：document.getElementById（“高度”）.value，
性别：document.getElementById（“genMale”）。已选中
？document.getElementById（“genMale”）.value
：document.getElementById（“genFemale”）.value，
bodyType:document.getElementById（“genMale”）。已选中
？document.getElementById（“btMale”）.value
：document.getElementById（“btFemale”）.value
};
用户推送(
assign（defaultUser，newUser）；//使用默认值创建新对象
);
}
函数showMe（）{
console.log（用户[1].firstName）；
}

虽然我认为这是失败的原因，但我想提供另一种解决方法。我建议使用新的对象文本，而不是使用函数作为新对象的构造函数。可能是这样的：

function addnew(){
   var user = {}
   user.firstName = document.getElementById("fname").value;
   // etc.
}

var用户=[]；
var defaultUser={
名字：“无”，
姓氏：“无”，
年龄:0,，
bodyType:“无”，
高度:0,，
B工作日：0，
bdayMonth：“无”，
b日期：0，
性别：“无”
};
函数addnew（）{
常量newUser={
名字：document.getElementById（“fname”）.value，
lastName:document.getElementById（“lname”）.value，
年龄：document.getElementById（“年龄”）.value，
高度：document.getElementById（“高度”）.value，
性别：document.getElementById（“genMale”）。已选中
？document.getElementById（“genMale”）.value
：document.getElementById（“genFemale”）.value，
bodyType:document.getElementById（“genMale”）。已选中
？document.getElementById（“btMale”）.value
：document.getElementById（“btFemale”）.value
};
用户推送(
assign（defaultUser，newUser）；//使用默认值创建新对象
);
}
函数showMe（）{
console.log（用户[1].firstName）；
}

您何时调用所有这些方法？一个事件？是的，我正在一个事件中调用它。你什么时候来c