Question

这是我的问题：我有一个函数，其中有一个变量，每次调用此函数时其值都会不断变化。在函数的代码后面，我将变量推入列表中。但是，当我多次这样做时，变量可以很好地堆叠，但是所有值都与新值相同。

var new_plane; //I define these variables here because I want to use it again in other functions
var list_plane = [];

var Planes = { //I define the object
    number: "",
    airline: ""
};

function add_plane() {
    new_plane = Planes;
    new_plane.number = 10; //Random number
    new_plane.airline = "Air France"; //Random airline of a list

    list_plane.push(new_plane); //I push the variable in the list

    for (let i = 0; i < list_plane.length; i++) {
        document.body.innerHTML += list_plane[i].number + " " + list_plane[i].airline + "<br />"; //The body is used for the example and the output too
    };
};

进入第一架飞机后，一切都很好。但是，当设置第二个平面时，两个平面具有相同的值，而不是它们自己的期望值。

Answer 1

移动

var Planes = { //I define the object
    number: "",
    airline: ""
};

在函数内部，因为否则，您对数组中的每个元素都有相同的对象引用。

另一种解决方案可能是使用Plane模式作为新对象的模板

// global
var Planes = {
        number: "",
        airline: ""
    };

function add_plane() {
    var new_plane = Object.assign({}, Planes); // get copy

    new_plane.number = 10;
    new_plane.airline = "Air France";

    list_plane.push(new_plane);

    for (let i = 0; i < list_plane.length; i++) {
        document.body.innerHTML += list_plane[i].number + " " + list_plane[i].airline + "<br />";
    } // no semicolon here
} // no semicolon here

Answer 2

这是因为new_plane引用相同的对象，并将其多次推入数组。

您可能希望每次这样都初始化一个新对象：

function add_plane() {
  const new_plane = {
    number: 10,
    airline: "Air France"
  };

  list_plane.push(new_plane);

  //...
}

但是我建议将数组作为参数传递给add_plane函数，甚至最好使用OOP。

Answer 3

无论对该对象有多少引用（即使在同一数组中），总体上您仍然只有一个对象。并且您正在更新该对象的属性。

相反，定义一个要插入到数组中的新对象：

function add_plane() {
    let new_plane = {
        number: 10, //Random number
        airline: "Air France" //Random airline of a list
    };

    list_plane.push(new_plane); //I push the variable in the list

    for (let i = 0; i < list_plane.length; i++) {
        document.body.innerHTML += list_plane[i].number + " " + list_plane[i].airline + "<br />"; //The body is used for the example and the output too
    };
};

Answer 4

那是因为您需要创建一个新的Planes实例：new_plane = new Planes（）;

您当前拥有的是一个声明为Planes的对象，并且您不断更新该实例的价格。无论是否将其添加到list_plane，该对象的任何其他使用都将被更新。

编辑：您还需要将声明更改为：

function Planes () { //I define the object
    number = "";
    airline = "";
}

这是使代码变为OOP的方式。我之前错过了差异，对此感到抱歉。

Answer 5

var list_plane = [];

var Planes = function (n, a) { //I define the object
    this.number = n;
    this.airline = a;
};

function add_plane(num, air) {
    list_plane.push(new Planes(num, air)); //I push the variable in the list
}

function printAirplanes () {
    for (let i = 0; i < list_plane.length; i++) {
        document.body.innerHTML += list_plane[i].number + " " + list_plane[i].airline + "<br />"; //The body is used for the example and the output too
    };
};

add_plane(10, "Air france");
add_plane(15, "KLM");

printAirplanes();

从发展的角度来看，我认为这更干净。重要的一件事：我认为您应该从添加的方法中删除for循环。

这也可以为ES2015和其他版本重写，但我想这可能是另一回事。

如何在同一列表中保持多次推送变量的值？

5 个答案: