javascript 如何重构函数中的嵌套if条件以降低sonar中的认知复杂度?

v440hwme  于 2023-06-20  发布在  Java
关注(0)|答案(2)|浏览(98)

在我的组件中,我编写了一个条件检查函数来禁用/启用按钮。有多个嵌套的条件检查。在运行时,我在声纳中得到“降低认知复杂性”错误,这是至关重要的。

这是我的函数

const isButtonSubmit = computed(() => {
  let disableButton = false;
  if (formInput.value.radio3 === 'yes') {
    if (formInput.value.input1 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio4 === 'yes') {
    if (formInput.value.input2 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio4 === 'no') {
    if (formInput.value.input6 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio5 === 'no') {
    if (formInput.value.input3 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio6 === 'yes') {
    if (formInput.value.input4 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio6 === 'no') {
    if (formInput.value.input5 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio7 === 'no') {
    if (formInput.value.input7 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio8 === 'no') {
    if (formInput.value.input8 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio9 === 'no') {
    if (formInput.value.input9 === '') {
      disableButton = true;
    }
  }
  return disableButton;
});

由于这些条件检查,我得到了与认知复杂性相关的警告。请让我知道如何解决这个问题?

lb3vh1jj

lb3vh1jj1#

解决这类问题的方法总是一样的,你必须从结构中提取数据,然后找到一种有效应用它的方法。您最终应该得到更易于维护和更紧凑的代码。
在您的情况下,这可能是这样的:

const disableStates = [
  {radio: 'radio3', value: 'yes', input: 'input1'},
  {radio: 'radio4', value: 'yes', input: 'input2'},
  ...
]
const isButtonSubmit = computed(() => {
  const i = formInput.value
  return disableStates.some(({radio, value, input}) => i[radio] === value && i[input] === '')
}
hts6caw3

hts6caw32#

OP可以利用对象文字作为配置,其Map将计算的按钮值定义为 disabled 的所有相关数据。接下来提供的示例代码通过迭代所有涉及的元素键的数组来这样做,其中对于每个键,检索其相关形式的输入值,并从后者检索用于比较值的有效配置。所提供的数据结构从元素-值方面来说是尽可能通用的,因此仍然对单独针对元素值的更改开放……

const submitConfig = {
  radio3: {
    'yes': { comparisonKey: 'input1', comparisonValue: '' },
  },
  radio4: {
    'yes': { comparisonKey: 'input2', comparisonValue: '' },
    'no': { comparisonKey: 'input6', comparisonValue: '' },
  },
  radio5: {
    'no': { comparisonKey: 'input3', comparisonValue: '' },
  },
  radio6: {
    'yes': { comparisonKey: 'input4', comparisonValue: '' },
    'no': { comparisonKey: 'input5', comparisonValue: '' },
  }
  radio7: {
    'no': { comparisonKey: 'input7', comparisonValue: '' },
  },
  radio8: {
    'no': { comparisonKey: 'input8', comparisonValue: '' },
  },
  radio9: {
    'no': { comparisonKey: 'input9', comparisonValue: '' },
  },
};

const isButtonSubmit = computed(() => {

  let disableButton = false;

  // the precedence of element keys matters
  // ['radio3', 'radio4', 'radio5', 'radio6', 'radio7', 'radio8', 'radio9']
  //   .forEach( ... )
  // or ...

  Object
    .keys(submitConfig)
    // `some` should be chosen only in case the first encounter of an
    // disabled button value also means stopping any further iterations.
    // (but there was no indication within the OP'S provided code.)
    .forEach(elementKey => {
      const inputValues = formInput.value;

      const elementValue = inputValues[elementKey];
      const elementConfig = submitConfig[elementKey]?.[elementValue] ?? null;

      if (elementConfig !== null) {

        const { comparisonKey, comparisonValue } = elementConfig;

        disableButton = (inputValues[comparisonKey] === comparisonValue);
      }
    });

  return disableButton;
});

相关问题