Автор оригинала: FreeCodeCamp Community Member.
Донавоном Уэстом
Эта статья – не О нас в полиции 1980 года Хит песни из альбома Зенятта Мондатта (Хотя это было бы потрясающе!) Нет С Это о предложении T39 под названием делать выражения . Если одобрено TC39, «Разращивания выражений» будут частью JavaScript и могут помочь выбрать свой код из Тернарного Ада.
Выражения позволяют вам встроить заявление внутри выражения. Полученное значение возвращается из выражения.
В настоящее время в том, что называется «этап 1» процесса TC39, что означает, что выражения имеют долгий путь, прежде чем они увидят свет дня.
Axel Rauschmayer объясняет TC39 процесс в его книге под названием Исследуя ES2016 и ES2017 (бесплатно онлайн или купить электронную книгу).
Что такое выражение делается?
Вот простой пример простого выражения дела.
const status = do { if (isLoading) { 'Loading'; } else if (isError) { 'Error' } else { 'Running' };};Требуется все, что «возвращено» как стоимость заявления и присваивает его Статус Отказ Не очень полезно по сравнению с базовым Если Заявление, ИМО.
Где он действительно сияет, при использовании в JSX в приложении React.
Использовать в JSX.
Выражения особенно полезны в JSX. Давайте посмотрим на то, как вы можете использовать их для общего шаблона реагирования в контексте JSX: определение того, что представлять на основе Загрузка и Ошибка . реквизит.
const View = ({ loading, error, ...otherProps }) => ( <;div> {do { if (loading) { } else if (error) { } else { }; }} Ух ты! Теперь это невероятно мощно.
То же самое можно было выполнить с логическим и оператором, но вы заканчиваете отрицание всех других значений. Это может стать довольно грязным и довольно трудно следовать. Это также не так эффективно с точки зрения исполнения, так как это примерно эквивалентно выполнению трех Если заявления.
const View = ({ loading, error, ...otherProps }) => ( <;div> {loading && !error && } {!loading && error && } {!loading && !error && } Что такое тройной ад?
Для маленького фона, а тройное Это оператор JavaScript, который принимает три операнда: условие, а затем два выражения. Это часто используется для замены Если утверждение.
Вот пример тройного оператора в действии.
const text = isLoading ? 'Loading' : 'Loaded';
Переменная текст Установлено на «загрузку» или «загруженное» в зависимости от загружает Бинарный флаг. Это примерно эквивалентно следующим Если утверждение.
let text;
if (isLoading) { text = 'Loading';} else { text = 'Loaded';}Однако обратите внимание, что нам нужно использовать Пусть Заявление против A Const Отказ Вы можете увидеть, что тройник – отличный способ уменьшить беспорядок от вашего кода, плюс это позволяет избежать использования ненужного Пусть Заявление вместо конститут .
Я вижу, чтобы заявления были красным флагом, когда я делаю код отзывы. То же самое с Если заявления.
Но что, если у нас есть нечевное значение? Вы можете объединить троины и в конечном итоге с чем-то подобным.
const text = stopSignColor === 'red' ? 'Stop' : stopSignColor === 'yellow' ? 'Caution' : stopSignColor === 'green' ? 'Go' : 'Error';
Это то, к чему я могу ссылаться, когда я говорю тройной ад.
Это своего рода Если/else, если/else, если/else Заявление написано с использованием тройного. Многие люди находят эту форму трудно следовать. На самом деле, вы даже можете предотвратить это поведение с помощью Eslint нет вложенного тройного параметр.
Вот тот же код, написанный с помощью Переключатель Заявление, встроенное внутри выражения дела.
const text = do { switch (stopSignColor) { case 'red': 'Stop' case 'yellow': 'Caution' case 'green': 'Go' case default: 'Error' }};Будущее – сегодня
Несмотря на то, что выражения не являются официально частью языка (все же?), Вы все еще можете использовать их сейчас В вашем проекте. Это потому, что большинство из нас не совсем кодируют в JavaScript – мы код в Вавиле. И, к счастью, есть Babel трансформируется Это принесет нам завтрашний синтаксис языка завтрашнего дня.
Но будьте осторожны при выборе этого варианта. Нет никакой гарантии, что предложение будет проходить как есть. Спецификация может значительно измениться, оставляя свой код нуждающимся в некоторых реблокорингах. На самом деле, это совершенно правдоподобно, что спецификация может быть сброшена все вместе.
Заключение
У выражения есть свое место, но вряд ли есть серебряная пуля. С помощью преобразования Babel они могут быть использованы сегодня. Одним из самых больших преимуществ выражений DO, когда используется из в пределах JSX.
И это «все, что я хочу сказать вам».
Я также пишу для American Express Engineering Blog. Проверьте мои другие произведения и произведения моих талантливых сотрудников на Americanexpress.io Отказ Вы также можете Следуй за мной в Twitter Отказ
Оригинал: “https://www.freecodecamp.org/news/a-first-look-do-expressions-in-javascript-de-do-do-do-de-da-da-da-fc87f5fe238a/”