如何在 JS 中构建树而不使用循环或使用最小循环迭代？

Question

我有一个关于代码优化的问题。

给定三个对象：

const cars = [
  {
    index: 0,
    car_name: 'BMW'
  },
  {
    index: 1,
    car_name: 'Audi'
  },
  {
    index: 2,
    car_name: 'Ford'
  }
]

const models = [
  {
    name: '535i',
    car_index: 0,
  },
  {
    name: '320i',
    car_index: 0,
  },
  {
    name: 'A4 B5',
    car_index: 1,
  },
  {
    name: 'Focus 2 ST',
    car_index: 2,
  },
  {
    name: 'Mondeo ST220',
    car_index: 2,
  }
]

const engines = [
  {
    car_model: '535i',
    name: '3.0 N55'
  },
  {
    car_model: '320i',
    name: '1.6 N20'
  },
  {
    car_model: 'A4 B5',
    name: '1.8T AWT'
  },
  {
    car_model: 'Focus 2 ST',
    name: '2.5 HYDA'
  },
  {
    car_model: 'Mondeo ST220',
    name: '3.0 MEBA'
  }
]

需要构建一棵这样的树：

• 宝马
  • 535i
    • 3.0 N55
  • 320i
    • 1.6 N20
• 奥迪
  • A4 B5
    • 1.8T AWT
• 福特
  • 焦点2 ST
    • 2.5 海达
  • 蒙迪欧ST220
    • 3.0 MEBA

改变数据结构是不可能的。

我使用这个解决方案解决了这个任务：

function getTreeData() {
  return cars.reduce((carAcc, carCurr) => {
    carAcc.push({
      title: carCurr.car_name,
      children: models.reduce((modAcc, modCurr) => {
        if (modCurr.car_index === carCurr.index)
          modAcc.push({
            title: modCurr.name,
            children: engines.reduce((engAcc, engCurr) => {
              if (engCurr.car_model === modCurr.name)
                engAcc.push({
                  title: engCurr.name,
                })

              return engAcc
            }, [])
          })

        return modAcc
      }, [])
    })

    return carAcc
  }, [])
}

但是看起来很丑。我如何改进我的解决方案或使用其他方法？

Answer 1

使用参数解构你可以编写更少的代码：

const result = cars.map(({ car_name: title, index }) =>
({
    title,
    children: models.filter(({ car_index }) => car_index === index)
        .map(({ name: title }) => ({
            title,
            children: engines.filter(({ car_model }) => car_model === title).map(({ name: title }) => ({ title }))
        }))
}));

console.log(result);

<script>
const cars = [
  {
    index: 0,
    car_name: 'BMW'
  },
  
  {
    index: 1,
    car_name: 'Audi'
  },
  {
    index: 2,
    car_name: 'Ford'
  }
]

const models = [
  {
    name: '535i',
    car_index: 0,
  },
  {
    name: '320i',
    car_index: 0,
  },
  {
    name: 'A4 B5',
    car_index: 1,
  },
  {
    name: 'Focus 2 ST',
    car_index: 2,
  },
  {
    name: 'Mondeo ST220',
    car_index: 2,
  }
]

const engines = [
  {
    car_model: '535i',
    name: '3.0 N55'
  },
  {
    car_model: '320i',
    name: '1.6 N20'
  },
  {
    car_model: 'A4 B5',
    name: '1.8T AWT'
  },
  {
    car_model: 'Focus 2 ST',
    name: '2.5 HYDA'
  },
  {
    car_model: 'Mondeo ST220',
    name: '3.0 MEBA'
  }
]
</script>