将两个一维数组映射成一个二维数组，然后用已知值填充

Question

我只是想知道解决这个问题的最佳方法。我有两个需要合并到网格中的单维数组，实际上第一个数组变成了行，第二个数组变成了列 - 两者的大小都未知。

我在考虑嵌套循环和 .push，但有没有更优雅的解决方案。

问题的第二部分有点棘手。每个网格单元都将根据行和列数据分配一个键。我有一个包含此键的第三个数组，作为数组索引中对象的属性，我需要将此对象注入（或链接）到 2D 数组中的正确单元格。通常，大约 80% 的网格将在第三个数组中具有关联的对象。

数据集并不庞大；最大的网格只有大约 400 个单元，因此迭代解决方案可以工作，但感觉很脏。有没有更好的“计算机科学”方法或 javascript 数组方法可以让我实现我想要的。

如果没有，在迭代 items 数组和尝试在 2D 数组中找到正确的单元格或迭代 2D 数组并尝试在 items 数组中找到匹配对象之间是否存在任何重大权衡，请记住我正在匹配 item 属性而不是键。

下面的示例代码

let arrRow = [
    {"code":"S", "desc":"small"},
    {"code":"M", "desc":"med"},
    {"code":"L", "desc":"large"}
];
let arrCol = [
    {"code":"R", "desc":"Red"},
    {"code":"G", "desc":"Green"},
    {"code":"B", "desc":"Blue"}
];
let arrItems= [
    {"item":"SR", "desc":"Small Red"},
    {"item":"SB", "desc":"Small Blue"},
    {"item":"MB", "desc":"Med Blue"},
    {"item":"LB", "desc":"Large Blue"},
    {"item":"SG", "desc":"Small Green"},
    {"item":"LG", "desc":"Large Green"}
 ];

根据受访者的要求。期望的结果是

[
  [
    {"key":"SR", "value":{"item":"SR", "desc":"Small Red"}},
    {"key":"SG", "value":{"item":"SG", "desc":"Small Green"}},
    {"key":"SB", "value":{"item":"SB", "desc":"Small Blue"}
  ],
    {"key":"MR", "value":{}},
    {"key":"MG", "value":{}},
    {"key":"MB", "value":{"item":"MB", "desc":"Med Blue"}}
  ],
    {"key":"LR", "value":{}},
    {"key":"LG", "value":{"item":"LG", "desc":"Large Green"}},
    {"key":"LB", "value":{"item":"LB", "desc":"Large Blue"}}
  ]

]

或者，该值可能只是项数组中元素的索引，这可能更节省内存

Answer 1

您可以使用 Map 获取数据并迭代行和列。

var arrRow = [{ code: "S", desc: "small" }, { code: "M", desc: "med" }, { code: "L", desc: "large" }],
    arrCol = [{ code: "R", desc: "Red" }, { code: "G", desc: "Green" }, { code: "B", desc: "Blue" }],
    arrItems = [{ item: "SR", desc: "Small Red" }, { item: "SB", desc: "Small Blue" }, { item: "MB", desc: "Med Blue" }, { item: "LB", desc: "Large Blue" }, { item: "SG", desc: "Small Green" }, { item: "LG", desc: "Large Green" }],
    map = arrItems.reduce((m, o) => m.set(o.item, o), new Map),
    result = arrRow.map(r => arrCol.map(c => (map.get(r.code + c.code) || {}).desc || ''));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }