1、对象数组中根据数组中每个对象的一个属性,在对象中新增一个字段,并根据该属性的状态赋予不同的值
场景一:
- 描述:后台返回的数据只有单价和数量,逻辑需要根据数量和单价,计算每一个商品的总价
- 场景图:
// 后台返回的数据
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} })
场景二:
- 描述:为列表的每一项添加一个状态或者下标标识
- 场景图:
//后台数据
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、对表格详情展示,做数据处理
- 场景图:
//后台数据 || 点击详情拿到的整行数据
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} })