JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組方法

更新時間：2022年01月26日 17:50:58 投稿：hqx

這篇文章主要給大家分享了JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的方法，下面文章圍繞JS數(shù)組轉(zhuǎn)換的相關資料展開內(nèi)容，對大家的學習有一定的參考價值，需要的小伙伴可以參考一下

有人提問想要將一維數(shù)組轉(zhuǎn)化為三位數(shù)組的需求，下面就給提問的的小伙伴安排上

下面是后端同學返給我們的一維數(shù)組數(shù)據(jù)格式：

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

下面是我們想要轉(zhuǎn)化的數(shù)據(jù)格式（轉(zhuǎn)化成三維數(shù)組第一層級為品牌、第二層級為型號、第三層級為配置）

 ? [
? ? ? {
? ? ? ? "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變量接收我們的一維數(shù)組，然后將arr作為參數(shù)傳遞給我們轉(zhuǎn)化數(shù)組的函數(shù)，函數(shù)返回的就是我們最終的三維數(shù)組了

下面就是我們的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

? ? }

輸出結(jié)果正確：

到此這篇關于JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組方法的文章就介紹到這了,更多相關JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

如何用JavaScript實現(xiàn)一個數(shù)組惰性求值庫
這篇文章主要介紹了如何用JavaScript實現(xiàn)一個數(shù)組惰性求值庫，對惰性求值感興趣的同學，可以參考下
2021-05-05
vml圓角矩形最簡布局
2006-09-09
js實現(xiàn)簡單的抽獎系統(tǒng)
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單的抽獎系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
微信小程序數(shù)據(jù)操作指南之從綁定到更新的操作方法
在微信小程序開發(fā)中,數(shù)據(jù)操作是不可或缺的一環(huán),文章詳細介紹了數(shù)據(jù)綁定、更新等方法,并提供示例和注意事項,幫助開發(fā)者更好地應用這些技術(shù),本文給大家介紹微信小程序數(shù)據(jù)操作指南之從綁定到更新,感興趣的朋友跟隨小編一起看看吧
2024-10-10
JavaScript模擬文件拖選框樣式v1.0的實例
下面小編就為大家?guī)硪黄狫avaScript模擬文件拖選框樣式v1.0的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
JavaScript如何實現(xiàn)圖片處理與合成
這篇文章主要介紹了JavaScript如何實現(xiàn)圖片處理與合成,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-05-05
OpenLayers3實現(xiàn)地圖鷹眼以及地圖比例尺的添加
這篇文章主要為大家詳細介紹了OpenLayers3實現(xiàn)地圖鷹眼以及地圖比例尺的添加，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
淺談關于JS下大批量異步任務按順序執(zhí)行解決方案一點思考
這篇文章主要介紹了淺談關于JS下大批量異步任務按順序執(zhí)行解決方案一點思考，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
three.js簡單實現(xiàn)類似七圣召喚的擲骰子
這篇文章主要為大家介紹了three.js簡單實現(xiàn)類似七圣召喚的擲骰子示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
11行JS代碼制作二維碼生成功能
本篇文章給大家分享了用11行簡單的JS代碼制作出二維碼生成的簡單功能，有興趣的朋友參考下。
2018-03-03