JavaScript递归、树形、扁平数组、笔试题、reduce、forEach、concat、JSON、parse、stringify

1、数据源 1.1、扁平数组

let flatOriginData = [ { id: 5, parentId: 2, name: "目录1-1-1", }, { id: 1, parentId: 0, name: "目录1", }, { id: 13, parentId: 9, name: "目录2-2-3", }, { id: 3, parentId: 1, name: "目录1-2", }, { id: 2, parentId: 1, name: "目录1-1", }, { id: 12, parentId: 9, name: "目录2-2-2", }, { id: 4, parentId: 1, name: "目录1-3", }, { id: 7, parentId: 0, name: "目录2", }, { id: 9, parentId: 7, name: "目录2-2", }, { id: 6, parentId: 2, name: "目录1-1-2", }, { id: 11, parentId: 9, name: "目录2-2-1", }, { id: 8, parentId: 7, name: "目录2-1", }, { id: 10, parentId: 7, name: "目录2-3", }, ]; 

1.2、JSON树形

let treeOriginData = [ { id: 1, parentId: 0, name: "目录1", children: [ { id: 3, parentId: 1, name: "目录1-2" }, { id: 2, parentId: 1, name: "目录1-1", children: [ { id: 5, parentId: 2, name: "目录1-1-1" }, { id: 6, parentId: 2, name: "目录1-1-2" } ] }, { id: 4, parentId: 1, name: "目录1-3" } ] }, { id: 7, parentId: 0, name: "目录2", children: [ { id: 9, parentId: 7, name: "目录2-2", children: [ { id: 13, parentId: 9, name: "目录2-2-3" }, { id: 12, parentId: 9, name: "目录2-2-2" }, { id: 11, parentId: 9, name: "目录2-2-1" } ] }, { id: 8, parentId: 7, name: "目录2-1" }, { id: 10, parentId: 7, name: "目录2-3" } ] } ]; 

2、题目 2.1、题目一

通过代码补全实现扁平数组结构转成JSON树形结构。parentId属性记录的是父级id值。

function convert(list) { // 补全代码 let map = {}, result = []; list.forEach(item => map[item.id] = item); list.forEach(item => { let parent = map[item.parentId]; if (parent) { parent.children = parent.children || []; parent.children.push(item); } else { result.push(item); } }); return result; } // 输出结果 console.log('convert:', convert(flatOriginData)); 

2.2、题目二

1、给树形的每一项添加age属性/字段，age属性值为1~10的随机数。 2、把数字类型的parentId属性的值改为字符串类型。

function treeRecursion(data) { // 补全代码 for (const key in data) { if (Object.hasOwnProperty.call(data, key)) { let item = data[key]; if (key === 'id') (data['age'] = Math.round(Math.random() * 10), data.parentId = data.parentId.toString()); if (typeof item === 'object') treeRecursion(item); } } return data; } // 输出结果 console.log('treeRecursion:', treeRecursion(treeOriginData)); 

2.3、题目三

通过代码补全实现JSON树形结构转成扁平数组结构，每一项数据不能出现多余的children子项。

function flatten(arr) { // 补全代码 return arr.reduce((par, cur) => { let { id, name, parentId, children = [] } = cur; return par.concat([{ id, name, parentId }], children.length ? flatten(children) : []); }, []); } // 输出结果 console.log('flatten:', flatten(treeOriginData)); 

2.4、题目四

根据id获取树形对应数据项，也就是根据id进行数据查找、搜索、查询，找不到返回undefined。

function findItemById(list, id) { // 使用深克隆防止源数据结构改变 list = JSON.parse(JSON.stringify(list)); // 补全代码 let res = list.find(item => item.id === id), result = undefined; if (!res) { list.forEach(item => { res = findItemById(item.children ? item.children : [], id); if (res) result = res; }); } else { result = res; } if (result) delete result.children; return result; } // 输出结构 console.log('findItemById:', findItemById(treeOriginData, 10)); 

2.5、题目五

根据子级id获取父级id，直至顶级id为止。

function funRecursion(list, id) { // 补全代码 for (const key in list) { if (Object.hasOwnProperty.call(list, key)) { if (list[key].id === id) return [list[key].id]; let res = funRecursion(list[key].children ? list[key].children : [], id); if (res) return res.concat([list[key].id]); } } }; // 输出结果/原始输出 console.log(funRecursion(treeOriginData, 5));