时间戳

首页 > 解决方案 > javascript 对象被覆盖

javascript - javascript 对象被覆盖

问题描述

我正在尝试获取用户输入并将值推送到数组。但是该数组只是将输入的最后一个值复制到所有先前的值。不知道我哪里错了。

    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 个值 test 1，则输出为

名称：测试值：1

如果只输入 2 个值测试 1，最好 2 输出是

名称：最佳价值：2 名称：最佳价值：2

我的期望是值应该是：

名称：测试值：1 名称：最佳值：2

我究竟做错了什么？

标签： javascriptarraysobject

解决方案

观察到的行为的原因是，当您调用时，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");
}

推荐阅读