记一次接口数据获取最大最小值

有个需求需要在一个对象数组中找到最大值和最小值以及中间值,用来显示不同的按钮。

所处环境:VUE2

示例:一个简化的数组:

var l=[
    {num:23},{num:54},{num:17},{num:89},{num:41}
]

需求: 

  • 我需要从这五个对象中找到num最小和最大的,并显示不同的按钮。
  • 当只有一个时,显示最小的按钮
  • 有两个以上且都相同时,显示中间值按钮
  • 多个最大或者最小且相同时,暂时没有考虑

思路:

  • 给每个小对象添加一个isMax属性,等于1表示最大,等于0表示最小,等于2表示中间值
  • 在第一次map循环开始,先找到最大最小值索引,然后每次循环根据最大最小索引添加当前对象的isMax属性值

具体代码:

let has;    // 用来控制第一次循环时的找到最大最小值索引

let max;
let min;    // 最大最小值索引

var newList=l.map((e,i,a)=>{
    if(!has){    // 只是在第一次循环之前获取到最大和最小值
        has=true;
        let aList=a.map(item=>item.num);    // 先把所有的num值取出来放到一个数组中
        max=aList.indexOf(Math.max(...aList));    // 利用Math对象的max与min方法和数组的indexOf方法找到最大值和最小值的索引
        min=aList.indexOf(Math.min(...aList));      
    }

    if(a.length==1){    // 如果只有一个元素,当前元素就是最小的
        a[i].isMax=0;
        return a[i];
    }

      if(i!=max&&i!=min){    // 如果当前索引不等于最大和最小值,就是2
        a[i].isMax=2;
      }else if(max==min){    // 如果最大值最小值相等,就都是中间值2
        a[i].isMax=2;
      }else if(i==max){    // 如果当前索引是最大值,为1
        a[i].isMax=1;
      }else{    // 如果当前索引是最小值,为0
        a[i].isMax=0;
      }

      return a[i];
})

 输入结果:

 此时就可以通过v-if指令控制对应的按钮显示

原文地址:https://www.cnblogs.com/codexlx/p/13862378.html