使用另一个数组查询Javascript数组以创建动态表

我有两个Javascript数组，如下所示

阵列1：

[ 
{ route: 'x1' },
{ route: 'x2' },
{ route: 'x3' },
{ route: 'x4' },
{ route: 'x5' }
]

阵列2：

[ 
{ pattern: 'y1', route: 'x1' },
{ pattern: 'y2', route: 'x1' },
{ pattern: 'y3', route: 'x2' },
{ pattern: 'y4', route: 'x2' },
{ pattern: 'y5', route: 'x3' },
{ pattern: 'y6', route: 'x3' },
{ pattern: 'y7', route: 'x4' },
{ pattern: 'y8', route: 'x4' },
{ pattern: 'y9', route: 'x5' },
{ pattern: 'y10', route: 'x5' }
]

我想把它们组合成一个表，如下所示

.tg{边框折叠：折叠；边框间距：0；}
.tg td{字体系列：Arial，无衬线；字体大小：14px；填充：10px 5px；边框样式：实心；边框宽度：1px；溢出：隐藏；分词：正常；}
.tg th{字体系列：Arial，无衬线；字体大小：14px；字体重量：正常；填充：10px 5px；边框样式：实心；边框宽度：1px；溢出：隐藏；分词：正常；}
.tg.tg-yw4l{垂直对齐：顶部}
路线
模式(s)
x1
y1，y2
x2
y3，y4
x3
y5，y6
x4
y7，y8
x5
y9，y10

您可以这样做

让arr1=[
{路由：'x1'}，
{路由：'x2'}，
{路由：'x3'}，
{路由：'x4'}，
{路由：'x5'}
]
设arr2=[
{模式：“y1”，路由：“x1'}，
{模式：'y2'，路由：'x1'}，
{模式：'y3'，路由：'x2'}，
{模式：'y4'，路由：'x2'}，
{模式：'y5'，路由：'x3'}，
{模式：'y6'，路由：'x3'}，
{模式：'y7'，路由：'x4'}，
{模式：'y8'，路由：'x4'}，
{模式：'y9'，路由：'x5'}，
{模式：“y10”，路由：“x5'}
]
让结果=arr2.减少（（a，b）=>{
a[b.路线]=a[b.路线]| |[]；
a[b.route].push（b.pattern）；
返回a；
}, {});
控制台日志（结果）我能够以我所需要的方式使其全部工作，这是一种更为平坦的组合，而不是键/数组组合


让arr1=[{
路线：“x1”
},
{
路线：“x2”
},
{
路线：“x3”
},
{
路线：“x4”
},
{
路线：“x5”
}
]
设arr2=[{
图案：“y1”，
路线：“x1”
},
{
模式：“y2”，
路线：“x1”
},
{
图案：“y3”，
路线：“x2”
},
{
图案：“y4”，
路线：“x2”
},
{
图案：“y5”，
路线：“x3”
},
{
图案：“y6”，
路线：“x3”
},
{
图案：“y7”，
路线：“x4”
},
{
图案：“y8”，
路线：“x4”
},
{
图案：“y9”，
路线：“x5”
},
{
图案：“y10”，
路线：“x5”
}
]
路线=新地图，
result=arr1.map（o=>（routes.set（o.route，{}），Object.assign（routes.get（o.route），o，{pattern:[]}））；
arr2.forEach（o=>routes.get（o.route.pattern.push（o.pattern））；
控制台日志（结果）
SO不是代码编写服务。请包括您尝试过的代码以及您遇到的问题谢谢，先生！绝对不是这个意思。我已将搜索功能添加到我的问题中。我的问题更像是一个逻辑问题，关于如何处理这项任务，而不是填鸭式地喂我代码！我不会想到的。我会试试的，我试过了，用代码。但是，我发现了这个问题（），需要按照该问题中的要求来组织数据，而不是使用键值。那可能吗？