javascript - For Loop 项目未添加到购物篮中

Question

我的 sumUpItems 函数运行良好。但是，我在将商品添加到购物篮时遇到问题。第二个功能不起作用。我做错了什么？

  sumUpItems() {
      let sum = 0;
      for (const item of this.basketItems) {
        sum += Number.parseFloat(item.price);
      }
      return sum;
    },
    basketCount() {
      let count = 0;
      for (let item of this.basketItems) {
        count = ++item;
      }
      return count;
    }
  }

Answer 1

sumUpItems()

您可以使用reduce函数来简化sumUpItems，您可以在数组this.basketItems上调用该函数。

最短的方法是:

sumUpItems() {
  return this.basketItems.reduce((totalPrice, basketItem) => totalPrice + basketItem.price, 0);
}

reduce函数的作用是对数组的每个元素执行一个reducer函数，从而产生单个输出值，在本例中是所有篮子项目的totalPrice。

如果您更喜欢使用括号，您可以这样写:

sumUpItems() {
  return this.basketItems.reduce((totalPrice, basketItem) => {
    return totalPrice + basketItem.price;
  }, 0);
}

或者在 ES5 javascript 中(没有箭头功能):

sumUpItems() {
  return this.basketItems.reduce(function(totalPrice, basketItem) {
    return totalPrice + basketItem.price;
  }, 0);
}

我建议您将 sumUpItems() 函数名称重命名为 getTotalPrice() 或类似名称，它更具体地描述了该函数的作用和返回内容。

篮子计数()

basketCount() 未返回正确数量的商品的原因是变量 count 的增量无效。 let item 保存 this.basketItems 内数组项的对象值，并且您正在尝试将此对象添加到数字中。

你可以直接返回 this.basketItems 的长度:

basketCount() {
  return this.basketItems.length;
}

额外信息

减少函数文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

您可以在数组上调用一些强大的方法。

最常见的是map、filter和reduce方法。当您开始使用时，reduce 方法有点棘手，但在这种情况下它们会很方便。

我建议您在媒体上阅读这篇文章:https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d或者在谷歌上搜索 map ，过滤和减少JavaScript数组，这会对你有很大帮助;)