zoukankan      html  css  js  c++  java
  • javascript map forEach filter some every在购物车中的实战演练区分用法

    1.map forEach

    1.map 循环遍历每一项,返回一个新的数组

    例: 购物车商品小计:

    //购物车
    var cart=[
      {"id":101,"name":"大米","count":1,"price":3.3,"check":1},
      {"id":102,"name":"小米","count":2,"price":3.3,"check":1},
      {"id":103,"name":"二米","count":3,"price":3.3,"check":1},
    ]
    //每个购物车中的小计
    var cartPrices =cart.map(item=>{
      return (item.count*item.price).toFixed(2)
    })
    console.log(cartPrices); 
    
    2.forEach 循环遍历每一项,并不返回值

    例:计算商品价格的总和:

    //购物车
    var cart=[
      {"id":101,"name":"大米","count":1,"price":3.3,"check":1},
      {"id":102,"name":"小米","count":2,"price":3.3,"check":1},
      {"id":103,"name":"二米","count":3,"price":3.3,"check":1},
    ]
    //每个购物车中的小计
    var cartPrices = cart.map(item=>{
      return (item.count*item.price).toFixed(2)
    })
    //计算总和
    var totalPrice = 0
    cartPrices.forEach((item,index)=>{
      totalPrice+=parseFloat(item);
    })
    console.log(totalPrice.toFixed(2));
     
    

    2.filter 过滤出正确的那一项

    例: 显示购物车信息

     //商品ID
    var id = 101;//101胶水'.'
    //购物车
    var cart=[
      {"id":101,"name":"大米","count":1,"price":3.3,"check":1},
      {"id":102,"name":"小米","count":2,"price":3.3,"check":1},
      {"id":103,"name":"二米","count":3,"price":3.3,"check":1},
    ]
    //过滤出该商品信息
    var goods = cart.filter(item=>{
      return item.id == id;
    })
    console.log(goods);
    

    3.some 和 every 过滤每一项是否有正确的

    1.some 如果有满足条件返回true不在向下执行 ,如果没有满足条件返回false

    例: 购物车是否选中

      //商品ID
    var id = 101;//101胶水'.'
    //购物车
    var cart=[
      {"id":101,"name":"大米","count":1,"price":3.3,"check":0},
      {"id":102,"name":"小米","count":2,"price":3.3,"check":1},
      {"id":103,"name":"二米","count":3,"price":3.3,"check":1},
    ]
    //过滤购物车商品是否选中状态
    var ischeck = cart.some(item=>{
      if(item.id == id){
        return item.check;
      }
    })
    console.log(ischeck)
    
    
    2.every 数组的每一项是否都满足条件返回true,否则返回false

    例:购物车商品是否全选状态

    //商品ID
    var id = 101;//101胶水'.'
    //购物车
    var cart=[
      {"id":101,"name":"大米","count":1,"price":3.3,"check":1},
      {"id":102,"name":"小米","count":2,"price":3.3,"check":0},
      {"id":103,"name":"二米","count":3,"price":3.3,"check":1},
    ]
    //过滤购物车商品是否选中状态
    var isallcheck = cart.every(item=>{
        return item.check;
    })
    console.log(isallcheck)
    
    
  • 相关阅读:
    最常用和最难用的控件--ListView(Android第一行代码)
    LayoutInflater的使用
    JAVA的网络编程【转】
    Android 程序调试
    android Log日志使用
    Android Animation
    实现ImageView宽度填满屏幕
    Android ViewPager使用详解
    对另一个布局文件里的Button按钮进行监听
    如何在一个Activity里使用另一个xml布局文件
  • 原文地址:https://www.cnblogs.com/subtract/p/8595593.html
Copyright © 2011-2022 走看看