时间戳

首页 > 解决方案 > 函数仅从数组中删除项目但不更改值

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

问题描述

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

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 在添加或删除内容时不会更改，而如果添加或删除项目，则应修改它们。目前我可以更改值的唯一方法是手动更改被调用数组中的部分。我该如何解决这个问题？

标签： javascriptarraysfunctionclassobject

解决方案

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

此外，costandretail应该是数字而不是字符串。您正在使用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))
  }
}

推荐阅读