javascript - 我如何使用 .map()、.reduce() 和 .filter() 来代替 forEach 来使我的代码简洁以免脆弱？

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;
}