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é)果正確：