1、獲取后端接口返回的數據中的部分字段
const isType = type => val => type === Object.prototype.toString.call(val).slice(8, -1)
const isArray = isType('Array')
const isObject = isType('Object')
// 后端返回的數據列表中字段可能並不全部需要
// 獲取對象或者對象數組字段。舉例：
// const obj = {name:'', age:123,school:{hh:11, kj:true}, asd:'qqwq'}
// getProps(obj, {name:'', school:{hh:''}, asd:''})
// ----> 得到其中部分字段。這個函數可以提升大量數據的渲染性能
const getProps = function (obj, props) {
if(!isObject(props)) {
throw new Error('參數有誤，參數必須為object')
}
if(isArray(obj)) {
return obj.map(item => {
return Object.keys(props).reduce((prev, v) => {
prev[v] = isObject(props[v]) ? getProps(item[v], props[v]) : item[v] || ''
return prev
}, {})
})
}else if(isObject(obj)) {
return Object.keys(props).reduce((prev, item) => {
prev[item] = isObject(props[item]) ? getProps(obj[item], props[item]) : obj[item] || ''
return prev
}, {})
} else {
return obj
}
}
//====================普通對象使用方式=============================================
// 假設這個是后端接口返回數據
const obj = {
name: '張三',
age: '18',
school:'阿里斯頓',
company:{
name:'阿里巴巴'
},
customer:{
department: "總經辦",
department_id: 23,
group: false,
login_time: "2020-09-07 15:28",
message: {customer:'asdasd', color:'#ccc'}
}
}
const newObj = getProps(obj, {
name:'',
company:'',
customer:{
department_id:'',
message:{customer:''}
}
})
console.log(newObj)
//====================對象數組使用=============================================
// 假設這個是后端接口返回數據
const obj2 = [obj, obj, obj]
const newObj2 = getProps(obj2, {
name:'',
company:'',
customer:{
department_id:'',
message:{customer:''}
}
})
console.log(newObj2)