JavaScript函数中如何通过传入参数动态生成dataObj对象无需逐个定义

解决方案 #

核心思路是将零散的valuesX系列入参转换为数组结构，通过下标索引即可实现动态取值，无需手动逐个定义变量引用。

推荐方案：使用ES6剩余参数 #

剩余参数可以自动将传入的多个参数组装为数组，直接按下标读取即可解决动态引用问题，修改后的代码如下：

// 用...valuesArr接收所有values类入参，自动组装为数组
function getDatasetArray(...valuesArr) {
    const datasets = [];
    // 提前预设对应顺序的颜色、标签，和传入的values参数顺序一一对应
    const colors = ['red', 'purple', 'yellow', 'blue', 'green', 'orange', 'pink', 'gray', 'brown', 'cyan', 'magenta', 'lime'];
    const labels = ['temp0', 'temp1', 'temp2', 'temp3', 'temp4', 'temp5', 'temp6', 'temp7', 'temp8', 'temp9', 'temp10', 'temp11'];

    // 循环次数匹配参数数量，自动适配后续参数增减
    for(let i = 0; i < valuesArr.length; i++) {
        const obj = {
            fill: false,
            label: labels[i],
            backgroundColor: colors[i],
            borderColor: colors[i],
            // 直接取数组对应下标的参数值
            data: valuesArr[i]
        }
        datasets.push(obj);
    }

    return datasets;
}

和原有drawChart函数整合的写法：

function drawChart(labels, ...valuesArr) {
    const dataObj = {
        labels: labels,
        datasets: getDatasetArray(...valuesArr)
    }
    // 原有后续逻辑
}

兼容方案：使用arguments对象（不推荐） #

如果需要保留原有固定12个参数的定义，也可以通过函数内置的arguments类数组对象读取入参，仅适合旧环境兼容场景：

function getDatasetArray(values0, values1, values2, values3, values4, values5, values6, values7, values8, values9, values10, values11) {
    const datasets = [];
    const colors = ['red', 'purple', 'yellow', 'blue', 'green', 'orange', 'pink', 'gray', 'brown', 'cyan', 'magenta', 'lime'];
    const labels = ['temp0', 'temp1', 'temp2', 'temp3', 'temp4', 'temp5', 'temp6', 'temp7', 'temp8', 'temp9', 'temp10', 'temp11'];

    for(let i = 0; i < 12; i++) {
        const obj = {
            fill: false,
            label: labels[i],
            backgroundColor: colors[i],
            borderColor: colors[i],
            // 从arguments类数组中取对应下标的入参
            data: arguments[i]
        }
        datasets.push(obj);
    }

    return datasets;
}

内容的提问来源于stack exchange，提问作者rustyBucketBay