js递归

题目一、多维数组变一维数组

// 原数组
const arr2 = [   {    name: '中餐',    id: '1',    children: [      { name: '米饭', id: '01' },      { name: '面条', id: '00', children: [{ name: '汤面', id: '001' }] }
    ]
  },
  {
    name: '西餐',
    id: '2',
    children: [
      { name: '牛排', id: '02' },
      { name: '汉堡', id: '03' }
    ]
  },
  { name: '泰餐', id: '3' }
]

思路：定义一个新的空数组，递归遍历原数组把原数组的每一项放入新数组
遍历原数组，没有children直接push新数组，有children就递归遍历children再push

// 新数组
const targetArr2 = [] 

// 处理函数, arr：多维数组
const resoveMethod2 = (arr) => {
  arr.forEach((item) => {
    targetArr2.push({
      name: item.name,
      id: item.id
    })
    if (item.children) {
      resoveMethod2(item.children)
    }
  })
  return targetArr2
}
const result2 = resoveMethod2(arr2)
console.log('result2', result2)

 

题目二： 一维数组变成多维数组

// 原数组
const newArr = [  { name: '中餐', id: '1' },  { name: '面条', id: '1-1', pid: '1' },  { name: '米饭', id: '1-2', pid: '1' },  { name: '馒头', id: '1-3', pid: '1' },  { name: '西餐', id: '2' },  { name: '牛排', id: '2-1', pid: '2' },  { name: '汉堡', id: '2-2', pid: '2' },  { name: '战斧牛排', id: '2-1-1', pid: '2-1' },  { name: '泰餐', id: '3' },  { name: '咖喱', id: '3-1', pid: '3' }]
  
// 思路：定义一个新的空数组，数据处理后放入新数组
// 原数组进行遍历，没有pid直接push，有pid做的是一个插入操作，先找到被插入数组中id等于插入        项pid的项，然后把插入项加入到找到的项的children属性中

// 新数组
const targetArr = [] 

// 数据插入函数, insertItem：插入项，insertedArr：被插入数组
const insert = (insertItem, insertedArr) => {
  insertedArr.forEach((k) => {
    if (k.id === insertItem.pid) {
      if (k.children && k.children.length) {
        k.children.push({
          name: insertItem.name,
          id: insertItem.id
        })
      } else {
        k.children = [{          name: insertItem.name,          id: insertItem.id        }]
      }
    } else if (k.children) {
      insert(insertItem, k.children)
    }
  })
}

// 处理函数, arr：一维数组
const resoveMethod = (arr) => {
  arr.forEach((item) => {
    // 没有pid直接push
    if (!item.pid) {
      targetArr.push(item)
    } else {
      // 有pid 先找到 targetArr 中 id 等于当前pid的项，然后加入到children属性中
      insert(item, targetArr)
    }
  })
  return targetArr
}

// 调用函数
const result = resoveMethod(newArr)
console.log('result', result)