javascript - 为什么我的对象变量在控制台日志中为空？

Question

我现在正为此精神崩溃......

我正在开发一个基于 vue 的小型网站。 在这个特定的部分中，我想将一个项目添加到列表中。

这是我的代码:

addItem() {
  this.items.push(this.itemToBeProcessed);
  this.itemToBeProcessed.id = null;
  this.itemToBeProcessed.name = "";
  this.itemToBeProcessed.price = null;
  this.itemToBeProcessed.buyers = [];
  this.itemToBeProcessed.amountPurchased = null;
},
async checkInput() {
  let item = this.itemToBeProcessed;
  if (item.name != "" &&
      item.id != null &&
      item.price != null &&
      item.amountPurchased != null &&
      item.buyers != []) {
    console.log(this.itemToBeProcessed.id)
    console.log(this.itemToBeProcessed)
    console.log(this.itemToBeProcessed.id)
    this.addItem();
  } else {
    alert("Not all Fields are set correctly!")
  }
}

我的数据结构:

data() {
return {
  itemToBeProcessed: {
    id: null,
    name: "",
    price: null,
    amountPurchased: null,
    buyers: [],
  },
  items: [],
}

}

如您所见，我尝试通过控制台记录我的 itemToBeProcessed。 在 checkInput 方法中，我有三个控制台日志。我的问题是控制台每次都会写入正确的 id。 另一方面，只有当我注释掉 addItem() 中的重置或完全注释掉方法调用时，我想要记录的项目才会正确记录。否则所有属性都为 null 或 []。

我根本不知道这怎么会是我的错误。

感谢您的回复!

Answer 1

当您使用 items.push 添加项目时，您不会在列表中推送副本，而是推送对与 相同的对象的引用this.itemToBeProcessed.

因此，当您在推送后立即重置 this.itemToBeProcessed 上的所有字段时，您也会重置列表中元素的字段，因为它引用同一个对象!

一个可能的解决方案是使用浅拷贝:

this.items.push(Object.assign({}, this.itemToBeProcessed));

在这里，您推送一个新对象，其中包含从 this.itemToBeProcessed 复制的所有字段，这应该可以解决您的问题

下面找到一个示例来阐明根本问题:

// With an element as a simple type like string, no issue here.
// I'll change element after being pushed, the list stays "the same".

let list = [];
let element = "aaa";

list.push(element);
console.log(list);

element = "bbb";
console.log(list);

element = null;
console.log(list);



// But if we're dealing with objects, changing element would "change the content" of the list as well.
// Objects variables hold _references_ to an object, they internally refer to the same one!
list = [];
element = { name: "aaa" };

list.push(element);
console.log(list);

element.name = "bbb";
console.log(list);

element.name = null;
console.log(list);

在您的代码中:

function addItem() {
  console.log("(addItem) Items before push:");
  console.log(this.items);
  console.log("(addItem) Items after push:");
  this.items.push(this.itemToBeProcessed);
  console.log(this.items);
  this.itemToBeProcessed.id = null;
  this.itemToBeProcessed.name = "";
  this.itemToBeProcessed.price = null;
  this.itemToBeProcessed.buyers = [];
  this.itemToBeProcessed.amountPurchased = null;
  console.log("(addItem) Items after having mutated itemToBeProcessed:");
  console.log(this.items);
}

this.items = [];
this.itemToBeProcessed = { id: 123, name: "hello", price: 2.1, buyers: [3, 4, 5]};

console.log("Initial:")
console.log(this.items);
console.log(this.itemToBeProcessed);

console.log("calling addItems...");
addItem(this.itemToBeProcessed);

console.log("after addItems:");
console.log(this.items);
console.log(this.itemToBeProcessed);