购物车

合集 - 蓝桥杯(21)

1.逃离二向箔2023-06-022.偷梁换柱2023-06-023.课程列表2023-06-024.粒粒皆辛苦2023-06-025.成语学习2023-06-026.消失的 Token2023-06-027.芝麻开门2023-06-028.资讯接口2023-06-029.防抖函数2023-06-0310.element-ui 组件二次封装2023-06-0411.心愿便利贴2023-06-04

12.购物车2023-06-04

13.绝美宋词2023-06-0414.布局切换2023-06-0515.和手机相处的时光2023-06-0516.天气趋势2023-06-0517.阅读吧2023-06-0518.宝贵的一票2023-06-0819.大电影2023-06-0820.封装 Promisefy 函数2023-06-0821.权限管理2023-06-08

收起

习题链接

购物车

任务

我们现在有一个购物车列表，在添加商品的时候，商品显示到购物车列表，重复添加数量加1，
好我们现在购物车列表已经有很多商品了，但是超出预算了，我要减掉一些商品，商品数量到0了就删除在购物车上的该商品

关键点

1. 数组遍历
   1. 这次遍历我使用的是forEach
   2. 在添加的时候使用if判断一下id是否相同，相同则让数量加1就好
   3. 如果没有相同的id就在遍历外部使用一个push添加进来就好了
2. 数组过滤
   1. 使用filter进行过滤，使用if进行判断id，相同则让数量减1
   2. 使用三元表达式进行判断num是否小于等于0，是就不返回数据，不是就返回true
   3. filter是不会修改原数组的，所以需要重新赋值

代码实现 && 完整的代码

1. 完成添加商品的函数

    addToCart(goods){
        // TODO：修改当前函数，实现购物车加入商品需求 
        let b = true;
        this.cartList.forEach(element => {
          if(element.id == goods.id) {
            element.num++;
            b = false;
          } 
        }) 
        if(b){
          goods.num = 1;
          this.cartList.push(goods);
          this.cartList = JSON.parse(JSON.stringify(this.cartList));
        }
    },
   

2. 完成删除商品的函数

   removeGoods(goods){
       // TODO：补全代码实现需求 
       this.cartList = this.cartList.filter((element,index) => {
         if(element.id == goods.id) element.num--;   
         return element.num <= 0 ? false : true; 
       }) 
   }
   

__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17455730.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！