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.pswp.cn/news/248556.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/248556.shtml
英文地址,請注明出處:http://en.pswp.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;要價…