map two 1D arrays into a 2D array and then fill wi

问题:

I', just wondering about the best way to approach this problem. I have two single dimension arrays which I need to merge into a grid, effectively the first array becomes rows and the second array becomes columns - both are of unknown size.

I am thinking nested loops and .push but is there a more elegant solution.

The second part of the problem is slightly trickier. Each of the grid cells will have a key assigned based on the row and column data. I have a third array which contains this key, as a property of the object in the array index and I need to inject (or link) this object to the correct cell in the 2D array. Typically around 80% of the grid will have an associated object in the third array.

The data sets are not huge; the largest grid will only be about 400 cells so an iterative solution will work but it feels dirty. Is there a better 'computer science' method or a javascript array method that will let me achieve what I want.

If not, is there any significant tradeoff between iterating in the items array and trying to find the correct cell in the 2D array or iterating the 2D array to and try to find the matching object in the items array, bearing in mind that I am matching against the item property and not a key.

Sample code below

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"}
 ];

As per respondent's request. The desired outcome would be

[
  [
    {"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"}}
  ]

]

Alternatively the value could just be the index of the element in the item array which is probably more memory efficient

回答1:

You could take a Map for data and iterate rows and columns.

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; }