耀极客论坛

 找回密码
 立即注册
查看: 630|回复: 0

JS一维数组转化为三维数组的实现示例

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 02:43:15 | 显示全部楼层 |阅读模式
  很多时候,跟后端接口开发对接时,因为需求的关系,需要前端地区数据跟后端的数据要一一对应,有时候需要的是多维数据,这篇文章主要介绍了JS一维数组转化为三维数组的实现示例,感兴趣的可以了解一下
  今天在CSDN上问答区看到一个提问的小伙伴,是想要将一维数组转化为三位数组的需求,正好不是很忙,乐于助人的我立马给这位同学安排上,当然也没有顾及那么多去看资料什么的,就直接按照自己的思路走了!下方有源码


  上面是他的数据格式,下面呢是要转化的数据格式


  话不多说直接上代码
  1. let arr = [{
  2. 'peovince': 'a', 'city': 'b', 'area': 'c'
  3. },
  4. {
  5. 'peovince': 'a', 'city': 'b', 'area': 'd'
  6. },
  7. {
  8. 'peovince': 'a', 'city': 'e', 'area': 'f'
  9. },
  10. {
  11. 'peovince': 'a', 'city': 'e', 'area': 'g'
  12. },
  13. {
  14. 'peovince': 'o', 'city': 'p', 'area': 'q'
  15. },
  16. {
  17. 'peovince': 'o', 'city': 'p', 'area': 'r'
  18. },
  19. {
  20. 'peovince': 'o', 'city': 's', 'area': 't'
  21. },
  22. {
  23. 'peovince': 'o', 'city': 's', 'area': 'v'
  24. }];
复制代码
  开始转化
  1. let list = Array.from(new Set(
  2. arr.map(item => {
  3. return item['peovince']
  4. })))
  5. let subList = []
  6. list.forEach(res => {
  7. arr.forEach(ele => {
  8. if (ele['peovince'] === res) {
  9. let nameArr = subList.map(item => item.value)
  10. if (nameArr.indexOf(res) !== -1) {
  11. let nameArr2 = subList[nameArr.indexOf(res)].children.map(item => item.value)
  12. if (nameArr2.indexOf(ele['city']) !== -1) {
  13. subList[nameArr.indexOf(res)].children[nameArr2.indexOf(ele['city'])].children.push({
  14. value: ele['area'],
  15. label: ele['area'],
  16. })
  17. } else {
  18. subList[nameArr.indexOf(res)].children.push({
  19. value: ele['city'],
  20. label: ele['city'],
  21. children: [{
  22. value: ele['area'],
  23. label: ele['area'],
  24. }]
  25. })
  26. }
  27. } else {
  28. subList.push({
  29. value: res,
  30. label: res,
  31. children: [{
  32. value: ele['city'],
  33. label: ele['city'],
  34. children: [{
  35. value: ele['area'],
  36. label: ele['area'],
  37. }]
  38. }]
  39. })
  40. }
  41. }
  42. })
  43. })
  44. console.log(subList)
复制代码
  最后打印的subList就是想要的格式了,让我们看一下打印
ps:JavaScript一维数组转二维数组
  第一种情况:数组里面是字符串的时候
  1. let array = [1, 2, 3, 4, 5, 6, 7, 8];
  2. len len = array.length;
  3. let n = 4; //假设每行显示4个
  4. let lineNum = len % n === 0 ? len / n : Math.floor( (len / n) + 1 );
  5. let res = [];
  6. for (let i = 0; i ‹ lineNum; i++) {
  7. // slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
  8. let temp = array.slice(i*n, i*n+n);
  9. res.push(temp);
  10. }
  11. console.log(res);
复制代码
  第二种情况:数组里面是对象的时候

  当数组元素为对象的时候,就不能使用slice方法进行截取了,因为slice属于浅拷贝,导致的问题就是你修改了新生成的数组对象值,会影响原始数组中对象的值。
这里就介绍一种通过JSON.stringify和JSON.parse方法。
  1. let objArray = [{a: 1}, {b: 2}, {c: 3}, {d: 4}, {e: 5}, {f: 6}, {g: 7}];
  2. let len = objArray.length;
  3. let n = 4; //假设每行显示4个
  4. let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 );
  5. let res = [];
  6. for (let i = 0; i ‹ lineNum; i++) {
  7. let temp = objArray.slice(i*n, i*n+n);
  8. res.push(JSON.parse(JSON.stringify(temp)));
  9. }
  10. console.log(res);
复制代码
  到此这篇关于JS一维数组转化为三维数组的文章就介绍到这了,更多相关JS一维数组转化为三维数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:07 , Processed in 0.068374 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表