而不是forEach我如何使用.map（）,. reduce（）和.filter（）来使我的代码简洁，以免变脆？

Question

我正在获取一个对象数组（let raw），通过displayName获取值并通过displayName将其插入（const defaultCirclePackStructure）这是用于d3圆形打包。这是Codepen

let convertMetricDataToD3 = (arrayMetricData) => {
  var circlePackData = defaultCirclePackStructure
  let operationSumTime = 0

  arrayMetricData.forEach(element => {
    insertMetricData(element, circlePackData)
    if(element.displayName === "Equipment Uptime" || element.displayName === "Equipment  Downtime"){
      operationSumTime+=element.value
    }
  });

  circlePackData.children[0].children[1].value = 
Math.round(operationSumTime) + "%"
  return circlePackData;
}

它有效，但它如此脆弱和低效，我如何通过使用map，reduce，filter或其他任何东西来改进它。

Answer 1

脱掉你的笔，我能够创造出更加可维护的以下内容。

const convertMetricDataToD3 = (arrayMetricData) => {

  const circlePackData = defaultCirclePackStructure;
  arrayMetricData.forEach(element => insertMetricData(element, circlePackData));

  const trackedOperations = [
    'Equipment Uptime',
    'Equipment Downtime',
  ];

  const operationSumTime = arrayMetricData
    .filter(({displayName}) => trackedOperations.includes(displayName))
    .map(({value})=> value)
    .reduce((a, b) => a + b);

  circlePackData.children[0].children[1].value = Math.round(operationSumTime) + "%";

  return circlePackData;
}