本文总结了在JavaScript中将一维数组转换为多层嵌套数组的几种常见方法。内容涵盖基于相同字段（如日期）的一级与二级嵌套，以及基于ID前缀匹配（如4位与8位ID）的多层嵌套逻辑。通过具体代码示例，展示了使用map、forEach及条件判断实现数据重组的技巧，旨在为前端开发中的数据格式化处理提供参考。
本文主要探讨如何利用JavaScript将一维数组重构为包含多层嵌套结构的数组。
首先介绍第一种场景：根据一级与二级相同的字段进行嵌套处理。
let arr = [
{ date: '2020-01-06', age: '18'},
{ date: '2020-01-06', age: '25'},
{ date: '2020-01-07', age: '34'},
{ date: '2020-01-07', age: '18'},
{ date: '2020-01-07', age: '38'},
{ date: '2020-01-08', age: '26'},
{ date: '2020-01-09', age: '24'}
]let dataArr = [];
arr.map(mapItem => {
if (dataArr.length == 0) {
dataArr.push({ date: mapItem.date, List: [mapItem] })
} else {
let res = dataArr.some(item=> {//判断相同日期，有就添加到当前项
if (item.date == mapItem.date) {
item.List.push(mapItem)
return true
}
})
if (!res) {//如果没找相同日期添加一个新对象
dataArr.push({ date: mapItem.date, List: [mapItem] })
}
}
})处理后的数据结构示例如下：
dataArr = [
{
date:'2020-01-06',
List: [
{ date: '2020-01-06', age: '18'},
{ date: '2020-01-06', age: '25'}
]
},
{
date:'2020-01-07',
List: [
{ date: '2020-01-07', age: '34'},
{ date: '2020-01-07', age: '18'},
{ date: '2020-01-07', age: '38'},
]
},
{
date:'2020-01-08',
List: [
{ date: '2020-01-08', age: '26'},
]
},
{
date:'2020-01-09',
List: [
{ date: '2020-01-09', age: '24' }
]
}
]第二种场景涉及更复杂的嵌套逻辑。
在此场景中，一级数据由四位数ID（如0001）标识，二级数据由八位数字ID（如00010001）标识。匹配规则是提取二级ID的前四位，并与一级ID进行比对，从而建立层级关系。
针对上述场景，提供第一种实现方法：
var userArr = [
{ id: "0001", userName: "laozhang_1" },
{ id: "00010001", userName: "laozhang1" },
{ id: "00010002", userName: "laozhang1" },
{ id: "00010003", userName: "laozhang1" },
{ id: "0002", userName: "laowang" },
{ id: "00020002", userName: "laozhang2" },
{ id: "00020003", userName: "laowang" },
{ id: "00020004", userName: "laowang" },
{ id: "00020005", userName: "laowang" },
{ id: "00020006", userName: "laowang" }
];let newArr = []
userArr.forEach(item => {
if (item.id.length === 4) {
newArr.push({ ...item, list: [] });
}
});
newArr.forEach(item => {
userArr.forEach(user => {
if (item.id !== user.id && item.id == user.id.substring(0, 4)) {
item.list.push(user);
}
});
});
console.log(newArr)此外，还有第二种实现方式可供参考：
var userArr = [
{ id: "0001", userName: "laozhang_1" },
{ id: "00010001", userName: "laozhang1" },
{ id: "00010002", userName: "laozhang1" },
{ id: "00010003", userName: "laozhang1" },
{ id: "0002", userName: "laowang" },
{ id: "00020002", userName: "laozhang2" },
{ id: "00020003", userName: "laowang" },
{ id: "00020004", userName: "laowang" },
{ id: "00020005", userName: "laowang" },
{ id: "00020006", userName: "laowang" }
];let newArr = userArr.filter(item => item.id.length === 4)
newArr.forEach(item => {
item.list = userArr.filter(user => item.id !== user.id && item.id == user.id.substring(0, 4))
})
console.log(newArr)以下是将JS一维数组处理为多维数组的具体代码实现。
let replies = [
{ id: 1, content: '1. 真理惟一可靠的标准就是永远自相符合', parent: 0 },
{ id: 2, content: '2. 我需要三件东西：爱情友谊和图书', parent: 0 },
{ id: 3, content: '2-1 时间是一切财富中最宝贵的财富', parent: 2 },
{ id: 4, content: '2-2 我读的书愈多，就愈亲近世界，愈明了生活的意义，愈觉得生活的重要', parent: 2 },
{ id: 5, content: '2-1-1 任何事物都是在不断变化的', parent: 3 },
{ id: 6, content: '2-1-2 真正的科学家应当是个幻想家', parent: 3 },
{ id: 7, content: '3. 难得糊涂，耳不闻人之非，不信谣，不传谣', parent: 0 },
];
function multidimensionalArray(replies) {
let data = JSON.parse(JSON.stringify(replies));
data.forEach(reply => {
let parent = data.find(res => res.id === reply.parent);
if (parent) {
parent.children = parent.children || [];
parent.children.push(reply);
}
});
return data;
}
console.log(multidimensionalArray(replies))
/**一维数组处理成多维数组
* linearArray 一维数组
*primary 父级id（父子关联字段）
* secondary 子级id（父子关联字段）
*/
multidimensionalArray: function (linearArray, primary, secondary) {
let data = JSON.parse(JSON.stringify(linearArray));
data.forEach(item => {
let parent = data.find(res => res[primary] === item[secondary]);
if (parent) {
parent.children = parent.children || [];
parent.children.push(item);
}
});
return data;
}综上所述，本文对几种转换方法进行了整理。
以上为个人经验总结，希望能为大家提供有价值的参考，也希望大家多多支持本站。