javascript - 填充缺失数据的数组

Question

我有一组以不同频率更新的 N 个数组(数据被插入其中)。如果我的数组以比“最快”数组更慢的频率更新，那么那些较慢的数组应该用以前的数据填充。

示例:2 个数组，以不同的频率更新，超过 10 秒看起来像

// fast array updates every 1 second
// after 10 seconds the data is:
let fast_array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
// slow array updates every 5 seconds
// after 10 seconds the data is:
let slow_array = [0, 1];

我希望像这样填充较慢的数组

fast_array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
slow_array = [0, 0, 0, 0, 0, 1, 1, 1, 1, 1]

并且数组长度应该始终相等。

我已经为此编写了一个完整的可测试设置，只是找不到那个神奇的公式来正确填充。请查看 fiddle 以找到解决此问题的简单方法!查看函数“处理器”

HTML

<div>
  <button id="start" type="button">
    Start
  </button>
  <button id="stop" type="button">
    Stop
  </button>
</div>
<div id="feature1">
  <div>
    Length: <span id="feature1len"></span>
  </div>

  <div>
    [<span id="feature1data"></span>]
  </div>
</div>
<div id="feature2">
  <div>
    Length: <span id="feature2len"></span>
  </div>
  [<span id="feature2data"></span>]
</div>

</div>

JS

let startbutton = document.getElementById('start');
let stopbutton = document.getElementById('stop');
startbutton.addEventListener('click', () => {
  start();
});
stopbutton.addEventListener('click', () => {
  stop();
});
let feature1 = {
  freq: 1,
  raw_data: [],
  final_data: [],
  interval: null,
  lenHtml: document.getElementById('feature1len'),
  dataHtml: document.getElementById('feature1data')
}

let feature2 = {
  freq: 5,
  raw_data: [],
  final_data: [],
  interval: null,
  lenHtml: document.getElementById('feature2len'),
  dataHtml: document.getElementById('feature2data')
}

let render_interval = null;


function getRandomInt(min = 0, max = 100) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function render() {
  processor(feature1);
  processor(feature2);
  feature1.lenHtml.innerText = feature1.final_data.length;
  feature1.dataHtml.innerText = feature1.final_data.toString();
  feature2.lenHtml.innerText = feature2.final_data.length;
  feature2.dataHtml.innerText = feature2.final_data.toString();
}

function start() {
  feature1.raw_data = [];
  feature1.final_data = [];
  feature2.raw_data = [];
  feature2.final_data = [];
  feature1.raw_data.push(getRandomInt())
  feature1.interval = setInterval(() => {
    feature1.raw_data.push(getRandomInt())
  }, feature1.freq * 1000);
  feature2.raw_data.push(getRandomInt())
  feature2.interval = setInterval(() => {
    feature2.raw_data.push(getRandomInt())
  }, feature2.freq * 1000);
  render_interval = setInterval(() => {
    render();
  }, 1000)
  render();
}

function stop() {
  clearInterval(feature1.interval);
  clearInterval(feature2.interval);
  clearInterval(render_interval);
}

function processor(feature) {
  // determine highest frequency
  let most_frequent = Math.min(feature1.freq, feature2.freq);
  // determine longest length
  let longest_length = Math.max(feature1.raw_data.length, feature2.raw_data.length);

  // process data if needed
  feature.final_data = [];
  for (let i = 0; i < feature.raw_data.length; i++) {
    feature.final_data.push(feature.raw_data[i]);
    if(feature.freq !== most_frequent){
        let max_filler =  0; //???
        for(let x = 0; x < max_filler; x++){
        feature.final_data.push(feature.raw_data[i]);
      }
    }
  }
}

render();

https://jsfiddle.net/79wbnkf8/1/

Answer 1

可以添加函数:

function lcm(x, y) {
  return (!x || !y) ? 0 : Math.abs((x * y) / gcd(x, y));
}

function gcd(x, y) {
  x = Math.abs(x);
  y = Math.abs(y);
  while(y) {
    var t = y;
    y = x % y;
    x = t;
  }
  return x;
}

然后像这样修改你的流程函数:

function processor(feature) {
  // determine highest frequency
  let most_frequent = Math.min(feature1.freq, feature2.freq);
  // determine longest length
  let longest_length = Math.max(feature1.raw_data.length, feature2.raw_data.length);

  let l = lcm(feature1.freq, feature2.freq);
  let max_filler = l / feature1.freq;

  // process data if needed
  feature.final_data = [];
  for (let i = 0; i < feature.raw_data.length; i++) {

    if(feature.freq !== most_frequent){
        //let max_filler =  0; //???
        for(let x = 0; x < max_filler; x++){
        feature.final_data.push(feature.raw_data[i]);
        if (feature.final_data.length >=longest_length) break;
      }
    } else {
      feature.final_data.push(feature.raw_data[i]);
    }
  }
}