js更改对象中属性名的方法
数据格式如下:let arr = [{"id": 275,"name": "测试公司","userList": [{"id": 697,"userName": "11111"}]}, {"id": 327,"name": "有限公司"
·
数据格式如下:
let arr = [
{
"id": 275,
"name": "测试公司",
"userList": [
{
"id": 697,
"userName": "11111"
}
]
}, {
"id": 327,
"name": "有限公司",
"userList": [
{
"id": 743,
"userName": "张三"
}, {
"id": 744,
"userName": "李四"
}
]
}
];
问题一:动态修改name为text,userName也修改为text,userList为children
处理方法:
方案一:封装copyTransFunc方法,参数有两个,一个是arr,一个是数组,数组里可以配置修改的key和替换的value,支持多个
// 将arr对象中的name键改为text、userName键改为text、userList键改为chilren
console.log(this.copyTransFunc(arr, [{ key: "name", value: "text" }, { key: "userName", value: "text" },{ key: "userList", value: "chilren" }]));
copyTransFunc (obj, typeArr) {
let result;
let toString = Object.prototype.toString;
if (toString.call (obj) === '[object Array]') {
result = [];
for (let i = 0; i < obj.length; i++) {
result[i] = this.copyTransFunc (obj[i], arguments[1])
}
} else if (toString.call (obj) === '[object Object]') {
result = {};
for (let _key in obj) {
if (obj.hasOwnProperty (_key)) {
let flag = 0, _value = null;
for (let j = 0; j < arguments[1].length; j++) {
if (arguments[1][j].key === _key) {
flag = 1;
_value = arguments[1][j].value
}
}
if (flag)
result[_value] = this.copyTransFunc (obj[_key], arguments[1]);
else
result[_key] = this.copyTransFunc (obj[_key], arguments[1])
}
}
} else {
return obj
}
return result
}
方案二:递归解决
copyTransFun (arr) {
arr.forEach ((item) => {
if (item.name) {
item.text = item.name;
delete item.name;
}
if (item.userName) {
item.text = item.userName;
delete item.userName;
}
if (item.userList) {
item.children = item.userList;
delete item.userList;
if (item.children.length) {
this.copyTransFun (item.children);
}
}
});
},
方案三:处理两级情况
//处理只有两级情况
let col = [];
arr.forEach((item, index) => {
col.push({
id: item.id,
text: item.name,
children: item.userList,
},
);
});
col.forEach((_item, _index) => {
if (_item.children && _item.children.length) {
_item.children.forEach((item, index) => {
if (Object.getOwnPropertyNames(item).length) {
item.id = item.id;
item.text = item.userName;
}
})
}
});
交流
1、QQ群:可添加qq群共同进阶学习: 进军全栈工程师疑难解 群号: 856402057
2、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
工作之余,不要忘记吃饭了,天天可领哦!
更多推荐
已为社区贡献10条内容
所有评论(0)