JS一维数组转化为三维数组方法
更新时间:2022年1月20日 13:15 点击:330
有人提问想要将一维数组转化为三位数组的需求,下面就给提问的的小伙伴安排上
下面是后端同学返给我们的一维数组数据格式:
[{ '品牌': 'xiaomi', '机型': '10', '配置': '512' }, { '品牌': 'xiaomi', '机型': '10', '配置': '128' }, { '品牌': 'xiaomi', '机型': '11', '配置': '128' }, { '品牌': 'xiaomi', '机型': '11', '配置': '64' }, { '品牌': 'iPhone', '机型': '10', '配置': '128' }, { '品牌': 'iPhone', '机型': '11', '配置': '64' }, { '品牌': 'iPhone', '机型': '12', '配置': '64' }, { '品牌': 'honor', '机型': '4', '配置': '256' }, { '品牌': 'honor', '机型': '5', '配置': '128' }, { '品牌': 'honor', '机型': '6', '配置': '128' }];
下面是我们想要转化的数据格式(转化成三维数组 第一层级为品牌、第二层级为型号、第三层级为配置)
[ { "value": "xiaomi", "label": "xiaomi", "children": [ { "value": "10", "label": "10", "children": [ { "value": "512", "label": "512" }, { "value": "128", "label": "128" } ] }, { "value": "11", "label": "11", "children": [ { "value": "128", "label": "128" }, { "value": "64", "label": "64" } ] } ] }, { "value": "iPhone", "label": "iPhone", "children": [ { "value": "10", "label": "10", "children": [ { "value": "128", "label": "128" } ] }, { "value": "11", "label": "11", "children": [ { "value": "64", "label": "64" } ] }, { "value": "12", "label": "12", "children": [ { "value": "64", "label": "64" } ] } ] }, { "value": "honor", "label": "honor", "children": [ { "value": "4", "label": "4", "children": [ { "value": "256", "label": "256" } ] }, { "value": "5", "label": "5", "children": [ { "value": "128", "label": "128" } ] }, { "value": "6", "label": "6", "children": [ { "value": "128", "label": "128" } ] } ] } ]
首先我们定义一个arr变量接收我们的一维数组,然后将arr作为参数传递给我们转化数组的函数,函数返回的就是我们最终的三维数组了
下面就是我们的arrConversion源码:
arrConversion (arr) { let keys = Object.keys(arr[0]) let level1 = keys[0]//获取一级属性名称 let level2 = keys[1]//获取二级属性名称 let level3 = keys[2]//获取三级属性名称 let list = Array.from(new Set( arr.map(item => { return item[level1] }))) let subList = [] list.forEach(res => { arr.forEach(ele => { if (ele[level1] === res) { let nameArr = subList.map(item => item.value) if (nameArr.indexOf(res) !== -1) { let nameArr2 = subList[nameArr.indexOf(res)].children.map(item => item.value) if (nameArr2.indexOf(ele[level2]) !== -1) { subList[nameArr.indexOf(res)].children[nameArr2.indexOf(ele[level2])].children.push({ value: ele[level3], label: ele[level3], }) } else { subList[nameArr.indexOf(res)].children.push({ value: ele[level2], label: ele[level2], children: [{ value: ele[level3], label: ele[level3], }] }) } } else { subList.push({ value: res, label: res, children: [{ value: ele[level2], label: ele[level2], children: [{ value: ele[level3], label: ele[level3], }] }] }) } } }) }) return subList }
输出结果正确:
到此这篇关于JS一维数组转化为三维数组方法的文章就介绍到这了,更多相关JS一维数组转化为三维数组内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/JHXL_/article/details/122164733
相关文章
- 在php中eval是一个函数并且不能直接禁用了,但eval函数又相当的危险了经常会出现一些问题了,今天我们就一起来看看eval函数对数组的操作 例子, <?php $data="array...2016-11-25
- 这篇文章主要介绍了Python 图片转数组,二进制互转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
- 本文章提供在量的数据中级操作实例有如对键名比较计算数组的差集 计算差集 给指定数组中插入一个元素 反转数组 交集赋值新的数组实例。 //定义回调函数 funct...2016-11-25
- 这篇文章主要介绍了C#二维数组基本用法,以实例形式分析了C#中二维数组的定义、初始化、遍历及打印等用法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- Array数组在C#中同样是最基本的数据结构,下面为大家C#数组的常用操作方法小结,皆为细小的代码段,欢迎收看收藏...2020-06-25
- 下面一段代码给大家介绍php curl模拟post请求的示例代码,具体代码如下: <?php$uri = "http://www.cnblogs.com/test.php";//这里换成自己的服务器的地址// 参数数组$data = array ( 'name' => 'tanteng'// 'passwor...2015-11-24
- 下面小编就为大家带来一篇C# 拷贝数组的几种方法(总结)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 本文记录的要实现的功能类似于 MySQL 中的 ORDER BY,上个项目中有遇到这样的一个需求。 要求:从两个不同的表中获取各自的4条数据,然后整合(array_merge)成一个数组,再根据数据的创建时间降序排序取前4条。 遇到这个...2014-06-07
- 这篇文章主要介绍了C#实现字符串转换成字节数组的简单实现方法,仅一行代码即可搞定,非常简单实用,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了c#将字节数组转成易读的字符串的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了C#读取文件所有行到数组的方法,涉及C#针对文件及数组的相关操作技巧,需要的朋友可以参考下...2020-06-25
- 如何将下面的二维数组转为一维数组。复制代码 代码如下:$msg = array( array( 'id'=>'45', 'name'=>'jack' ), array( 'id'=>'34', 'name'=>'mary' ), array( 'id...2014-05-31
- 在php中为我们提供了一个函数var_export 他可以直接将php代码入到一个文件中哦。 代码如下 复制代码 var_export($times,true);后面不加tru...2016-11-25
- 本文为代码分享,也是在工作中看到一些“大牛”的代码,做做分享。 具体是这样的,如下一个二维数组,是从库中读取出来的。 代码清单: 复制代码 代码如下: $user = array( 0 => array( 'id' => 1, 'name' => '张三', 'ema...2014-06-07
- 1.前言 昨天碰到一道关于如何解决有序数组的连接问题,这是一个很常见的问题。但是这里要考虑到代码的效率问题,因为要连接的数组都是有序的,这是一个非常重要的前提条件。2.简单但效率不高的算法 我首先想到的是使用...2013-10-04
- 今天小编就为大家分享一篇python 实现将Numpy数组保存为图像,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-27
C#中数组、ArrayList、List、Dictionary的用法与区别浅析(存取数据)
在工作中经常遇到C#数组、ArrayList、List、Dictionary存取数据,但是该选择哪种类型进行存储数据呢?很迷茫,今天小编抽空给大家整理下这方面的内容,需要的朋友参考下吧...2020-06-25- 这篇文章主要介绍了C#中List和数组之间转换的方法,涉及比较简单的转换技巧,需要的朋友可以参考下...2020-06-25
- 下面小编就为大家带来一篇javascript中去除数组重复元素的实现方法【实例】。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧...2016-04-16
- 下面小编就为大家带来一篇Perl与JS的对比分析(数组、哈希)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-29