Заменить несколько операторов

Учитывая следующий код:

if (CONDITION1) {
  if (CONDITION2) {
    if (CONDITION3) {
      if (CONDITION4) {
        if (CONDITION5) {

        } else {
          return ('STOP IN CONDITION5')
        }
      } else {
        return ('STOP IN CONDITION4')
      }
    } else {
      return ('STOP IN CONDITION3')
    }
  } else {
    return ('STOP IN CONDITION2')
  }
} else {
  return ('STOP IN CONDITION1')
}

Мне нужно заменить эти множественные операторы if другим кодом, используя передовой опыт, и для более чистого чтения другими людьми в будущем.

Остальные, скорее всего, не нужны. Попробуйте if (!condition) { return ... }?

evolutionxbox 02.02.2023 02:34

Если условное выражение if ничего не делает, вы можете даже убрать фигурные скобки (а также оператор группировки): if (!conditionX) return "stop in conditionX";.

Megaptera novaeangliae 02.02.2023 02:44

Пожалуйста, не опускайте фигурные скобки, как было предложено выше. Выглядит ужасно, проще допустить ошибку, и большинство линтеров требуют их по умолчанию.

Cjmarkham 02.02.2023 04:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
86
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы можете сгладить это, проверив условие not:

function doStuff() {
  if (!CONDITION1) {
    return ('STOP IN CONDITION1')
  }

  if (!CONDITION2) {
    return ('STOP IN CONDITION2')
  }

  if (!CONDITION3) {
    return ('STOP IN CONDITION3')
  }

  if (!CONDITION4) {
    return ('STOP IN CONDITION4')
  }

  if (!CONDITION5) {
    return ('STOP IN CONDITION5')
  }
}

Примечание: между if вы можете добавить код условия true.

На этот вопрос уже был дан ответ, и я бы не рекомендовал эту версию (вероятно, линтеры жалуются, плоские операторы if в порядке), но я добавляю ее туда, чтобы показать другую возможность.

Потенциально вы можете использовать оператор switch и добавлять свои условия в каждый случай:

const CONDITION1 = 1 > 2
const CONDITION2 = 2 < 1

const run = () => {
  switch(true) { // always evaluate this switch
    case !CONDITION1: 
      return 'STOP IN CONDITION1'
    case !CONDITION2:
      return 'STOP IN CONDITION1'
    // etc...
  }
}

console.info(run())

Использование Array.prototype.findIndex()

  • Сохраните ваши условия в массиве
  • Используйте Array.prototype.findIndex(). Просто верните сам аргумент (x) => x, он будет обработан как boolean и если true метод вернет индекс. Сохраните возвращенное целое число в переменную errIndex.
  • Если errIndex больше, чем -1, это означает, что у вас есть «ошибка» в массиве conditions по этому индексу.

const conditions = [false, false, true, false, false];

const errIndex = conditions.findIndex(x => x);

if (errIndex > -1) {
  console.info(`STOP IN CONDITION ${errIndex + 1}`);
} else {
  console.info("All passed");
}

Прелесть использования .findIndex() заключается в том, что он может сократить поиск и немедленно вернуть индекс.


Не знаю, почему, но учитывая, что вы хотите return строку, и поскольку операторы return используются внутри функции, и поскольку всегда предпочтительнее, чтобы функция возвращала один и тот же тип,
вы можете создать функцию, которая принимает массив условий и строку успеха в качестве второго аргумента:

const status = (conditions, successMsg) => {
  const idx = conditions.findIndex(x=>x);
  return idx < 0 ? successMsg : `STOP IN CONDITION ${idx+1}`;
};

console.info(status([false, false, true, false, false], "OK"));  // STOP IN CONDITION 3
console.info(status([false, false, false, false, false], "OK")); // OK

или вы можете создать что-то подобное на основе приведенной выше идеи, например функцию pass, в которой вы не жестко кодируете строки ошибок, а вместо этого предоставляете функцию обратного вызова с аргументом, являющимся объектом с индексным свойством или null

const pass = (conditions, fn) => {
  const index = conditions.findIndex(x => x);
  fn(index < 0 ? null : {index});
};


pass([false, false, true, false, false], (err) => {
  if (err) {
    console.info(`STOP IN CONDITION ${err.index + 1}`)
    return; // Exit function here
  }
  // All OK...
  console.info("All OK! Do some work here");
});

Другие вопросы по теме