blocks|key|310232|text|尝试在addNew函数中直接初始化用户对象，而不是在外部初始化：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|310233|function+addNew(){

+++var+user=+{
++++++++firstName:+"None",
++++++++lastName+:+"None",
++++++++age+:+0,
++++++++bodyType+:+"None",
++++++++height+:+0,
++++++++bdayDay+:+0,
++++++++bdayMonth+:+"None",
++++++++bdayYear+:+0,
++++++++gender:+"None"
++++};
...
}|code-block|syntax|javascript|310234|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try to initialize the user object directly in the addNew function and not outside:

<pre><code>function addNew(){

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

blocks|key|310583|text|创建对象时，将其推送到数组，然后进一步编辑对象，还可以编辑数组中的对象，因为数组只包含对对象的引用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|310584|例如：|310585|var+obj+=+{
++++name:'mark'
}

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

obj.name=+"tom"
console.log(arr)
//[+{+name:+'tom'+}+]|code-block|syntax|javascript|310586|每次都要在数组中覆盖对象。相反，您可以这样做：|310587|function+addnew(){
+++var+user+=+{}
+++user.firstName+=+document.getElementById("fname").value;
+++//+etc.
}|310588|每次函数运行时都要创建一个新对象。|310589|或者，您可以使用一种方法，在要创建对象时定义构造函数并调用new：|offset|length|style|CODE|310590|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.
}|310591|这样做的优点是以后能够通过在用户原型上定义方法来组织行为。|310592|entityMap^0|0|0|0|0|0|0|T|3|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@$Q|17|R|18|S|T]]|9|@]|A|$]]|$1|U|3|V|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

When you create an object, push it to an array, and then further edit the object, you edit the object in the array as well because the array just holds a reference to the object. 

For example:

<pre><code>var obj = {
 name:'mark'
}

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

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

You are overwriting your object in the array every time. You can instead do something like:

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

To create a new object every time the function runs.

Alternatively you could use an approach where you define a constructor function and call <code>new</code> when you want to create an object:

<pre><code>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.
}
</code></pre>

This has the advantage of later being able to organize behavior by defining methods on the User prototype.

blocks|key|2246239|text|代码中只有一个全局变量user。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2246240|我认为您想要采用面向对象的风格，您的var+user是一个原型。见MDN。|2246241|除此之外，eykjs的解决方案是正确的。您的快速解决方案是必须在函数中初始化变量：|2246242|function+addnew(){
++++var+user+=+{
++++...|code-block|syntax|javascript|2246243|代码不能工作的原因是，在JavaScript中，对象是通过引用传递的，这实际上意味着如果将一个对象赋值给另一个变量，它们将是同一个对象。|2246244|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects^0|B|4|0|I|8|X|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|18|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|19|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

You only have one global variable <code>user</code> in your code.

I think you want to do object-oriented style, where your <code>var user</code> is a prototype. See <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects" rel="nofollow noreferrer">MDN</a>.

Apart from that, eykjs' solution is correct. Your quick solution is that the variable must be initialized inside the function:

<pre><code>function addnew(){
 var user = {
 ...
</code></pre>

The reason your code doesn't work is that in JavaScript, objects are passed by reference, which essentially means that if you assign one object to another variable, they will be the same object.

blocks|key|611770|text|使用构造函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|611771|function+User(firstNameElement,+lastNameElement,+ageElement)+{
++this.firstName+=+document.querySelector(firstNameElement).value
++this.lastName+=+document.querySelector(lastNameElement).value
++this.age+=+document.querySelector(ageElement).value
}|code-block|syntax|javascript|611772|当用户提交表单时调用new+User(firstNameElement,+lastNameElement,+ageElement)。|offset|length|style|CODE|611773|可以将像showFirstName这样的方法放在原型中以节省内存，如下所示：|611774|User.prototype.showFirstName+=+function()+{
++return+this.firstName
}|611775|entityMap^0|0|0|A|1J|0|4|D|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@$I|Y|J|Z|K|L]]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

Use a constructor:

<pre><code>function User(firstNameElement, lastNameElement, ageElement) {
 this.firstName = document.querySelector(firstNameElement).value
 this.lastName = document.querySelector(lastNameElement).value
 this.age = document.querySelector(ageElement).value
}
</code></pre>

call <code>new User(firstNameElement, lastNameElement, ageElement)</code> when the user submits the form.

Methods like <code>showFirstName</code> can be placed in the prototype to save memory like so:

<pre><code>User.prototype.showFirstName = function() {
 return this.firstName
}
</code></pre>

blocks|key|310265|text|虽然我认为我有理由解释为什么会失败，但我想提供另一个解决方案。与其使用函数作为新对象的构造函数，我建议使用新的对象文本。也许是这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|310266|​|310267|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);
}|code-block|syntax|javascript|310268|310269|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/3874623/mark-m^0|5|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]]]

While I think that <a href="https://stackoverflow.com/users/3874623/mark-m">@Mark_M</a> has the reasoning about why this is failing I wanted to offer another option for fixing it. Instead of using a function as a constructor for a new object I would recommend a new object literal instead. Maybe something like:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);
}</code></pre>
</div>
</div>

so what i'm attempting to do is, get the data entered in forms and store them in their respective variables within an object. After that I want to append said object to an empty array and repeat the process. using the function showMe()., i want to print value at specified index. However, no matter the index i set, it only gives me the value of last item added to the array. Where did i go wrong??

<pre><code>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);
}
</code></pre>

Array Not Updating in Javascript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

所以我要做的是，获取表单中输入的数据，并将它们存储在对象中各自的变量中。在此之后，我希望将said对象追加到空数组中，并重复该过程。使用函数 showMe().，我希望在指定索引处打印值。但是，无论我设置的索引是什么，它都只给出了添加到数组中的最后一项的值。我哪里出错了？？var USERS = [];var user...

问数组在Javascript中没有更新
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问数组在Javascript中没有更新EN