前端对数据的几种常见处理及应用场景

1,439 阅读2分钟

1、对象数组中根据数组中每个对象的一个属性,在对象中新增一个字段,并根据该属性的状态赋予不同的值

场景一:

  • 描述:后台返回的数据只有单价和数量,逻辑需要根据数量和单价,计算每一个商品的总价
  • 场景图:

1648727599078.jpg

    // 后台返回的数据
    res.data=[{num:2,price:238},{num:4,price:213},...]
    //我们需要的数据
    data = [{num:2,price:238,sumPrice:2*238},{num:4,price:213,sumPrice:4*213}]
    //处理过程
    const data=res.data.map(item => { return {num:item.name,price:item.price,sumPrice:item.num * item.price} })
    

场景二:

  • 描述:为列表的每一项添加一个状态或者下标标识
  • 场景图:

11.png

    //后台数据
    res.data=[{...,status:0},{..., status:1}]
    //我们需要的数据
    data=[{...,status:0,isStudy:'去学习'},{...,status:1,isStudy:'已完成'}]
    //处理过程
    const data=res.data.map(item => {
        if(item.status) return {...item,isStudy:'已完成'}
        else return {...item,isStudy:'去学习'}
    })

2、对表格详情展示,做数据处理

  • 场景图:

6.png

7.png

    //后台数据 || 点击详情拿到的整行数据
    record = {id:0,name:'波波只会Cv',....}
    //我们需要的数据
    data = [{title:'用户ID',text:0},{title:'名字',text:'波波只会Cv'}...]
    //处理过程
    const list=[{title:'用户',text:record.id},{title:'名字',text:record.name}...]

3、点击按钮切换图片上下张(这里默认点击按钮是能拿到当前图片的索引)

    let list = [......]
    function getList(index){
        //先拷贝一下list,防止不必要的bug
        let newList = list.map(item => item)
        //定义一个变量储存当前数据(图片)的信息
        const tem = Object.assign(newList[index]);
        //把前一个数据拷贝一份赋值给当前数据
        newList[index] = Object.assign(newList[index - 1])
        //把tem赋值给前一个数据
        newList[index - 1] = tem
        //返回newlist
        return newList
    }

4、修改字段名

    //后台数据
    res.data = [{id:2,lable:'ssss'},...]
    //我们需要的数据
    data = [{uid:2,msg:'ssss'},...]
    //处理过程(浅处理)
    const data = res.data.map(item => { return {uid:item.id,msg:item.lable} })