Question

所以我试图做的是，获取在表单中输入的数据并将它们存储在对象中的各自变量中。之后，我想将所述对象追加到一个空数组并重复该过程。使用功能 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);
}

Answer 1

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

function addNew(){

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

Answer 2

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

例如：

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原型上定义方法来组织行为。

Answer 3

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

我认为你想做面向对象的风格，你的var user是原型。请参阅MDN。

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

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

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

Answer 4

使用构造函数：

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

当用户提交表单时调用new User(firstNameElement, lastNameElement, ageElement)。

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

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

Answer 5

虽然我认为@Mark_M有理由说明为什么会失败，但我想提供另一个修复它的选项。我不建议使用函数作为新对象的构造函数，而是建议使用新的对象文字。也许是这样的：

＆＃13;

var USERS = [];
var defaultUser= {
    firstName: "None",
    lastName : "None",
    age : 0,
    bodyType : "None",
    height : 0,
    bdayDay : 0,
    bdayMonth : "None",
    bdayYear : 0,
    gender: "None"
};

function addnew(){
   const newUser = {
       firstName: document.getElementById("fname").value,
       lastName:  document.getElementById("lname").value,
       age: document.getElementById("age").value,
       height: document.getElementById("Height").value,
       gender: document.getElementById("genMale").checked
           ? document.getElementById("genMale").value
           : document.getElementById("genFemale").value,
       bodyType: document.getElementById("genMale").checked
           ? document.getElementById("btMale").value
           : document.getElementById("btFemale").value
   };

   USERS.push(
       Object.assign(defaultUser, newUser); //creates a new object with defaults
   );
}

function showMe(){
    console.log(USERS[1].firstName);
}

＆＃13;

数组未在Javascript中更新

5 个答案: