javascript對象被覆蓋

Question

我試圖獲取用戶輸入並將值推入數組。 但是數組只是將最后輸入的值復制到所有先前的值。 不知道我要去哪里錯了。

    var arrTest = [];
    var objTest = {};
    var inputName = prompt("Enter name");
    var inputValue = prompt("Enter value");

while (inputName.length > 0 && inputValue > 0) { 
    objTest.name = inputName;
    objTest.value = inputValue;
    arrTest.push(objTest);
    inputName = prompt("Enter name");
    inputValue = prompt("Enter value");
}

printDetails(arrTest);
}

function printDetails(arrN){
    var vOutput = ""
    for(var vIndex = 0; vIndex < arrN.length ; vIndex++){
    vOutput = vOutput +" Name: " + arrN[vIndex].name+ " Value :" + dogN[vIndex].value+ ";
    }
document.getElementById("output").innerHTML=vOutput;
}

如果僅輸入1值測試1，則輸出為

名稱：測試值：1

如果僅輸入2個值測試1，則最佳2輸出為

名稱：最佳價值：2名稱：最佳價值：2

我的期望值是：

名稱：測試值：1名稱：最佳值：2

我究竟做錯了什么？

Answer 1

您應該改用arrTest.push（objTest）。

另外，在while循環中聲明objTest。

代碼將為

 var arrTest = []; var inputName, inputValue; for (let i=0; i<3; i++) { // Here should be the declaration var objTest = {}; // User input inputName = prompt("Enter name"); inputValue = prompt("Enter value"); objTest.name = inputName; objTest.value = inputValue; arrTest.push(objTest); } printDetails(arrTest); function printDetails(arrN){ let vOutput = ""; for(let vIndex = 0; vIndex < arrN.length ; vIndex++){ vOutput = vOutput +" Name: " + arrN[vIndex].name+ " Value :" + arrN[vIndex].value+ "\\n"; } console.log(vOutput); } 

Answer 2

觀察到的行為的原因是，當您調用arrTest.push(objTest) ，實際上是在將對對象的引用添加到數組而不是對象本身。 然后，當您更改對象並再次將其推入時，您將向同一對象添加另一個引用，該引用僅包含更新的值。

您可以通過完全不使用變量來解決此問題，如下所示：

while (inputName.length > 0 && inputValue > 0) {
    arrTest.push({ name: inputName, value: inputValue });
    inputName = prompt("Enter name");
    inputValue = prompt("Enter value");
}

您可以在循環內定義對象，這樣您就不會在引用的對象上工作：

while (inputName.length > 0 && inputValue > 0) {
    const objTest = {}
    objTest.name = inputName;
    objTest.value = inputValue;
    arrTest.push(objTest);
    inputName = prompt("Enter name");
    inputValue = prompt("Enter value");
}

使用新的傳播語法，您甚至可以實現如下所示的操作：可以使用變量，在循環外定義變量，但仍不使用像這樣的引用：

while (inputName.length > 0 && inputValue > 0) {
    objTest.name = inputName;
    objTest.value = inputValue;
    arrTest.push({ ...objTest });
    inputName = prompt("Enter name");
    inputValue = prompt("Enter value");
}

Answer 3

我已經重寫了一些代碼。 嘗試這個。

 var arrTest = []; var objTest = {}; var inputName = prompt("Enter name"); var inputValue = prompt("Enter value"); while (inputName.length > 0 && inputValue.length > 0) { var objTest = {}; objTest.name = inputName; objTest.value = inputValue; arrTest.push(objTest); inputName = prompt("Enter name"); inputValue = prompt("Enter value"); } printDetails(arrTest); function printDetails(arrN){ console.log(arrN) /* do for loop */ }