js，如何将数组进行遍历

var list = ["a", "b", "c", "d", ] , routers = [];
var asyncRoutes = [
        { name: "a",
          children: [
            {  name: "b", }, {  name: "c", }, {  name: "d",}, {  name: "e", },{  name: "f", },
          ],
        },
      ];
如何遍历出来 
asyncRoutes  = [  { name: "a",children: [ {  name: "b", }, {  name: "c", }, {  name: "d",}   ],  },]  这样的格式呢？

我是这样的写法，不能得到 children里面的数据
      list.forEach((key) => {
        routers.push(
          ...asyncRoutes.filter((item) => {
            if (item.children && item.children.length > 1) {
              item.children = item.children.filter((i) => {
                return i.name == key;
              });
            }
            return item.name === key;
          })
        );
      });


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    
    <script>
        var list = ["a", "b", "c", "d",], routers = [];
        var asyncRoutes = [
            {
                name: "a",
                children: [
                    { name: "b", }, { name: "c", }, { name: "d", }, { name: "e", }, { name: "f", },
                ],
            },
        ];

        var obj = {};
        obj.children = [];
        var data = list.forEach((item, index) => {
            if (index == 0) {
                obj.name = item;
                return
            }
            var child_obj = {
                children: item
            }
            obj.children.push(child_obj);
        });
        routers.push(obj)
        console.log(routers);
    </script>
</body>

</html>

在写个方法，递归

js，如何将 数组进行遍历

js，如何将数组进行遍历