Как лучше использовать условное суждение в JavaScript

В этой статье за ​​короткое время рассказывается, как писать более простые условные суждения в JavaScript, что поможет вам писать более лаконичный и читабельный код.

Предположим, у нас есть функция, которая преобразует значения цвета в шестнадцатеричное кодирование.

function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === 'slate') {
      return '#64748b'
    } else if (color === 'gray') {
      return '#6b7280'
    } else if (color === 'red') {
      return '#ef4444'
    } else if (color === 'orange') {
      return '#f97316'
    } else if (color === 'yellow') {
      return '#eab308'
    } else if (color === 'green') {
      return '#22c55e'
    } else {
      return '#ffffff'
    }
  } else {
    return '#ffffff'
  }
}

Цель этой функции очень проста: передать строку цвета, а затем вернуть соответствующее шестнадцатеричное число. Если входящая строка не является строкой или ничего не передается, то возвращается белое шестнадцатеричное число.

Далее начинаем оптимизировать этот код.

Избегайте использования строк непосредственно в качестве условий

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

convertToHex("salte")

Чтобы избежать этой ошибки, мы можем использовать константы.

const Colors = {
 SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === Colors.SLATE) {
      return '#64748b'
    } else if (color === Color.GRAY) {
      return '#6b7280'
    }
    // ...
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

Если вы используете typescript, вы можете использовать enum напрямую.

Использовать объект

На самом деле, из вышеприведенного кода нетрудно понять, что мы можем напрямую хранить шестнадцатеричное значение в значении объекта.

const Colors = {
 SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (color in Colors) {
    return Colors[color]
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

Таким образом, код будет более кратким и читабельным.

Не соответствует ожиданиям, возвращайтесь раньше

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

const Colors = {
 SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (!color in Colors) {
    return '#ffffff'
  }
  return Colors[color]
}
convertToHex(Colors.SLATE)

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

Использовать карту с объектом

Использование Map является более специализированным, поскольку оно может хранить ключи любого типа и наследуется от Map.prototype с более удобными методами и свойствами.

И Object более удобен для доступа к свойствам, мы можем продолжать использовать Object для достижения роли перечисления.

const ColorsEnum = {
 SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
const Colors = new Map()
Colors.set(ColorsEnum.SLATE, '#64748b')
Colors.set(ColorsEnum.GRAY, '#6b7280')
// ...
Colors.set('DEFAULT', '#ffffff')
function convertToHex(color) {
  if (!Colors.has(color)) {
    return Colors.get('DEFAULT')
  }
  return Colors.get(color)
}
convertToHex(Colors.SLATE)

Карта также может хранить функции

Предположим, мы храним много цветов, до тысячи, и нам также необходимо поддерживать back-end настройку, а результат можно получить через определенный рабочий процесс.

Затем мы можем использовать карту для хранения функций.

return Colors.get(color)()

Старайтесь избегать троичных выражений и переключайтесь

Хотя тернарное выражение короткое, его удобочитаемость сильно снижается. Если это многоуровневое состояние, его будет очень трудно прочитать.

Нет очевидного преимущества switch и if, но иногда легко вернуться и заставить код выполняться не так, как ожидалось.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.