JS一维数组转化为三维数组有这个方法就够了

今天在CSDN上问答区看到一个提问的小伙伴,是想要将一维数组转化为三位数组的需求,正好不是很忙,乐于助人的我立马给这位同学安排上

下面是后端同学返给我们的一维数组数据格式

	[{'品牌': '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}

输出结果正确
在这里插入图片描述

原创不易,希望大家多多支持!!!\textcolor{blue}{原创不易,希望大家多多支持!!!}

👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248556.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hadoop集群安装

一、完全分布式模式的安装和配置的具体步骤: 1.配置jdk;2.配置hosts文件;3.建立hadoop运行账号;4.配置ssh免密码连入; 5.下载并解压hadoop安装包;6.配置namenode,修改site文件;7.配置…

11系列

梦想这东西和经典一样 永远不会随时间而褪色 反而更显珍贵转载于:https://www.cnblogs.com/tianjinquan/archive/2010/11/03/1867694.html

webpack相关配置

文章目录💦 webpack的概念💦 webpack的基本使用项目目录并初始化创建首页及js文件以jQuery为例安装jQuery导入jQuery安装webpack💦 webpack的相关设置设置webpack的打包入口/出口设置webpack的自动打包配置html-webpack-pluginwebpack中的加载…

Day 21 20190205 老男孩python学习第21天 内容整理

今天写作业,明天后天要在外旅游 写作业写了7个小时。 1 def read_file_as_dict(where):2 staff_dict {}3 f open(%s % where, mode"r", encodingutf-8)4 data f.read()5 f.close()6 row data.strip().split(\n)7 for staff i…

SCOM 简单界面操作指南 [SCOM中文系列之三]

今天大概介绍下SCOM的管理界面,大概分三个重要的功能版块 Monitoring 监控版面 Authoring (中文版不知道翻译成什么,主要编辑MP) Administration 管理操作 首先说一下管理操作区,开始装好的SCOM都需要来这里配置一下的…

趁着对象泡脚的功夫,我把vueX吃透了

文章目录vueX🌟Vuex的概述什么是vuexVuex管理数据的优点🌟Vuex的基本使用步骤1.安装 npm i vuex --save2.在src文件目录下新建store>index.js文件3.口文件里面引入store,然后再全局注入4.使用🌟Vuex中的核心特性State在组件中访…

【题解】FBI序列

题目描述 两伙外星人策划在未来的XXXX年侵略地球,侵略前自然要交换信息咯,现在,作为全球保卫队队长,你截获了外星人用来交换信息的一段仅由“F”,“B”,“I”,“O”组成的序列。为了保卫地球和平…

vue基础(上篇)

✨有粉丝在私信中联系博主,希望博主能够系统的出一篇关于vue的基础篇\textcolor{blue}{ 有粉丝在私信中联系博主,希望博主能够系统的出一篇关于 vue的基础篇}有粉丝在私信中联系博主,希望博主能够系统的出一篇关于vue的基础篇 ✨ 今天他来了…

depends用于测试程序运行所缺少的文件,可以帮我们很快找到问题

DEPENDS工具和DUMPBIN工具使用阅读目录(Content) 1.Depends2.DUMPBIN2.1 开启CMD2.2 移动目录到C:\Program Files (x86)\Microsoft Visual Studio\VC98\Bin2.3 运行命令:VCVARS32.BAT2.4 下面就可以调用dumpbin.exe命令了在系统部署运行时我们经常发现某个程序在开发机器中可以…

友联

欢迎来到小站友链区,欢迎━(`∀)ノ亻!。 ljc20020730学长巨佬_WA自动机珂朵莉最可爱了BLUESKY007雷姆最可爱啦扬子曰他的代码是神奇的lukelin机房最强如果你想要成为chhokmah小站的朋友的话,请你先把小站加入为友链站哟(^&#xf…

vue基础(中篇)

✨有粉丝在私信中联系博主,希望博主能够系统的出一篇关于vue的基础篇\textcolor{blue}{ 有粉丝在私信中联系博主,希望博主能够系统的出一篇关于 vue的基础篇}有粉丝在私信中联系博主,希望博主能够系统的出一篇关于vue的基础篇 ✨ 今天他来了…

DR图像的畸变校正

DR图像容易产生S形、枕形和局部失真的情况,这给医生对图像的判断带来干扰。而且在医学图像的三维重建中,未经校正的图像进行重建,还会带来一定的重影等干扰。因此,畸变校正是DR图像进行后续处理,不得不对待的一个问题。…

【CF global1 D / CF1110D】 Jongmah

题意 你有n个数字,范围[1, m],你可以选择其中的三个数字构成一个三元组,但是这三个数字必须是连续的或者相同的,每个数字只能用一次,问这n个数字最多构成多少个三元组? 分析 这里想谈一下DP的一个套路,捆绑…

vue基础(下篇)

介绍 对vue组件的介绍网上有很多大家可以自行查询 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代 组件注册 全局注册 Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象 全局组…

MS17-010漏洞复现

攻击机:192.168.148.132 kali linux2018.2 x64 靶机:192.168.1.129 win7 x64 首先用msfconsole的smb模块扫描,看看是否有漏洞 use auxiliary/scanner/smb/smb_ms17_010 set rhosts 192.168.1.129 (目标主机) Ho…

watch 和 computed

<template><div class"hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><!-- watch/computed比较 --><div><input v-model"firstName" type"text"><input v-model"lastName&q…

[BZOJ]3173: [Tjoi2013]最长上升子序列

题解: 考虑按照元素升序加入 所以对位置在其后的元素LIS无影响 然后从前面位置的最大值转移过来就行 ,,,,平衡树无脑模拟 #include <algorithm> #include <iostream> #include <cstring> #include <cstdio> #include <vector> #include <s…

转:HTTP协议简介与在python中的使用详解

1. 使用谷歌/火狐浏览器分析 在Web应用中&#xff0c;服务器把网页传给浏览器&#xff0c;实际上就是把网页的HTML代码发送给浏览器&#xff0c;让浏览器显示出来。而浏览器和服务器之间的传输协议是HTTP&#xff0c;所以&#xff1a; HTML是一种用来定义网页的文本&#xff0c…

深受企业青睐的华为云

作为中国经济活力与韧性的重要保障&#xff0c;无数中小企业也在为夺得各自领域的冠军你追我赶。而席卷全球的数字化转型浪潮&#xff0c;则将这场冠军争夺赛推向了关键节点。企业数字化的第一步就是业务云端化&#xff0c;对企业来说云计算是不可或缺的数字底座。上云&#xf…

一个程序员的水平能差到什么程度?

老板觉得公司里都是男的&#xff0c;缺少一点阴柔之气&#xff0c;想平衡一下&#xff0c;正巧当时互金公司倒了一大批&#xff0c;大批简历投到公司&#xff0c;老板以为自己也是技术出身&#xff0c;就招了一个三年工作经验的女程序员&#xff0c;互金出来的&#xff0c;要价…