使用函数中传入的参数创建具有逻辑的对象

Question

我有这个函数，我创建了一个对象const dataObj在函数中使用，labels和valuesX传入。

function drawChart(labels, values0, values1, values2, ...many more objects) {
const dataObj = {
labels: labels,
datasets: [
{
fill: false,
label: "temp0",
backgroundColor: 'red',
borderColor: 'red',
data: values0
},
{
fill: false,
label: "temp1",
backgroundColor: 'purple',
borderColor: 'purple',
data: values1
},
{
fill: false,
label: "temp2",
backgroundColor: 'yellow',
borderColor: 'yellow',
data: values2
},
...many more objects
}
}
...not meaningful code
}

是否有一种方法可以在函数内部创建具有逻辑的dataObj，而不是用for循环或类似的方法逐个创建所有对象?当我需要在逻辑中引用各自的参数valueX来创建具有逻辑的对象时，我的问题就来了。

我的方法是创建一个生成对象的函数，但是当我需要用逻辑引用参数时，问题就来了。查看注释//PROBLEM HERE

function getDatasetArray(values0, values1, values2, values3, values4,
values5, values6, values7, values8, values9, 
values10, values11) {
const datasets = [];
const colors = [];
const lables = [];
for(let i = 0; i < 12; i++) {
const obj = {
fill: false,
label: lables[i],
backgroundColor: colors[i],
borderColor: colors[i],
data: values0 // PROBLEM HERE
}
datasets.push(obj);
}
return datasets;
}

Answer 1

将您的值作为数组。

function drawChart(labels, values) { // take values as array
const dataObj = {
labels: labels,
datasets: []
}
let colors = ["red", "purple", ...], i = 0;
values.forEach(value => {
let obj = {
fill: false,
label: "temp" + i,
backgroundColor: color[i],
borderColor: color[i],
data: values[i]
} 
dataObj.datasets.push(obj);
i++;
});
// ...
}

Answer 2

您可以将getDatasetArray更新为

const getDatasetArray = (...values) => { // take values using es6-spread
const datasets = [];
const colors = [];
const lables = [];
for (let i = 0; i < values.length; i++) { // iterate for values
const obj = {
fill: false,
label: lables[i],
backgroundColor: colors[i],
borderColor: colors[i],
data: values[i]  // put value into data-key
}
datasets.push(obj);
}
return datasets;
}

anddrawChart=

function drawChart(labels, ...values) { //use spread here too
// rest of your code
}

Answer 3

您需要将values作为数组传递，因为参数不能与索引一起使用。

解决方案

function drawChart(values) {
// rest of code
for(let i = 0; i < 12; i++) {
const obj = {
// ..
data: values[i] // access i-th value here
}
datasets.push(obj);
}
// rest of code
}

注意

这是一个不好的做法传递这么多参数给你的函数，这将导致代码质量差很难维护。此外，每个参数所代表的数据类型是相同的，即value，因此它必须是分组