如何在不使用ifelse的情況下重構此條件

嗨，我有以下代碼：

const handleChange = ({ selectedItem }) => {

    if (selectedItem?.value) {
      if (name === FieldNames.SecurityQuestion1) {
        resetField(FieldNames.FirstAnswer, '');
        resetField(FieldNames.ConfirmFirstAnswer, '');
      } else if (name === FieldNames.SecurityQuestion2) {
        resetField(FieldNames.SecondAnswer, '');
        resetField(FieldNames.ConfirmSecondAnswer, '');
      }
    }
  };

在這里，我試圖在不使用 if else 和 switch 條件的情況下對其進行重構。所以我嘗試了三元運算子，但它也不起作用：

selectedItem?.value ? (name === FieldNames.SecurityQuestion1) &&  resetField(FieldNames.FirstAnswer, '');

但這不起作用，因為它是錯誤的語法。誰能幫我這個 ？

謝謝您的幫助。

uj5u.com熱心網友回復：

如果你只是想避免嵌套ifs，為什么不這樣放呢？

const handleChange = ({ selectedItem }) => {

    if (!selectedItem?.value) {
        return;
    }

    if (name === FieldNames.SecurityQuestion1) {
        resetField(FieldNames.FirstAnswer, '');
        resetField(FieldNames.ConfirmFirstAnswer, '');
    } else if (name === FieldNames.SecurityQuestion2) {
        resetField(FieldNames.SecondAnswer, '');
        resetField(FieldNames.ConfirmSecondAnswer, '');
    }
};

或這個：

const handleChange = ({ selectedItem }) => {    

    if (selectedItem?.value && name === FieldNames.SecurityQuestion1) {
        resetField(FieldNames.FirstAnswer, '');
        resetField(FieldNames.ConfirmFirstAnswer, '');
    } else if (selectedItem?.value && name === FieldNames.SecurityQuestion2) {
        resetField(FieldNames.SecondAnswer, '');
        resetField(FieldNames.ConfirmSecondAnswer, '');
    }
};

uj5u.com熱心網友回復：

我不確定我是否可以建議以這種方式重構你的代碼，但是......既然你問了，這里有一種方法可以在沒有 if/else/switch 的情況下做到這一點。

const condition0 = selectedItem?.value;
const condition1 = name === FieldNames.SecurityQuestion1;
const condition2 = name === FieldNames.SecurityQuestion2;

const doThen = () => {
  resetField(FieldNames.FirstAnswer, '');
  resetField(FieldNames.ConfirmFirstAnswer, '');
};

const doElse = () => {
  resetField(FieldNames.SecondAnswer, '');
  resetField(FieldNames.ConfirmSecondAnswer, '');
};

condition0 && (
  !(condition1 && (doThen() || true))
  && condition2 && doElse()
);

uj5u.com熱心網友回復：

我不建議重構，因為它是完全可讀的代碼，而且它似乎作業正常，但我認為這會解決你的問題：

selectedItem?.value ? ((name === FieldNames.SecurityQuestion1) &&  resetField(FieldNames.FirstAnswer, '')):null

uj5u.com熱心網友回復：

在我看來，您正在重構錯誤的東西。顯然，您正在查看您的代碼，發現代碼似乎重復但不完全重復的兩個地方有點混亂：

  if (name === FieldNames.SecurityQuestion1) {
    resetField(FieldNames.FirstAnswer, '');
    resetField(FieldNames.ConfirmFirstAnswer, '');
  } else if (name === FieldNames.SecurityQuestion2) {
    resetField(FieldNames.SecondAnswer, '');
    resetField(FieldNames.ConfirmSecondAnswer, '');
  }

意識到三元運算子只是if運算式背景關系而不是陳述句。轉換它會導致完全相同的混亂，但語法可讀性較差。

如果您真的想知道您擁有的代碼的正確三元運算式，它看起來完全一樣：

selectedItem?.value ?
  name === FieldNames.SecurityQuestion1 ?
    resetField(FieldNames.FirstAnswer, '')
    :
    resetField(FieldNames.ConfirmFirstAnswer, '')
  :
  name === FieldNames.SecurityQuestion2 ?
    resetField(FieldNames.SecondAnswer, '')
    :
    resetField(FieldNames.ConfirmSecondAnswer, '');

以上是濫用三元運算子并得到相同結果的正確方法。但是，請注意它仍然是相同的代碼和相同的混亂。如果你把它放在:錯誤的地方，那將是一個錯誤并產生錯誤的結果！！該陳述句{}使用的大括號if使理解和除錯代碼變得更加容易，因為它闡明了條件何時開始以及何時結束。

重構這一點的方法是意識到這一點Question1并Question2擁有共同的資料。所以以這種方式構建它：

const FieldNames = {
    Security: {
        First: {
            Question: '...',
            Answer: '...',
            Confirm: '...'
        },
        Second: {
            Question: '...',
            Answer: '...',
            Confirm: '...'
        }
    }
}

現在你可以像這樣重構它：

const handleChange = ({ selectedItem }) => {
    if (selectedItem?.value) {
      for (let f of ['First', 'Second']) {
        if (name === FieldNames.Security[f].Question) {
            resetField(FieldNames.Security[f].Answer, '');
            resetField(FieldNames.Security[f].Confirm, '');
        }
      }
    }
};

這減少了重復代碼并使您的代碼干燥（因此更緊湊）而不會降低可讀性。

uj5u.com熱心網友回復：

你可以試試這個：

const handleChange = ({ selectedItem }) => {
  const answerIndex = selectedItem?.value ? (name === FieldNames.SecurityQuestion1 ? 'FirstAnswer' : name === FieldNames.SecurityQuestion2 ? 'SecondAnswer' : null) : null;
  if (answerIndex) {
    resetField(FieldNames[answerIndex], '');
    resetField(FieldNames[`Confirm${answerIndex}`], '');
  }
}

標籤：javascript 反应 条件语句

上一篇：asp.net core 6.0網站在其他 本地服務器上都正常，部署到windowsserver2019 iis上 ，出現大于50k的圖片無法上傳

下一篇：角度材料選項卡組未匯入