场景遇到
比如订单行上存在套散件关系,传递给后端时需要处理数据
如表格存在树形结构做勾选回显时需要平铺数据
右边数据存在时,左边表格树形结构回显
1.方法函数如下
/**
* 递归平铺转为一维数组
* @param {*} treeNode 传进来的值,可以是数组 可以是一个对象
* @param {*} childKey 树形结构 children
* @returns
*/
function flat(treeNode, childKey = "children") {
//判断传进来是数组还是对象 如果是数组[...数组],浅拷贝 操作不影响原来数组,如果是对象把它变为数组
const nodes = Array.isArray(treeNode) ? [...treeNode] : [treeNode];
const result = [];
nodes.forEach((node) => {
result.push(node);
if (Array.isArray(node[childKey])) {
// node[childKey].forEach((_node) =>
// result.push(...flat(_node, childKey))
// ); //第一种写法 递归平铺
//第二种写法 (简洁) 如同[1,2,3,...[4,5,6]] = [1,2,3,4,5,6]
result.push(...flat(node[childKey], childKey));
}
});
return result;
}
2.模拟数据如下
let testArr = [
{
custCode: "ZT00032232",
custName: "天津康盛华通科技有限公司",
shopList: [
{
shopCode: "DP20230315217058",
shopName: "附件111",
custCode: "DP20230315217058",
custName: "附件111",
parentCustCode: "ZT00032232",
parentCustName: "天津康盛华通科技有限公司",
},
{
shopCode: "DP20230315616201",
shopName: "111",
custCode: "DP20230315616201",
custName: "111",
parentCustCode: "ZT00032232",
parentCustName: "天津康盛华通科技有限公司",
},
],
},
{
custCode: "ZT00030989",
custName: "付浩泽",
shopList: [
{
shopCode: "DP20230315473282",
shopName: "京东分销-HHH亿投专卖店",
custCode: "DP20230315473282",
custName: "京东分销-HHH亿投专卖店",
parentCustCode: "ZT00030989",
parentCustName: "付浩泽",
},
{
shopCode: "DP20230315350496",
shopName: "北京京东世纪贸易有限公司-白电",
custCode: "DP20230315350496",
custName: "北京京东世纪贸易有限公司-白电",
parentCustCode: "ZT00030989",
parentCustName: "付浩泽",
},
],
},
{
custCode: "ZT00030068",
custName: "前郭县额如乡腾达塑钢门窗装潢材料",
shopList: [
{
shopCode: "DP20230315885160",
shopName: "",
custCode: "DP20230315885160",
custName: "",
parentCustCode: "ZT00030068",
parentCustName: "前郭县额如乡腾达塑钢门窗装潢材料",
},
],
},
{
custCode: "ZT00032231",
custName: "二道区弘舟家用电器行",
shopList: [
{
shopCode: "DP20230315968206",
shopName: "HHH集团官方旗舰店",
custCode: "DP20230315968206",
custName: "HHH集团官方旗舰店",
parentCustCode: "ZT00032231",
parentCustName: "二道区弘舟家用电器行",
},
],
},
{
custCode: "ZT00028859",
custName: "长春鼎晟源商贸行",
shopList: [
{
shopCode: "DP20230315317900",
shopName: "HHH好丽友专卖店",
custCode: "DP20230315317900",
custName: "HHH好丽友专卖店",
parentCustCode: "ZT00028859",
parentCustName: "长春鼎晟源商贸行",
},
],
},
{
custCode: "ZT00032949",
custName: "九台区城西新四海家电商场",
shopList: [],
},
{
custCode: "ZT10001164",
custName: "德惠市金诚电器有限公司",
shopList: [],
},
{
custCode: "ZT00029754",
custName: "长春汽车经济技术开发区艳华家电专卖店",
shopList: [],
},
{
custCode: "ZT00029474",
custName: "汪艳杰",
shopList: [],
},
{
custCode: "ZT00026399",
custName: "洮南市鑫晟电器商行",
shopList: [],
},
{
custCode: "ZT00031086",
custName: "九台区东湖鼎溢家电行",
shopList: [],
},
{
custCode: "ZT00035323",
custName: "客音售后换机-长春本部",
shopList: [],
},
{
custCode: "ZT00031015",
custName: "和龙市三星专卖店",
shopList: [],
},
{
custCode: "ZT00029722",
custName: "光复路鑫晟宏家用电器商行",
shopList: [],
},
{
custCode: "ZT10000915",
custName: "李春亮",
shopList: [],
},
{
custCode: "ZT10000983",
custName: "长春政策赠机",
shopList: [],
},
{
custCode: "ZT00028605",
custName: "陈雪",
shopList: [],
},
{
custCode: "ZT00032686",
custName: "吉林市昌邑区国彬家电维修部",
shopList: [],
},
{
custCode: "ZT10001175",
custName: "宽城区加友家用电器经销处",
shopList: [],
},
{
custCode: "ZT00031332",
custName: "吉林省科隆数码科技有限责任公司",
shopList: [],
},
];
let testArrObj = {
custCode: "ZT00032232",
custName: "天津康盛华通科技有限公司",
shopList: [
{
shopCode: "DP20230315217058",
shopName: "附件111",
custCode: "DP20230315217058",
custName: "附件111",
parentCustCode: "ZT00032232",
parentCustName: "天津康盛华通科技有限公司",
},
{
shopCode: "DP20230315616201",
shopName: "111",
custCode: "DP20230315616201",
custName: "111",
parentCustCode: "ZT00032232",
parentCustName: "天津康盛华通科技有限公司",
},
],
};
执行 结果如下
let arr = flat(testArr, "shopList");
console.log("arr", arr);
let arrobj = flat(testArrObj, "shopList");
console.log("arrobj", arrobj);