使用reduce完成一个小功能

hello 大家好 今天我学习了 reduce()方法 来做一个小案例巩固知识吧 ~!

落地代码:

  <script>
      var arr = [
        { label: '男', value: 1 },
        { label: '女', value: 0 }
      ]

      function f(arr) {
        // 写代码,得到
        return arr.reduce((acc, cur) => {
          acc[cur.value] = cur.label
          return acc
        }, {})
      }
      var obj = f(arr)
      console.log(obj) //  {'1': '男',  '0': '女'}
    </script>

简化代码:

<script>
      var arr = [
        { label: '男', value: 1 },
        { label: '女', value: 0 }
      ]

      function f(arr) {
        // 写代码,得到
        return arr.reduce((acc, cur) => ((acc[cur.value] = cur.label), acc), {})
      }
      var obj = f(arr)
      console.log(obj) //  {'1': '男',  '0': '女'}
    </script>

小结:

千万不要轻易去尝试 简化  因为 简化完成你自己可能都不认识他  eslintrc 都会看不过去

  好了 我们下次见 bye~

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Vue.js开发购物车功能时,可以使用计算属性来实现购物车的逻辑。计算属性是在Vue实例中定义的一个属性,其值根据其他数据的变化而变化,类似于响应式的计算结果。 下面是一个简单的购物车示例,展示如何使用计算属性完成购物车功能: ```html <!DOCTYPE html> <html> <head> <title>购物车</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>购物车</h2> <ul> <li v-for="item in items" :key="item.id"> {{ item.name }} - ¥{{ item.price }} <button @click="addToCart(item)">加入购物车</button> </li> </ul> <h3>购物车内容:</h3> <ul> <li v-for="cartItem in cartItems" :key="cartItem.id"> {{ cartItem.name }} - ¥{{ cartItem.price }} </li> </ul> <p>总价:¥{{ total }}</p> </div> <script> new Vue({ el: "#app", data: { items: [ { id: 1, name: "商品1", price: 100 }, { id: 2, name: "商品2", price: 200 }, { id: 3, name: "商品3", price: 300 } ], cart: [] }, computed: { cartItems() { // 根据购物车中的商品id,从商品列表中获取对应的商品信息 return this.items.filter(item => this.cart.includes(item.id)); }, total() { // 计算购物车中商品的总价 return this.cartItems.reduce((total, item) => total + item.price, 0); } }, methods: { addToCart(item) { // 将商品id添加到购物车数组中 this.cart.push(item.id); } } }); </script> </body> </html> ``` 在这个示例中,我们使用Vue.js构建了一个简单的购物车功能。商品列表中包含了三个商品,每个商品都可以点击"加入购物车"按钮将其添加到购物车中。计算属性`cartItems`根据购物车数组中的商品id,在商品列表中过滤出对应的商品信息。计算属性`total`根据购物车中的商品信息计算出总价。 请注意,这只是一个简单的示例,实际的购物车功能可能涉及到更复杂的逻辑,例如数量的增减、删除商品等。这个示例可以作为一个起点来为你的购物车功能添加更多的功能和业务逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值