正文
js 实现 多层级对象合并
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
js 实现 多层级对象合并首先
需求是使用js对数据的格式进行转换 把一个二维数组(包含层级信息,层级数是不固定的)list 转换为多层级的对象
我的思路就是 循环先把list里单条信息转换为 多层级对象 然后和上一条 进行合并
原数据类型:
[{ id:a_a1_a2, value:1 },{ id:a_a2_a2, value:2 },{ id:b_b1, value:3 }]
分别转换为:
[a{ a1{ a2:1 } }] [a{ a2{ a2:2 } }] [b{ b1:3 }]
最终合并效果:
{a{ a1{ a2:1 }, a2{ a2:2 } }, b{ b1:3 } }
onSubmit(): void { // 整理 item 数据 let itemsListInfo = {}; //this.addItemListData 存放的原始数据 for (let i = 0; i < this.addItemListData.length; i++) { const itemTree = this.addItemListData[i].id.split('_'); // 按照格式整理 当前item let thisItemInfo = {}; for (let y = itemTree.length - 1; y >= 0; y--) { if (y === itemTree.length - 1) { thisItemInfo[itemTree[y]] = this.addItemListData[i].value; } else { // 如果直接赋值 会出现问题 需要使用另一个变量暂存 const data = thisItemInfo; thisItemInfo = {}; thisItemInfo[itemTree[y]] = data; } } console.log(thisItemInfo); // 合并当前item 到itemListInfo const itemTreeIndex = 0; itemsListInfo = this.margeItem(itemsListInfo, thisItemInfo, itemTree, itemTreeIndex, this.addItemListData[i]); } } margeItem(itemsListInfo: any, thisItemInfo: any, itemTree: any, itemTreeIndex: number, addItemListData: any): any { // 递归 判断是否存在相同层级 // 直到 没有相同层级后 合并对象到上一级 // 注意 如果是初次进入(没有上一级) 就直接赋值 if (itemsListInfo.hasOwnProperty(itemTree[itemTreeIndex])) { itemsListInfo[itemTree[itemTreeIndex]] = this.margeItem( itemsListInfo[itemTree[itemTreeIndex]], thisItemInfo[itemTree[itemTreeIndex]], itemTree, itemTreeIndex + 1, addItemListData ); return itemsListInfo; } else { let lastData = {}; if (itemsListInfo.hasOwnProperty(itemTree[itemTreeIndex - 1])) { lastData = itemsListInfo[itemTree[itemTreeIndex - 1]]; lastData[itemTree[itemTreeIndex]] = thisItemInfo[itemTree[itemTreeIndex]]; } else { lastData = thisItemInfo[itemTree[itemTreeIndex]]; } itemsListInfo[itemTree[itemTreeIndex]] = lastData; return itemsListInfo; } }
最后itemsListInfo就是我需要的最终格式
