从重复的代码中创建Javascript函数

我在做一个项目，处理大量数据。在我的Javascript中，我通过Ajax将这些数据作为对象数组接收

该数据的一个例子是：

{ageatdeath: 0, death_count: 4, death_percent: 66.66666666666667}

每个年龄段（从0岁到100岁）我都有一个对象。我想做的是将这些数据按10年（例如0-10、11-20）的范围分组，然后用plotly创建一个饼图

我能够做到这一点，但我使用了大量几乎重复的代码来实现这一点。我想知道是否有更好的方法来实现这一点

这是我现在使用的函数的代码

function drawPieChartAgeAtDeath(data) {
var range0_10 = null;
var range11_20 = null;
var range21_30 = null;
var range31_40 = null;
var range41_50 = null;
var range51_60 = null;
var range61_70 = null;
var range71_80 = null;
var range81_90 = null;
var range90plus = null;
for (var i = 0, len = data.length; i < len; i++) {
    if (data[i].ageatdeath >= 0 && data[i].ageatdeath <= 10) {
        range0_10 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 11 && data[i].ageatdeath <= 20) {
        range11_20 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 21 && data[i].ageatdeath <= 30) {
        range21_30 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 31 && data[i].ageatdeath <= 40) {
        range31_40 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 41 && data[i].ageatdeath <= 50) {
        range41_50 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 51 && data[i].ageatdeath <= 60) {
        range51_60 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 61 && data[i].ageatdeath <= 70) {
        range61_70 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 71 && data[i].ageatdeath <= 80) {
        range71_80 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 81 && data[i].ageatdeath <= 90) {
        range81_90 += data[i].death_percent;
    } else if (data[i].ageatdeath >= 91) {
        range90plus += data[i].death_percent;
    }
}

var pie_data = [{
    values: [range0_10,
        range11_20,
        range21_30,
        range31_40,
        range41_50,
        range51_60,
        range61_70,
        range71_80,
        range81_90,
        range90plus],
    labels: ['0-10 year',
        '11-20 year',
        '21-30 year',
        '31-40 year',
        '41-50 year',
        '51-60 year',
        '61-70 year',
        '71-80 year',
        '81-90 year',
        '> 90 year'],
    type: 'pie'
}];

var layout = {
    height: 400,
    width: 500
};

Plotly.newPlot('pieChartDiv', pie_data, layout);

函数drawPieChartAgeAtDeath（数据）{
var range0_10=零；
var range11_20=零；
var range21_30=零；
var range31_40=零；
var range41_50=零；
var range51_60=零；
var range61_70=零；
var range71_80=零；
var range81_90=零；
var range90plus=null；
对于（变量i=0，len=data.length；i=0&&data[i]。年龄死亡=11&&data[i]。年龄死亡=21&&data[i]。年龄死亡=31&&data[i]。年龄死亡=41&&data[i]。年龄死亡=51&&data[i]。年龄死亡=61&&data[i]。年龄死亡=71&&data[i]。年龄死亡=81&&data[i]。年龄死亡=91）{
range90plus+=数据[i]。死亡百分比；
}
}
变量pie_数据=[{
值：[范围0_10，
范围11(20)，
范围21_30，
范围31(40)，
范围41_50，
范围51(60),，
范围61_70，
范围71(80),，
范围81(90),，
范围90plus]，
标签：[“0-10年”，
“11-20年”，
“21-30年”，
“31-40岁”，
“41-50年”，
“51-60岁”，
“61-70岁”，
‘71-80年’，
“81-90年”，
“>90年”]，
键入：“馅饼”
}];
变量布局={
身高：400，
宽度：500
};
Plotly.newPlot（'pieChartDiv'，pie_数据，布局）；

---

非常感谢您的帮助！

您可以更优雅地生成范围，如下所示：

const ranges = Array.from({ length: 10 }, () => 0);
data.forEach(item => {
  const initRangeIndex = Math.floor((item.ageatdeath - 1) / 10);
  const rangeIndex = initRangeIndex === -1 ? 0 :
                       initRangeIndex > 9 ? 9
                       : initRangeIndex;
  ranges[rangeIndex] += item.death_percent;
});
const pieData = [{
  values: ranges,
  // ...

---

将年龄除以10，然后将其分组到您想要的桶中。当分组从0-10到11-20（而不是0-9、10-19）时，您需要用1进行偏移。如果年龄超过100，下面将自动生成大于10的新桶。如果没有年龄范围的数据，桶可能为空

function drawPieChartAgeAtDeath(data) {

    var values = [];

    for (var i = 0, len = data.length; i < len; i++) {
        let valueBucket = Math.floor(Math.max(data[i].ageatdeath-1,0)/10);

        values[valueBucket] = values[valueBucket] || 0;
        values[valueBucket] += data[i].death_percent;
    }

    var pie_data = [{
        values: values,
        labels: ['0-10 year',
            '11-20 year',
            '21-30 year',
            '31-40 year',
            '41-50 year',
            '51-60 year',
            '61-70 year',
            '71-80 year',
            '81-90 year',
            '> 90 year'],
        type: 'pie'
    }];

    var layout = {
        height: 400,
        width: 500
    };

    Plotly.newPlot('pieChartDiv', pie_data, layout);
}   

函数drawPieChartAgeAtDeath（数据）{
var值=[]；
对于（变量i=0，len=data.length；i90年”]，
键入：“馅饼”
}];
变量布局={
身高：400，
宽度：500
};
Plotly.newPlot（'pieChartDiv'，pie_数据，布局）；
}   

一开始甚至不起作用，对

为null的变量使用
+=
将不会产生任何可以使用的结果。您可以使用
reduce
（数组函数）为了获取graphWell的对象，这很奇怪，因为我可以创建一个piechart来检索这样的数据。我可以请您解释一下，为什么对一个null的变量+=不会给出任何结果吗？实际上它是有效的。所有内容都包含在内。但这并不意味着这是正确的。在任何严格的类型语言中，这都会因为null而失败（或nil）通常是表示空引用的值。