求大佬们优化一下代码,屎山代码给孩子头皮想破了

2021-06-18 15:57:53 +08:00
 happyCodings
秉着不写垃圾代码的原则,求大佬优化一下,最优值奉上红包
需求是这样的:

万恶后端传过来的数据:
"data":[{"province":"上海市","city":"上海市市辖区","adcode":"310118","district":"青浦区"},
{"province":"江苏","city":"苏州市","adcode":"320506","district":"吴中区"},
{"province":"山西省","city":"阳泉市","adcode":"140302","district":"城区"},
{"province":"上海市","city":"上海市市辖区","adcode":"310101","district":"黄浦区"},
{"province":"河北省","city":"石家庄市","adcode":"130123","district":"正定县"}]

需要整合成这样 elementUi 中级联选择器中的数据:
(只要有相同的就要去重并在之前的 children 下加入重复的 children )
addressOptions: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则",
children: [
{
value: "yizhi",
label: "一致",
},
{
value: "fankui",
label: "反馈",
},
{
value: "xiaolv",
label: "效率",
},
{
value: "kekong",
label: "可控",
},
],
},
{
value: "daohang",
label: "导航",
children: [
{
value: "cexiangdaohang",
label: "侧向导航",
},
{
value: "dingbudaohang",
label: "顶部导航",
},
],
},
],
},
],

我的垃圾代码:

dealWithAddressList(arr, name) {
var city = {};
return arr.reduce(function (item, ele) {
console.log(ele[name]);
if (city[ele[name]]) {
item.forEach((eles) => {
if (eles.label == ele[name]) {
eles.children.forEach((eless) => {
if (eless.value == ele.city) {
eless.children.push({
value: ele.adcode,
label: ele.district,
});
} else {
eles.children.push({
value: ele.city,
label: ele.city,
children: [
{
value: ele.adcode,
label: ele.district,
},
],
});
}
});
}
});
console.log(city[ele[name]]);
} else {
city[ele[name]] =
true &&
item.push({
value: ele.province,
label: ele.province,
children: [
{
value: ele.city,
label: ele.city,
children: [
{
value: ele.adcode,
label: ele.district,
},
],
},
],
});
}
console.log(item);
return item;
}, []);
},

求大佬优化一下,可以的话有红包奉上
7907 次点击
所在节点    Vue.js
60 条回复
lostpupil
2021-06-18 17:44:40 +08:00
这后端返回的数据中规中矩,说人万恶谈不上。
都是你写的代码属实是辣鸡没错。
你一会儿 each 一会儿 reduce 一会儿 push 你到底想要 mute 还是 immute
你这个用 lodash group map 改一下结构就行了。
coderJie
2021-06-18 17:57:07 +08:00
我全栈开发,后端转换,前端转换我都试过,开发下来我觉得前端转化更合理。
而且后端只是传了个正常的数据回来怎么就变成屎山代码了?
molvqingtai
2021-06-18 18:00:46 +08:00
前端表示这不是常见的需求嘛
lostpupil
2021-06-18 18:00:56 +08:00
```javascript
city[ele[name]] =
true &&
item.push({
```
lostpupil
2021-06-18 18:01:28 +08:00
是什么原因让你写出了 true && 这种失了智的代码???
Leviathann
2021-06-18 18:08:00 +08:00
@aitaii 发贴可以选 markdown 模式
sweetcola
2021-06-18 18:18:11 +08:00
叠 buff 的来了(仅供娱乐)

const data =[{"province":"上海市","city":"上海市市辖区","adcode":"310118","district":"青浦区"},
{"province":"江苏","city":"苏州市","adcode":"320506","district":"吴中区"},
{"province":"山西省","city":"阳泉市","adcode":"140302","district":"城区"},
{"province":"上海市","city":"上海市市辖区","adcode":"310101","district":"黄浦区"},
{"province":"河北省","city":"石家庄市","adcode":"130123","district":"正定县"}];

var obj = Object.keys(obj = data.reduce((t, c) => ({ ...t, [c.province]: { ...t[c.province], [c.city]: { ...t[c.province]?.[c.city], [c.district]: c.adcode } } }), {})).map((v) => ({ name: v, children: Object.keys(obj[v]).map((v1) => ({name: v1, children: Object.keys(obj[v][v1]).map((v2) => ({ name: v2, value: obj[v][v1][v2]})) })) }));

console.log(obj);
darknoll
2021-06-18 19:01:28 +08:00
@happyCodings 他不改你帮他改啊
cking
2021-06-18 19:06:24 +08:00
后端表示 我们不背这锅 这个返回已经算是很好的格式了
renmu123
2021-06-18 19:36:41 +08:00
lodash groupby,但应该只支持两级。
shuoshuxx
2021-06-18 19:43:21 +08:00
后端觉得,这个格式就是正确的,后端不背锅
Rache1
2021-06-18 20:13:01 +08:00
这些个前端,好不容从切图仔脱离了,又想回到切图仔日子
learningman
2021-06-18 20:45:08 +08:00
催公司上 GraphQL,想要啥格式有啥格式
MoYi123
2021-06-18 22:19:44 +08:00
就这样转一下格式都挠破脑袋,用 graphql 不是要被气哭
Mitt
2021-06-18 22:58:59 +08:00
屎山代码指的是自己写的代码么?😹
leyviw
2021-06-18 23:26:01 +08:00
后端就是返回标准的格式,给 N 个前端 N 个显示效果用,如果靠后端去兼容前端,那还得了
aircjm
2021-06-19 00:21:03 +08:00
喷人家后端代码屎山 自己被喷的老惨了 😓
icylogic
2021-06-19 01:22:41 +08:00
看了这贴最大的感受: @Livid 能不能改善一下 V2EX 评论贴代码的体验……
medivh
2021-06-19 02:39:43 +08:00
真·前端论坛
grewer
2021-06-19 09:39:30 +08:00
我看上面觉得后端没问题的不少啊, 这就前端论坛了...

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/784284

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX