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

{

‘品牌’: ‘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: [{

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

HTML 和 CSS：