javascript - 如何填充和规范化可变长度数组

Question

我有以下包含 foo、bar 和 baz 对象的图表数组，每个对象都包含一个带有数据点的值数组。

问题是我从我的 API 端点获得了可变数量的数据点。
我需要规范化我的对象，以便它们:

• 数据点需要按标签排序(例如 a, b, c..)

• 如果数据点不存在，在特定对象中却存在，在任何其他数据点数组中，生成的值为零

• 最后，每个对象中的数据点数必须相同。

代码示例如下:

var r = function() { return Math.random() * 10; };

var chart = [
    {key:'foo', values: [['a', r()], ['b', r()], ['c', r()], ['d', r()]]},
    {key:'bar', values: [['b', r()], ['c', r()], ['d', r()], ['e', r()]]},
    {key:'baz', values: [['c', r()], ['d', r()], ['e', r()], ['f', r()]]}
];

// desired output, where x is the random value returned by r()
// any values that are unavailable must be 0
chart = [
    {key:'foo', values: [['a', x], ['b', x], ['c', x], ['d', x], ['e', 0], ['f', 0]]},
    {key:'bar', values: [['a', 0], ['b', x], ['c', x], ['d', x], ['e', x], ['f', 0]]},
    {key:'baz', values: [['a', 0], ['b', 0], ['c', x], ['d', x], ['e', x], ['f', x]]}
];

Answer 1

您的字母数字对可能用对象而不是数组更好地表示，但我相信这可以解决所陈述的问题。

var datapointLabels = {};                                 // Create object to record which labels exist. 
for(var i = 0; i < chart.length; i++) {                   // Iterate through `chart` items.
  for(var j = 0; j < chart[i].values.length; j++) {       // Iterate through `values` items.
    var datapointLabel = chart[i].values[j][0];
    datapointLabels[datapointLabel] = true;
  }
}
// Skip nested loops above if datapoint labels are pre-known; construct `datapointsLabels` object with one loop, or manually without looping, instead.

var newChart = [];                                        // Must create a new array to hold the padded data (will need to refer to old array throughout process).
for(var i = 0; i < chart.length; i++) {
  newChart[i] = {};
  newChart[i].key = chart[i].key;
  newChart[i].values = [];
  for(var datapointLabel in datapointLabels) {            // Iterate through all datapoint labels in our records object.
    var datapoint = 0;                                    // Set default datapoint as zero.
    for(var j = 0; j < chart[i].values.length; j++) {     // Look at each `value` pair to see if it matches the current datapoint label.
      if(chart[i].values[j][0] === datapointLabel) {
        datapoint = chart[i].values[j][1];                // Overwrite default if found.
        j = chart[i].values.length;                       // Skip further checks (optional, minor efficiency increase).
      }
    }
    newChart[i].values.push([datapointLabel, datapoint]); // Push found or default data to new array.
  }  
}

如果您能够重新定义您的数据结构，这里有一种使用对象键查找来切断for循环的方法:

var chart = [
  { key: 'foo', values: { a: r(), b: r(), c: r(), d: r() } },
  { key: 'bar', values: { b: r(), c: r(), d: r(), e: r() } },
  { key: 'baz', values: { c: r(), d: r(), e: r(), f: r() } }
];

var datapointLabels = {};                                 // Create object to record which labels exist. 
for(var i = 0; i < chart.length; i++) {                   // Iterate through `chart` items.
  for(var datapointLabel in chart[i].values){             // Iterate through `values` items.
    datapointLabels[datapointLabel] = true;
  }
}
// Skip nested loops above if datapoint labels are pre-known; construct `datapointsLabels` object with one loop, or manually without looping, instead.

var newChart = [];                                        // Must create a new array to hold the padded data (will need to refer to old array throughout process).
for(var i = 0; i < chart.length; i++) {
  newChart[i] = {};
  newChart[i].key = chart[i].key;
  newChart[i].values = {};
  for(var datapointLabel in datapointLabels) {            // Iterate through all datapoint labels in records object.
    var datapoint = chart[i].values[datapointLabel] || 0;
    newChart[i].values[datapointLabel] = datapoint;
  }
}