函数仅从数组中删除项目但不更改值

Question

我创建了一个类，它获取计算机部件及其成本，并根据选择的部件计算它们。目前我有两个功能，一个是在报价中添加更多部分，另一个是删除部分。它在删除或添加项目的意义上可以正常工作，但不会改变总成本。当我移除零件时，价格保持不变，如果我添加更多零件也是如此。我能做些什么来让它按预期工作。代码如下：

class PriceCalc {
  Motherboard = 520.99;
  RAM = 250.4;
  SSD = 500.8;
  HDD = 400.66;
  Case = 375.5;
  Monitor = 600.75;
  Keyboard = 100.99;
  Mouse = 25.5;

  constructor(Obj) {
    this.parts = Obj;
    this.cost = "$" + Obj.reduce((a, b) => a + this[b], 0).toFixed(2);
    this.retail ="$" +(Obj.reduce((a, b) => a + this[b], 0) +Obj.reduce((a, b) => a + this[b], 0) * 1.75).toFixed(2);
    this.quote = "Your quote is " + this.retail;
  }
  add(item) {
    this.parts = [...this.parts, item];
  }
  remove(item) {
    this.parts = this.parts.filter((x) => x !== item);    
  }
}

quote4 = new PriceCalc(["RAM", "SSD", "Case", "Mouse"]);
console.log(quote4.parts);//Returns ["RAM", "SSD", "Case", "Mouse"]
console.log(quote4.cost);//Returns $1152.20
console.log(quote4.retail);//Returns $3168.55
console.log(quote4.quote);//Returns "Your quote is $3168.55"

quote4.remove("Case")
console.log(quote4.parts);//Returns ["RAM", "SSD", "Mouse"]
console.log(quote4.cost);//Returns $1152.20
console.log(quote4.retail);//Returns $3168.55
console.log(quote4.quote);//Returns "Your quote is $3168.55"

目前 this.cost/retail/quote 在添加或删除内容时不会更改，而在添加或删除项目时应该修改它们。目前我可以更改值的唯一方法是手动更改被调用数组中的部分。我该如何解决这个问题？

Answer 1

每当添加新项目或删除项目时，您都需要重新计算它们。由于需要从不同的地方重新计算它们（constructor、add 和 remove），因此一种新方法（例如，称为 calculate 或 update）非​​常适合，因为可重用代码应分组一个函数/方法，这样你就不会重复自己了。

另外，cost 和 retail 应该是数字而不是字符串。您正在使用reduce 计算cost，然后使用相同的reduce 两次计算retail，这应该避免。只需计算cost 并使用cost 计算retail。

最后，add 和 remove 不应在每次删除或添加项目时创建新数组。

class PriceCalc {
  Motherboard = 520.99;
  RAM = 250.4;
  SSD = 500.8;
  HDD = 400.66;
  Case = 375.5;
  Monitor = 600.75;
  Keyboard = 100.99;
  Mouse = 25.5;

  constructor(initialParts) {                                    // always choose good names for your variables. initialParts makes more sense than Obj
    this.parts = initialParts;                                   // store the initial parts
    calculate();                                                 // calculate cost, retail and quote
  }

  add(item) {
    this.parts.push(item);                                       // use push instead of creating a new array (which is an overkill)
    calculate();                                                 // recalculate cost, retail and quote
  }

  remove(item) {
    this.parts = this.parts.filter((x) => x !== item);           // I'd rather use this https://stackoverflow.com/a/5767357 over filter but filter is shorter so OK
    calculate();                                                 // recalculate cost, retail and quote
  }

  calculate() {                                                  // the method that calculates cost, retail and quote
    this.cost = this.parts.reduce((a, b) => a + this[b], 0);     // calculate cost and store as a number instead of a string
    this.retail = this.cost + this.cost * 1.75;                  // calculate retail using the value of this.cost and also store as a number (you can use this.retail = 2.75 * this.cost; which is the same)
    this.quote = "Your quote is $" + this.retail.toFixed(2);     // generate the quote (notice the added $ sign and the call to toFixed(2))
  }
}