Html оператор if or условиях

Логические операторы

В JavaScript есть четыре логических оператора: || (ИЛИ), && (И) и ! (НЕ), ?? (Оператор нулевого слияния). Здесь мы рассмотрим первые три, оператор ?? будет в следующей статье.

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

Давайте рассмотрим их подробнее.

|| (ИЛИ)

Оператор «ИЛИ» выглядит как двойной символ вертикальной черты:

Традиционно в программировании ИЛИ предназначено только для манипулирования булевыми значениями: в случае, если какой-либо из аргументов true , он вернёт true , в противоположной ситуации возвращается false .

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

Существует всего четыре возможные логические комбинации:

alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // false

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

Если значение не логического типа, то оно к нему приводится в целях вычислений.

Например, число 1 будет воспринято как true , а 0 – как false :

Обычно оператор || используется в if для проверки истинности любого из заданных условий.

Можно передать и больше условий:

let hour = 12; let isWeekend = true; if (hour < 10 || hour >18 || isWeekend) < alert( 'Офис закрыт.' ); // это выходной >

ИЛИ «||» находит первое истинное значение

Описанная выше логика соответствует традиционной. Теперь давайте поработаем с «дополнительными» возможностями JavaScript.

Расширенный алгоритм работает следующим образом.

При выполнении ИЛИ || с несколькими значениями:

result = value1 || value2 || value3;

Оператор || выполняет следующие действия:

• Вычисляет операнды слева направо.
• Каждый операнд конвертирует в логическое значение. Если результат true , останавливается и возвращает исходное значение этого операнда.
• Если все операнды являются ложными ( false ), возвращает последний из них.

Значение возвращается в исходном виде, без преобразования.

Другими словами, цепочка ИЛИ || возвращает первое истинное значение или последнее, если такое значение не найдено.

alert( 1 || 0 ); // 1 alert( true || 'no matter what' ); // true alert( null || 1 ); // 1 (первое истинное значение) alert( null || 0 || 1 ); // 1 (первое истинное значение) alert( undefined || null || 0 ); // 0 (поскольку все ложно, возвращается последнее значение)

Это делает возможным более интересное применение оператора по сравнению с «чистым, традиционным, только булевым ИЛИ».

Получение первого истинного значения из списка переменных или выражений. Представим, что у нас имеется ряд переменных, которые могут содержать данные или быть null/undefined . Как мы можем найти первую переменную с данными? С помощью || :

let currentUser = null; let defaultUser = "John"; let name = currentUser || defaultUser || "unnamed"; alert( name ); // выбирается "John" – первое истинное значение

let x; true || (x = 1); alert(x); // undefined, потому что (x = 1) не вычисляется

Если бы первый аргумент имел значение false , то || приступил бы к вычислению второго и выполнил операцию присваивания:

let x; false || (x = 1); alert(x); // 1

&& (И)

Оператор И пишется как два амперсанда && :

В традиционном программировании И возвращает true , если оба аргумента истинны, а иначе – false :

alert( true && true ); // true alert( false && true ); // false alert( true && false ); // false alert( false && false ); // false

Источник

Логические операторы

Логические операторы помогают составлять сложные логические условия, которые часто нужны при ветвлении с помощью if . . . else .

При сравнении объектов, массивов и функций, важно учесть их особенность, так как результат сравнения таких типов данных может быть непредсказуемым. Подружиться с особенностями можно в статье «Хранение по ссылке и по значению».

Как пишется

Скопировать ссылку «Как пишется» Скопировано

И, &&

Скопировать ссылку «И, &&» Скопировано

Интернет-магазин показывает цены со скидкой только зарегистрированному пользователю, сделавшему больше одной покупки.

В описании два условия, которые должны одновременно быть верными:

Если одно из условий, или оба сразу неверны, то цену показывать не нужно.

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

 if (isRegistered === true && orders > 1)  // показываем цены> if (isRegistered === true && orders > 1)  // показываем цены >    Скопировать Скопировано Не удалось скопировать   

Обычно для того, чтобы понять, как работают логические операторы, рисуют таблицу истинности. В ячейках — итоговое значение операции при соответствующих операндах:

ИЛИ, ||

Скопировать ссылку «ИЛИ, ||» Скопировано

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

Чтобы написать такое составное условие, воспользуйся оператором логического ИЛИ, обозначается как две вертикальные черты || . Логическое или вернёт true , если хотя бы одно из условий true .

Генерируйте гостей в демо и смотрите, как отрабатывает условие, которое записано так:

 if (hasTicket || isInvited) if (hasTicket || isInvited)  . >    Скопировать Скопировано Не удалось скопировать   

НЕ !

Скопировать ссылку «НЕ !» Скопировано

Оператор «логическое НЕ» превращает true в false и наоборот.

Он записывается в виде восклицательного знака ! перед операндом: !операнд . Чаще всего это переменная. Например, !my Variable . Операторы, которые производят операцию над одним операндом называются унарными.

Например, мы можем предлагать купить билет посетителю без билета:

 if (!hasTicket)  // купи билет, дорогой!> if (!hasTicket)  // купи билет, дорогой! >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Сергей Минаков советует

Скопировать ссылку «Сергей Минаков советует» Скопировано

🛠 Оператор «ИЛИ» ( || ) можно использовать для установки значения по умолчанию, для этого следует воспользоваться следующей конструкцией:

 value = value || 'Значение по умолчанию' value = value || 'Значение по умолчанию'    Скопировать Скопировано Не удалось скопировать   

Или можно использовать сокращённый вариант:

 value ||= 'Значение по умолчанию' value ||= 'Значение по умолчанию'    Скопировать Скопировано Не удалось скопировать   

Нужно помнить, что если в переменную записать undefined , null , NaN , 0 , пустую строку или любое другое значение, которое JavaScript сможет привести к false , то данная конструкция перезапишет его значением по умолчанию.

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

 let searchEngine1 = 'Яндекс'let searchEngine2 searchEngine1 = searchEngine1 || 'Google'searchEngine2 = searchEngine2 || 'Google' console.log(searchEngine1)// Яндексconsole.log(searchEngine2)// Google (значение по умолчанию) let searchEngine1 = 'Яндекс' let searchEngine2 searchEngine1 = searchEngine1 || 'Google' searchEngine2 = searchEngine2 || 'Google' console.log(searchEngine1) // Яндекс console.log(searchEngine2) // Google (значение по умолчанию)    Скопировать Скопировано Не удалось скопировать   

Такой способ работает из-за особенности оператора «ИЛИ»: он не приводит значения к типу Boolean , а просто возвращает то, что стоит левее или правее.

• Если левое значение можно привести к true , то оператор возвращает левое значение.
• Если левое значение можно привести к false , то оператор возвращает правое значение.

 console.log(null || 0)// 0 console.log(0 || null)// null console.log('Собака' || 'Кошка')// Собака console.log(null || 0) // 0 console.log(0 || null) // null console.log('Собака' || 'Кошка') // Собака    Скопировать Скопировано Не удалось скопировать   

В последнем примере JavaScript приводит левое значение к типу Boolean и получает true , из-за чего решает вернуть именно его ( ‘Собака’ ), а правое – даже не смотрит.

🛠 Оператор «И» ( && ) можно использовать в React компонентах, когда мы хотим что-то показать или спрятать в зависимости от определённого условия, для этого нужно воспользоваться следующей jsx конструкцией:

 <>  condition &&  Если condition == true, то показываем этот текст.  > >  condition && p> Если condition == true, то показываем этот текст. p> > >    Скопировать Скопировано Не удалось скопировать   

Давайте напишем небольшой компонент, который будет выводить секретное сообщение только тем пользователям, которые ввели правильный пароль:

 import React, < useState >from 'react' export default function App()  const [password, setPassword] = useState('') return ( <> 
Введите пароль, чтобы увидеть секрет  Пароль  type="password" value= onChange= setPassword(e.target.value)> />   password === '123456' && 
Секрет: Дока – сокращение от «документация» >  )> import React,  useState > from 'react' export default function App()  const [password, setPassword] = useState('') return ( > h1>Введите пароль, чтобы увидеть секретh1> label> span>Парольspan> input type="password" value=password> onChange=(e) => setPassword(e.target.value)> /> label>  password === '123456' && p>Секрет: Дока – сокращение от «документация»p> > > ) >    Скопировать Скопировано Не удалось скопировать   

Такой способ работает из-за того, что оператор «И» не приводит значения к типу Boolean , а просто возвращает то, что стоит левее или правее.

• Если левое значение можно привести к true , то оператор возвращает правое значение.
• Если левое значение можно привести к false , то оператор возвращает левое значение.

 console.log(null && 0)// null console.log(0 && null)// 0 console.log('Лево' && 'Право')// Право console.log(null && 0) // null console.log(0 && null) // 0 console.log('Лево' && 'Право') // Право    Скопировать Скопировано Не удалось скопировать   

JavaScript приводит левое значение к типу Boolean и получает true , из-за чего решает вернуть правое значение ( ‘Право’ ).

🛠 Двойное отрицание ( !! ) можно использовать, если мы хотим привести значение к логическому типу данных. Такой же результат получится, если использовать функцию Boolean .

 const value = 'Непустая строка' console.log(Boolean(value))// true console.log(!!value)// true const value = 'Непустая строка' console.log(Boolean(value)) // true console.log(!!value) // true    Скопировать Скопировано Не удалось скопировать   

Источник