我正在尝试将两个Javascript数组合并为一个直接Javascript的数组。
我正在努力完成以下2个问题中的问题。但是，我的数据有几点需要合并而不是单个项目;并且数组之间的公共元素完全相同。
以下是其他问题：
这是我的代码（来自上面列出的第一个问题提供的最后一个答案）（但显然是错误的）：
let arr1 = [
{ route: 'x1' },
{ route: 'x2' },
{ route: 'x3' },
{ route: 'x4' },
{ route: 'x5' }
]
let arr2 = [
{ 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' }
]
let finalArray2 = [];
arr2.forEach(member => {
finalArray2.push(Object.assign({}, member,
{ route: arr1.find(m => m.route === member.route).route }
))
});
console.log(finalArray2);
我真的需要结果如下所示：
let arr3 = [
{ route: 'x1', pattern: ['y1','y2'] },
{ route: 'x2', pattern: ['y3','y4'] },
{ route: 'x3', pattern: ['y5','y6'] },
{ route: 'x4', pattern: ['y7','y8'] },
{ route: 'x5', pattern: ['y9','y10'] }
]
因此它可以在如下表格中显示：
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-yw4l">ROUTE</th>
<th class="tg-yw4l">PATTERN(s)</th>
</tr>
<tr>
<td class="tg-yw4l">x1</td>
<td class="tg-yw4l">y1, y2</td>
</tr>
<tr>
<td class="tg-yw4l">x2</td>
<td class="tg-yw4l">y3, y4</td>
</tr>
<tr>
<td class="tg-yw4l">x3</td>
<td class="tg-yw4l">y5, y6</td>
</tr>
<tr>
<td class="tg-yw4l">x4</td>
<td class="tg-yw4l">y7, y8</td>
</tr>
<tr>
<td class="tg-yw4l">x5</td>
<td class="tg-yw4l">y9, y10</td>
</tr>
</table>
答案 0 :(得分：1)
您可以使用Map来保留对目标对象的引用。
var array1 = [{ route: 'x1' }, { route: 'x2' }, { route: 'x3' }, { route: 'x4' }, { route: 'x5' }],
array2 = [{ 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' }],
routes = new Map,
result = array1.map(o => (routes.set(o.route, {}), Object.assign(routes.get(o.route), o, { pattern: [] })));
array2.forEach(o => routes.get(o.route).pattern.push(o.pattern));
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }
答案 1 :(得分：0)
你可以试试这个 -
const arr2 = [
{ 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' }
]
const result = arr2.reduce((acc, val) => {
const {pattern, route} = val;
const o = acc.find(v => v.route === route);
if (o) {
o.pattern.push(pattern);
} else {
acc.push({route, pattern: [pattern]});
}
return acc;
}, []);
console.log(result);
如果您只需要arr1路线，请在上述结果中添加过滤器。
let arr1 = [
{ route: 'x1' },
{ route: 'x2' },
{ route: 'x3' },
{ route: 'x4' },
{ route: 'x5' }
]
const filteredResult =
result.filter(r => arr1.findIndex(o => o.route === r.route) > -1);
console.log(filteredResult);
答案 2 :(得分：0)
将第二个阵列缩小为新阵列。您需要在执行此操作时构建路线地图，但您仍然可以一次性完成：
let map = {};
let arr3 = arr2.reduce((newArray, item) => {
if(!map[item.route]){
map[item.route] = { route: item.route, pattern: [item.pattern] }
newArray.push(map[item.route]);
}
else{
map[item.route].pattern.push(item.pattern);
}
return newArray;
}, []);
答案 3 :(得分：0)
我还建议使用Map。
使用Map构造函数创建所有路径键，目标对象结构为值（但为空模式数组），并填充这些数组。最后提取地图的值以得到结果：
const arr1 = [{ route: 'x1' }, { route: 'x2' }, { route: 'x3' }, { route: 'x4' }, { route: 'x5' }],
arr2 = [{ 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' }];
const map = new Map(arr2.map( ({route}) => [route, { route, pattern: [] }] ));
for (const o of arr2) map.get(o.route).pattern.push(o.pattern);
const result = [...map.values()];
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }
如果唯一的目的是填充HTML表格，那么我建议：
const arr1 = [{ route: 'x1' }, { route: 'x2' }, { route: 'x3' }, { route: 'x4' }, { route: 'x5' }],
arr2 = [{ 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' }];
const map = new Map(arr2.map( o => [o.route, []] ));
for (const o of arr2) map.get(o.route).push(o.pattern);
const table = document.querySelector('.tg');
for (const [route, patterns] of map) {
const row = table.insertRow();
row.insertCell().textContent = route;
row.insertCell().textContent = patterns.join(', ');
}.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}<table class="tg">
<tr>
<th class="tg-yw4l">ROUTE</th>
<th class="tg-yw4l">PATTERN(s)</th>
</tr>
</table>