Тернарный оператор - это, по сути, сокращение от оператора if в Javascript. Это делает наш код более аккуратным и абстрагирует несколько строк кода.
Что такое тернарный оператор и как его использовать?
Вот определение документов Web MDN:
«Условный (тернарный) оператор - единственный оператор JavaScript, который принимает три операнда: условие, за которым следует вопросительный знак (
?
), затем выражение для выполнения, если условие истинно, за которым следует двоеточие (:
), и, наконец, выражение для выполнения, если условие ложное. Этот оператор часто используется как сокращение для оператораif
».
Прочтите это еще раз пару раз, и если вы все еще не понимаете, не беспокойтесь. В этой статье я постараюсь разобрать тернарный оператор. Я столкнулся с тернарным оператором, когда впервые учился программировать. В то время, когда я впервые увидел его, я понятия не имел, как он работает, но мне понравилось, что он сократил решение проблемы Ruby, над которой я работал в то время. Чтобы понять это для себя, я начал заменять старые проблемы, которые я решил, чтобы попытаться лучше понять их. Только когда я поговорил с тренером, я действительно начал лучше понимать, что происходит под капотом.
Тернарный оператор рассматривает три вещи. Во-первых, это условие или, другими словами: начало оператора if. После условия стоит вопросительный знак (?). В качестве примера предположим, что мы хотим создать функцию или программу, которая фильтрует красные и зеленые помидоры, и позвольте вызвать функцию sortTomatoes
. У нас будет три помидора: tomatoA
, tomatoB
и tomatoC
. А затем предположим, что для сортировки красных и зеленых помидоров мы хотим, чтобы наша функция вела себя следующим образом: если помидор красный, значит, он спел, и мы пропускаем его через фильтр, а если он не красный, то он незрелый и поэтому не проходит через фильтр.
let tomatoA = {color : "red"} let tomatoB = {color : "green"} let tomatoC = {color : "red"} const sortTomatoes = (tomato) => { if (tomato.color === "red"){ // if it's true return "the tomato is ripe!" } // if it's false return "Green Alert!" }
В приведенном выше коде мы видим наш пример обработки помидоров с помощью оператора if. Теперь давайте сделаем рефакторинг этого кода троичным.
const sortTomatoes(tomato){ (tomato.color === red) ? "The tomato is ripe!" : "Green Alert!" } //Results: //input: tomatoA => "The tomato is ripe!" //input: tomatoB => "Green Alert" //input: tomatoC => "The tomato is ripe!"
В приведенном выше коде у нас есть три операнда в тернарном выражении:
1) Условие (tomato.color === red)
2) Возвращаемое значение: “The tomato is ripe!”
и
3) Возвращаемое значение: “Green Alert!”
.
Так что же здесь происходит? В приведенном выше коде есть условие, которое необходимо выполнить. Вопрос (оператор ?)
задает вопрос: «истинно или ложно условие?»; В данном случае «красный помидор?». Далее у нас есть два значения, разделенных двоеточием (:
). В случае нашего примера выше, два значения являются строками. Значение слева от двоеточия возвращается, если условие истинно, а значение справа возвращается, если условие ложно. подключенные к функции sortTomato, мы получаем сообщение «Помидор спел!», возвращаемый нам, а так как помидорB является «зеленым», мы получаем «Зеленое предупреждение!» в качестве результата, когда у нас в качестве входных данных используется помидор B. Если вам интересно, «Что, если помидор любого другого цвета?» В этом случае выходом нашей функции будет «Зеленое предупреждение!». Пока помидор имеет любой цвет, кроме красного, в нашем условии он будет возвращаться как false, таким образом возвращая значение справа от двоеточия (:
).
Надеюсь, это было полезно. Есть некоторая мысль о троичных - что, хотя они делают наш код более лаконичным, их трудно читать. Я намерен сделать так, чтобы через практику и многократное знакомство с троицами постепенно появлялись все чаще и чаще. Я закончу здесь.
Ресурсы, указанные ниже:
Условный (тернарный) оператор