分享一个代码片段的重构思路

69 阅读2分钟
getSearchCondition (arr, isValue) {
      let curVal;
      if (arr) {
        let tmp = arr.map((item) => {
          return item.patientType
        });
        // console.log(177, tmp, this.curPtType);
        if (tmp.length) {
          if (tmp.indexOf(this.curPtType) > -1) {
            arr.forEach((item) => {
                if (item.patientType === this.curPtType) {
                  curVal = isValue ? item.value : item.queryCondition;
                }
              });
          } else {
            curVal = isValue ? {} : [];
          }
        } else {
          curVal = isValue ? {} : [];
        }
      } else {
        curVal = isValue ? {} : [];
      }
      return curVal;
    },

潜在问题

  1. 重复性: arr.map()和arr.forEach()的使用在这里是冗余的。你首先使用map()来创建一个包含patientType值的新数组,然后又使用forEach()来遍历arr以找到curPtType。可以通过直接使用forEach()来同时完成这两个任务,从而提高效率。
  2. 性能问题: 当arr很大时,indexOf方法在每次调用时都会遍历整个tmp数组,这可能导致性能问题。如果tmp数组很大,这种方法效率不高。
  3. 可读性: 代码的嵌套层级较深,这会影响代码的可读性和可维护性。
  4. 异常处理: 代码没有对arr是否为一个有效的数组进行检查。虽然有一个if (arr)的检查,但没有进一步确认arr确实是一个数组,而不是其他类型(如对象或字符串)。

优化结果

function getValueFromArr(arr, isValue) {
  if (!Array.isArray(arr)) {
    throw new TypeError('Expected an array');
  }

  let curVal = isValue ? {} : [];

  // 不用find,节省空间
  arr.forEach((item) => {
    if (item.patientType === this.curPtType) {
      curVal = isValue ? item.value : item.queryCondition;
      // 一旦找到匹配项,即可终止循环,提升效率
      return false;
    }
  });

  return curVal;
}

优化解释

  1. 异常处理: 通过Array.isArray(arr)确保了传入的arr确实是一个数组,如果不是,则抛出一个TypeError异常。
  2. 简化逻辑与提高性能:
  • 移除了不必要的map和indexOf调用。通过直接在forEach循环中检查item.patientType,一旦找到匹配项,就设置curVal并终止循环。这样不仅简化了逻辑,还避免了在大数组上进行多余的遍历,提升了性能。
  1. 增强可读性和可维护性:
  • 通过将逻辑封装进getValueFromArr函数,并且减少嵌套,提升了代码的可读性和可维护性。
  1. 代码优化:
  • 通过判断语句return false;在找到第一个匹配项后终止循环,这不仅提高了效率,也让代码逻辑更加清晰。