javascript - 如何将多个(未知数量)对象(作为参数)传递给函数 - Java 脚本

Question

我有一个包含多个数据集对象的对象，这些数据集对象可以包含一个项目数组或该对象内的多个数组。在不知道它是否是一个多对象数组的情况下，我如何将它传递给函数，该函数期望根据数组的数量“forEach”？

为了更清楚地查看存储中的数据:

var storage = {
  dataset1: {
    labels: ["Mon", "Tue", "Wed"],
     storageDatasets: [{                   // two objects here
        data: [2, 4, 5, 6, 10]
      },
      {
        data: [200, 100, 300, 600]
      }
    ]
  },
  dataset2: {
    labels: ["Mon", "Tue", "Wed"],
    storageDatasets: [{                  // one object here
      data: [200, 100, 300, 600]
    }]
  }
};

上面我试图将它们作为参数传递:

$(".change").click(function() {
  var temp = $(this).text();
  addChartData(myChart, storage[temp].labels, storage[temp].storageDatasets.data);        // how to get last parameter correctly, based on the amount of data objects?
});

并使用此函数进行处理:

function addChartData(chart, labels, data) {
  chart.data.labels = labels;
  chart.data.datasets.forEach(dataset => {
    dataset.data = data;
  });
  chart.update();
}

问题在于 var 存储中的 storageDatasets 中的数据对象数量。有些会有多个，有些则有一个。我如何循环遍历它们以将它们作为参数传递，以便 addChartData 函数能够正确运行。

var config = {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      data: [65, 0, 80, 81, 56, 85, 40],
      fill: false
    }]
  }
};

var storage = {
  dataset1: {
    labels: ["Mon", "Tue", "Wed"],
    storageDatasets: [{
        data: [2, 4, 5, 6, 10]
      },
      {
        data: [200, 100, 300, 600]
      }
    ]
  },
  dataset2: {
    labels: ["Mon", "Tue", "Wed"],
    storageDatasets: [{
      data: [200, 100, 300, 600]
    }]
  }
};

function addChartData(chart, labels, data) {
  chart.data.labels = labels;
  chart.data.datasets.forEach(dataset => {
    dataset.data = data;
  });
  chart.update();
}


var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, config);


$(".change").click(function() {
  var temp = $(this).text();
  addChartData(myChart, storage[temp].labels, storage[temp].storageDatasets.data);

  console.log(temp);

});

.chart-container {
  height: 300px;
  width: 500px;
  position: relative;
}

canvas {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div> <button class="change">dataset1</button></div>
<div> <button class="change">dataset2</button></div>

<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

Answer 1

将整个 storageDatasets 作为单个参数传递给函数可能更容易，而不是处理数量可变的参数:

$(".change").click(function() {
  var temp = $(this).text();
  addChartData(
      myChart, 
      storage[temp].labels, 
      storage[temp].storageDatasets
  );
});

function addChartData(chart, labels, datasets) {
  chart.labels = labels;
  chart.datasets = datasets; // per comments below, this is a direct assignment, no iteration necessary
  chart.update();
}

但是，例如，如果您需要将两个数据集合并为一个，那么您需要迭代 storageDatasets:

function addChartData(chart, labels, datasets) {
  chart.labels = labels;
  chart.datasets = [{data:[]}];
  datasets.forEach(set=> {
    chart.datasets[0].data = chart.datasets[0].data.concat(set.data);
  })
  // chart.datasets now contains a single object containing concatenated data from all the datasets passed in
  chart.update();
}