前后端对接数组对象的常用方法...持续更新

135 阅读2分钟

image.png

前言

很多像我们这种初级前端菜鸟在刚开始工作是对于前后端数据处理时遇到数组对象数据处理往往都会有一点不知所措现在就我个人遇到的数据处理的场景来展示一下

数组对象遇到同名id或者唯一属性时往往需要合并,并对合并后的数据做一下处理

场景一遇到抽奖

let arrayName=[{
    id:1,
    name:'zhangsan',
    prize:1000
},{
    id:'haha',
    name:'lisi',
    prize:2000
},{
    id:3,
    name:'wangwu',
    prize:3000
},{
    id:'haha',
    name:'lisi',
    prize:500
}
]
//面对这种后端返回的数据结构,我们需要合并id为"haha"的对象并将prize合并之后通过组件去展示出来这时候我们就需要去处理
//想一想我们要用什么方式来去处理
const dataIndex=[]
//获取唯一标识符id,通过id筛选重复id
const resultarray=[]
//定义我们需要的数组

arrayName.forEach((item,index)=>{
//遍历数组
if(dataIndex.indexOf(item.id)===-1){
    // 通过存id的这个dataIndex数组,如果数组不重复则需要添加
 resultarray.push({
    id:item.id,
    name:item.name,
    prize:item.prize
        })
dataIndex.push(item.id)
    }else {
    //如果数组id重复,找到resultarray对应的id项处理重复项中的数据
    resultarray.forEach((tep,idx)=>{
     if(resultarray[idx].id===item.id){
    resultarray[idx].prize=resultarray[idx].prize+item.prize
            }

        })

    }

})
console.log(resultarray) 

两个数组[age,name,job,school] [age,name]筛选出来剩余的项

** 场景** 对应的场景很多人都刷过头条吧对于下面的这种场景如果后端只返回给我们全部项,那么我的频道和推荐频道就需要我们自己处理在渲染了,不妨思考一下

Screenshot_2022-04-21-15-52-49-914_com.ss.android.png

//比如说后端返回的是allArr=['小说','手机','世界观','圈子','美食'];我的关注myArr=['小说',美食']那么下面推荐就要是allArr的其他数组项
很容易想到filter方法:
const allArr=['小说','手机','世界观','圈子','美食']
const myArr=['小说','美食']
const resultArr=allArr.filter(item=>!myArr.includes(item))


今天就到这了下次在更新