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

• 資深大佬 : yiqiao

  为什么不直接让后端改下？

• 主 資深大佬 : happyCodings

  @yiqiao 后端傻瓜不改 想锤他

• 資深大佬 : meshell

  @happyCodings 我觉得这个确实不要后端改，前端自已转换所需要的结构

• 資深大佬 : AidenChen

  这个就是要前端改，后端始终提供列表以适应不同的展示需求；这里的处理实质上就是以根节点为最终父级，生成子孙树

• 資深大佬 : long2ice

  后端没毛病

• 資深大佬 : xiangyuecn

  后端给平铺展开的数据（一层数组），数据库里面怎么存的就怎么拿，没毛病
  结构格式化，js 很容易（简洁），大部分后端语言很困难（蹩脚难看）
  你这个递归几行代码就搞定了，也更容易理解，你倒好 for 也不写，reduce 有那么香吗？

• 資深大佬 : TomatoYuyuko

  这不是前端基本功嘛，生成树，面试都经常会遇到的题，自己写个工具类处理，递归几层就出来了。遇到这种问题不要硬循环，后面维护看到你人都麻了。。

• 資深大佬 : TomatoYuyuko

  前端数据处理直接用 lodash，我记得有现成的方法，你找找

• 資深大佬 : liyang5945

  你这个就两级吗，两级我有个简单的写法

• 資深大佬 : a719031256

  @happyCodings
  这个不应该后端改，前几天还在给我配合的前端说这个事情
  前端需求变化很快，每次变化都要后端给前端再封装数据，就不方便了，还不如后端反你固定格式数据，前端按实际需求封装自己的需要的格式

• 資深大佬 : aguesuka

  class Address {
  /**
  * @type string
  */
  province
  /**
  * @type string
  */
  city
  /**
  * @type string
  */
  adcode
  /**
  * @type string
  */
  district
  }
  class TreeNode {
  /**
  * @type string
  */
  value
  /**
  * @type string
  */
  label
  /**
  * @type TreeNode[]
  */
  children
  }
  /**
  *
  * @param addresses {Address[]}
  * @return TreeNode[]
  */
  function dealWithAddressList(addresses) {
  /**
  * @type {TreeNode[]}
  */
  const result = []
  /**
  *
  * @type {Map<string, TreeNode>}
  */
  const createdElements = new Map()
  /**
  *
  * @param value {string}
  * @param brothers {TreeNode[]}
  * @returns {TreeNode}
  */
  const nodeOf = (value, brothers) => {
  let node = createdElements.get(value);
  if (node === undefined) {
  node = {
  children: [],
  value: value,
  label: value,
  }
  brothers.push(node)
  createdElements.set(value, node)
  }
  return node
  }
  for (let address of addresses) {
  let provinceNode = nodeOf(address.province, result)
  let cityNode = nodeOf(address.city, provinceNode.children);
  cityNode.children.push({
  children: [],
  value: address.adcode,
  label: address.district,
  })
  }
  return result;
  }
  function test() {
  return dealWithAddressList([{“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”: “正定县”}]);
  }
  test()

• 資深大佬 : zhangchongjie

  返回的数据结构如果也是后端改，那一个共用接口得写多少返回类型呀

• 資深大佬 : ccraohng

  function convert() {
  const levels = [‘province’, ‘city’, ‘district’];
  const result = {
  children: {},
  };
  data.forEach((item) => {
  levels.reduce((map, level) => {
  const current = item[level];
  if (!map.children) {
  map.children = {};
  }
  map.children[current] = map.children[current] || {
  data: {
  label: current,
  value: level === ‘district’ ? item.adcode : current,
  },
  };
  return map.children[current];
  }, result);
  });
  const format = (item) => {
  if (item.children) {
  const children = Object.values(item.children).map((child) => {
  return format(child);
  });
  item.children = children;
  }
  return item;
  };
  const root = format(result).children;
  console.log(root);
  }
  convert();

• 資深大佬 : Vegetable

  http://js.jsrun.net/RQVKp
  处理省市区什么的写的比较难看，大概就是这个思路吧
  通过一个 hash 做映射，方便找到父节点

• 資深大佬 : HashV2

  我做后端的时候都是前端来改结构，我做前端的时候都是后端来改结构（因为我比较能喷，而且不怕 delay ）
  现在我全栈了，哪边简单方便哪边改。。。（现在贼怕 delay，deadline 就是第一生产力）

• 資深大佬 : ryncv

  O(1)复杂度
  “`javascript
  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”:”正定县”}];
  function listToTree(list) {
  const map = {};
  list.forEach(({province, city, district, adcode}) => {
  const item = {name: district, value: adcode};
  if (!map[province]) {
  map[province] = {
  name: province,
  children: [{
  name: city,
  children: [item]
  }]
  }
  return;
  }
  const cityItem = map[province].children.find(one => one.name === city);
  if (!cityItem) {
  map[province].children.push({ name: city,children: [item]})
  } else {
  cityItem.children.push(item);
  }
  })
  return Object.values(map);
  }
  console.log(listToTree(data));
  “`

• 資深大佬 : bnm965321

  看看 python 的 defaultDict，然后套两层嵌套的 defaultDict 就知道怎么做了

• 資深大佬 : timedivision

  “` js
  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: ‘正定县’,
  },
  ];
  const pObj = {};
  const cObj = {};
  data.forEach(item => {
  const { province, city } = item;
  if (pObj[province]) {
  pObj[province].push(item);
  } else {
  pObj[province] = [item];
  }
  if (cObj[city]) {
  cObj[city].push(item);
  } else {
  cObj[city] = [item];
  }
  });
  const proValue = Object.values(pObj);
  const cityKey = Object.keys(cObj);
  const res = [];
  proValue.forEach(pro => {
  cityKey.forEach(key => {
  if (pro[0] && key === pro[0].city) {
  res.push({
  value: pro[0].adcode,
  label: pro[0].province,
  children: [
  {
  label: key,
  value: pro[0].adcode,
  children: cObj[key].map(dis => {
  return {
  label: dis.district,
  value: pro[0].adcode,
  };
  }),
  },
  ],
  });
  }
  });
  });
  console.log(JSON.stringify(res));
  “`
  写的不是很好，但是应该可以满足你的需求
• 資深大佬 : lumotian

  http://learnjsdata.com/group_data.html

• 資深大佬 : aitaii

  友情提示:可以使用 gist 贴代码，这样代码格式会保留。

• 資深大佬 : lostpupil

  这后端返回的数据中规中矩，说人万恶谈不上。
  都是你写的代码属实是辣鸡没错。
  你一会儿 each 一会儿 reduce 一会儿 push 你到底想要 mute 还是 immute
  你这个用 lodash group map 改一下结构就行了。

• 資深大佬 : coderJie

  我全栈开发，后端转换，前端转换我都试过，开发下来我觉得前端转化更合理。
  而且后端只是传了个正常的数据回来怎么就变成屎山代码了？

• 資深大佬 : molvqingtai

  前端表示这不是常见的需求嘛

• 資深大佬 : lostpupil

  “`javascript
  city[ele[name]] =
  true &&
  item.push({
  “`

• 資深大佬 : lostpupil

  是什么原因让你写出了 true && 这种失了智的代码？？？

• 資深大佬 : Leviathann

  @aitaii 发贴可以选 markdown 模式

• 資深大佬 : sweetcola

  叠 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

  @happyCodings 他不改你帮他改啊

• 資深大佬 : cking

  后端表示 我们不背这锅 这个返回已经算是很好的格式了

• 資深大佬 : renmu123

  lodash groupby，但应该只支持两级。

• 資深大佬 : shuoshuxx

  后端觉得，这个格式就是正确的，后端不背锅

• 資深大佬 : faqqcn

  这些个前端，好不容从切图仔脱离了，又想回到切图仔日子

• 資深大佬 : learningman

  催公司上 GraphQL，想要啥格式有啥格式

• 資深大佬 : MoYi123

  就这样转一下格式都挠破脑袋，用 graphql 不是要被气哭

• 資深大佬 : Mitt

  屎山代码指的是自己写的代码么？

• 資深大佬 : leyviw

  后端就是返回标准的格式，给 N 个前端 N 个显示效果用，如果靠后端去兼容前端，那还得了

• 資深大佬 : aircjm

  喷人家后端代码屎山 自己被喷的老惨了

• 資深大佬 : icylogic

  看了这贴最大的感受： @Livid 能不能改善一下 V2EX 评论贴代码的体验……

• 資深大佬 : medivh

  真·前端论坛

• 資深大佬 : grewer

  我看上面觉得后端没问题的不少啊, 这就前端论坛了…

• 資深大佬 : victor

  先甩锅给后端，再来个红包钓鱼

• 資深大佬 : fewok

  就这，什么玩意

• 資深大佬 : ianva

  思路就是错的，代码写的再好也是屎山
  接口和 组件 porps 的变化怎么隔离？不隔离接口一变，你代码也跟着变？组件换了这套代码再来一遍？一个需求变化就得重写的东西
  另外一个 map 数据的代码有啥值得优化的，明确输入和输出就完了，你代码是屎，别人要重构只了解输入和输出不看你逻辑就行了

• 資深大佬 : opengps

  怪不得前后端互相吐槽，这完全是各自都能处理的，除非这个接口是唯一用途可以后端去修改，否则宁肯提供多个也不应该修改输出结构，因为这种改法不符合开闭原则，是个新老不兼容的改动。前端是 web 还好，前端如果是 app，客户不升级停留在老版本岂不是必须强制下升级了

• 資深大佬 : ianva

  @opengps web 端可以在前端建模隔离接口变化，至于客户端更新的问题，在 BFF 建模隔离接口变化，当然都走 GraphQL 是最方便的

• 資深大佬 : anguiao

  这帖子根本不想看，代码可读性太低了

• 資深大佬 : CokeMine

  hhh 随便写了写
  https://paste.ubuntu.com/p/6vSmvVNgCT/

• 資深大佬 : ganning

  @HashV2 哈哈哈哈，大佬

• 資深大佬 : LinHoo

  const convert = data => {
  const options = []
  const proviceMap = {}
  data.forEach(item => {
  // 没有省
  if (!proviceMap[item.province]) {
  proviceMap[item.province] = {
  index: options.length,
  citys: [item.city]
  }
  options.push({
  value: item.province,
  label: item.province,
  children: [
  {
  value: item.city,
  label: item.city,
  children: [
  {
  value: item.adcode,
  label: item.district,
  }
  ]
  }
  ]
  })
  return
  }
  const provinceIndex = proviceMap[item.province].index
  const cityIndex = proviceMap[item.province].citys.indexOf(item.city)
  // 没有市
  if (cityIndex === -1) {
  options[provinceIndex].children.push({
  value: item.city,
  label: item.city,
  children: [
  {
  value: item.adcode,
  label: item.district,
  }
  ]
  })
  return
  }
  // 有省有市
  options[provinceIndex].children[cityIndex].children.push({
  value: item.adcode,
  label: item.district,
  })
  })
  }

• 資深大佬 : DeWjjj

  个人认为这个后端出的结构代码没问题，自己解析。
  这层级算套的不错的了。

• 主 資深大佬 : happyCodings

  @coderJie 大佬我说我写的是 可能表述不清晰

• 主 資深大佬 : happyCodings

  @meshell 大佬们统一回复一下 是我自己写的代码像屎山，然后想优化一下，实力原因来求助
  ps：刚毕业的前端小码农
  谢谢大佬们

• 主 資深大佬 : happyCodings

  @aguesuka 谢谢大佬

• 主 資深大佬 : happyCodings

  @ccraohng 谢谢大佬

• 主 資深大佬 : happyCodings

  @ryncv 谢谢大佬

• 主 資深大佬 : happyCodings

  @timedivision 谢谢大佬

• 主 資深大佬 : happyCodings

  @CokeMine 谢谢大佬

• 主 資深大佬 : happyCodings

  @LinHoo 谢谢大佬

• 資深大佬 : vueli

  为什么不写在。“` “` 里面, 看着好难受. 又懒不想拿过来运行格式化

• 資深大佬 : Cy1

  后端这格式不是很合理么，真就什么数据都处理好，前端直接套才算合理么？