JavaScript。试图简化代码，也许是循环？答案

【问题标题】：JavaScript. Trying to simplify code, maybe with loops?JavaScript。试图简化代码，也许是循环？
【发布时间】：2019-12-17 08:30:13
【问题描述】：

我对编码很陌生，我一直在玩 chart.js。我有这个将数据插入到图表中的功能，但是我必须对每个数据数组重复 push 方法和 if，到目前为止只有两个数据集，但我计划添加更多，我不想有如果有 15 个数据集，则每次重复一些代码。我敢肯定有一个更简单的方法来做到这一点，也许用一个循环，一个forEach，用.map？但我对 javaScript 的掌握还不够，无法让它发挥作用。非常感谢一些帮助。

这是我要简化的函数：

function add_data(chart, labels, data) {
    var today = new Date();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

    graficaConexiones.data.datasets[0].data.push(randomData());
    graficaConexiones.data.datasets[1].data.push(randomData());
    graficaConexiones.data.labels.push(time);

    if (graficaConexiones.data.datasets[0].data.length > dataLength) {
        graficaConexiones.data.datasets[0].data.shift();
    }

    if (graficaConexiones.data.datasets[1].data.length > dataLength) {
        graficaConexiones.data.datasets[1].data.shift();
    }

    if (graficaConexiones.data.labels.length > labelLength) {
        graficaConexiones.data.labels.shift()
    }

    graficaConexiones.update();
}
setInterval(add_data, 5000);

我尝试在函数内部执行此操作，但我卡在了那里，不知道如何继续。

    var dataGraph = graficaConexiones.data.datasets

    for (let i = 0; i < dataGraph.length; i++) {
        console.log(dataGraph[i]);
    }

这是完整的 javascript 页面：

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

var dataLength = 10; 
var labelLength = 10;

var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();


var ctx = document.getElementById("graficaConexiones");
var graficaConexiones = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['', '', '', '', '', '', '', '', '', ''],
        datasets: [{
                label: "Total conexiones",
                data: [null, null, null, null, null, null, null, null, null, null],
                borderColor: "#DD0000",
                backgroundColor: "#DD0000",
                fill: false
            },
            {
                label: "Total entrantes",
                data: [null, null, null, null, null, null, null, null, null, null],
                borderColor: "#1E90FF",
                backgroundColor: "#1E90FF",
                fill: false
            },
        ]
    },
    options: {
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        title: {
            display: true,
            text: 'Número de conexiones'
        }
    }
});

function add_data(chart, labels, data) {
    var today = new Date();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

    graficaConexiones.data.datasets[0].data.push(randomData());
    graficaConexiones.data.datasets[1].data.push(randomData());
    graficaConexiones.data.labels.push(time);

    if (graficaConexiones.data.datasets[0].data.length > dataLength) {
        graficaConexiones.data.datasets[0].data.shift();
    }

    if (graficaConexiones.data.datasets[1].data.length > dataLength) {
        graficaConexiones.data.datasets[1].data.shift();
    }

    if (graficaConexiones.data.labels.length > labelLength) {
        graficaConexiones.data.labels.shift()
    }

    graficaConexiones.update();
}
setInterval(add_data, 5000);

和html：

<!DOCTYPE html>
<html>
  <head>
    <title>Conexiones</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <h1>Conexiones</h1>
      <h2>Número de conexiones</h2>

      <canvas id="graficaConexiones" width="1600" height="900"></canvas>
    </div>

    <script src="lineChart.js"></script>
  </body>
</html>

【问题讨论】：

标签： javascript arrays loops chart.js javascript-objects

【解决方案1】：

只需forEach 覆盖graficaConexiones.data.datasets 数组：

graficaConexiones.data.datasets.forEach(({ data }) => {
  data.push(randomData());
  if (data.length > dataLength) {
    data.shift();
  }
});

全文：

function add_data() {
  const { labels, datasets } = graficaConexiones.data;
  var today = new Date();
  var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  labels.push(time);
  if (labels.length > labelLength) {
    labels.shift();
  }
  datasets.forEach(({ data }) => {
    data.push(randomData());
    if (data.length > dataLength) {
      data.shift();
    }
  });
}

或者，如果您不喜欢解构：

function add_data() {
  const labels = graficaConexiones.data.labels;
  const datasets = graficaConexiones.data.datasets;
  var today = new Date();
  var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  labels.push(time);
  if (labels.length > labelLength) {
    labels.shift();
  }
  datasets.forEach((dataset) => {
    const data = dataset.data;
    data.push(randomData());
    if (data.length > dataLength) {
      data.shift();
    }
  });
}

首先将重复的属性访问提取到变量中确实有助于减少重复代码。

由于您没有将任何参数传递给 add_data，因此请从其定义中删除所有参数。

【讨论】：

谢谢！它有效，我会坚持第二个，这是我迄今为止理解得更好的一个。但我会保持另一个关闭。你完全正确，这个论点来自我完全忘记删除的以前的尝试。

【解决方案2】：

使用 async/await 可以将函数简化为循环：

  const delay = ms => new Promise(res => setTimeout(res, ms));

   function today() {
     const today = new Date();
     return today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
   }

  async function updateLoop() {
    const { datasets, labels } = graficaConexiones.data;

    for(let i = 0; i < Math.Infinity; i++) {
        for(const set of datasets)
           set.data.push(randomData());

        labels.push(today());

        for(const set of [...datasets, labels])
           if(set.length > dataLength) set.shift();

       graficaConexiones.update();
       await delay(500);
   }
 }

【讨论】：