JavaScript一维数组转换为三维及二维数组的实现方法
本文介绍了将JavaScript一维数组转换为三维数组的具体实现逻辑,通过遍历与条件判断构建层级结构。同时补充了一维数组转二维数组的两种场景:字符串数组直接使用slice浅拷贝,对象数组则需结合JSON.stringify与JSON.parse进行深拷贝,以避免修改新数组时影响原始数据。
近日在CSDN问答区遇到一位开发者,希望实现将一维数组转换为三维数组的功能。鉴于当时时间充裕,便依据个人思路直接编写了解决方案,具体源码见下文。

此处展示原始数据的结构格式,以及期望转换后的目标数据格式。

以下直接展示实现代码。
let arr = [{
'peovince': 'a', 'city': 'b', 'area': 'c'
},
{
'peovince': 'a', 'city': 'b', 'area': 'd'
},
{
'peovince': 'a', 'city': 'e', 'area': 'f'
},
{
'peovince': 'a', 'city': 'e', 'area': 'g'
},
{
'peovince': 'o', 'city': 'p', 'area': 'q'
},
{
'peovince': 'o', 'city': 'p', 'area': 'r'
},
{
'peovince': 'o', 'city': 's', 'area': 't'
},
{
'peovince': 'o', 'city': 's', 'area': 'v'
}];
执行转换逻辑。
let list = Array.from(new Set(
arr.map(item => {
return item['peovince']
})))
let subList = []
list.forEach(res => {
arr.forEach(ele => {
if (ele['peovince'] === 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['city']) !== -1) {
subList[nameArr.indexOf(res)].children[nameArr2.indexOf(ele['city'])].children.push({
value: ele['area'],
label: ele['area'],
})
} else {
subList[nameArr.indexOf(res)].children.push({
value: ele['city'],
label: ele['city'],
children: [{
value: ele['area'],
label: ele['area'],
}]
})
}
} else {
subList.push({
value: res,
label: res,
children: [{
value: ele['city'],
label: ele['city'],
children: [{
value: ele['area'],
label: ele['area'],
}]
}]
})
}
}
})
})
console.log(subList)
最终输出的subList即为所需的三维结构,查看控制台打印结果如下。
补充说明:JavaScript一维数组转二维数组的常见场景。
第一种情况:当数组元素为字符串时。
let array = [1, 2, 3, 4, 5, 6, 7, 8];
len len = array.length;
let n = 4; //假设每行显示4个
let lineNum = len % n === 0 ? len / n : Math.floor( (len / n) + 1 );
let res = [];
for (let i = 0; i < lineNum; i++) {
// slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
let temp = array.slice(i*n, i*n+n);
res.push(temp);
}
console.log(res);
第二种情况:当数组元素为对象时。
若数组元素包含对象,直接使用slice方法进行截取会引发问题,因为slice仅执行浅拷贝。这会导致修改新生成数组中的对象值时,原始数组中对应的对象值也被意外修改。因此,推荐采用JSON.stringify配合JSON.parse的方法来实现深拷贝,从而避免引用共享带来的副作用。
let objArray = [{a: 1}, {b: 2}, {c: 3}, {d: 4}, {e: 5}, {f: 6}, {g: 7}];
let len = objArray.length;
let n = 4; //假设每行显示4个
let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 );
let res = [];
for (let i = 0; i < lineNum; i++) {
let temp = objArray.slice(i*n, i*n+n);
res.push(JSON.parse(JSON.stringify(temp)));
}
console.log(res);
以上就是关于JavaScript一维数组转换为三维数组及相关二维处理方法的介绍。如需了解更多相关内容,可查阅本站往期文章或继续浏览后续内容,感谢支持。
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
相关标签:
