js基础编程-题目7 *树＜--＞数组

整理下初学时做过的js基础编程题目和大家分享以下，如果大家觉得有用，别忘了点一下赞哦

数组转化为树形解构

给定原始数据(arr),期待生成一个树形结构的对象(tree)
let arr = [{
  id: 1,
  pid: 0,//parentId
  name: 'body'
}, {
  id: 2,
  pid: 1,
  name: 'title'
}, {
  id: 3,
  pid: 2,
  name: 'div'
},{
  id: 4,
  pid: 1,
  name: 'p'
}];

实现arrToTree

const arrToTree = (arr)=>{
  if(!Array.isArray(arr) || !arr.length) return false
  let [root] = arr.filter(val=>val.pid === 0)
  const addChildren = (node,list)=>{
    let children = list
      .filter(val=> val.pid === node.id )
      .map(val => addChildren(val,list))
    return {...node,children}
  }
  return addChildren(root,arr)
}

这里我之前有个很傻的问题，搞不懂终止条件，这里的终止条件就是[].map(函数)，因为空数组没有成员，里面的函数就不会执行。
生成的树形结构是这样的

{
  id: 1,
  pid: 0,
  name: 'body',
  children: [
    { id: 2, pid: 1, name: 'title', children: [Array] },
    { id: 4, pid: 1, name: 'p', child: [] }
  ]
}

这里扩展一下，让上面这种的树形结构转化为数组

const treeToArr = (tree)=>{
  const flatTree =(tree,res=[])=>{
    let {children,...node} = tree 
    res.push(node)
    children.forEach(val=>flatTree(val,res))
    return arr
  }
  return flatTree(tree,[])
}