Кратко
СкопированоЛогические операторы помогают составлять сложные логические условия, которые часто нужны при ветвлении с помощью if.
Как пишется
СкопированоИ, &&
СкопированоИнтернет-магазин показывает цены со скидкой только зарегистрированному пользователю, сделавшему больше одной покупки.
В описании два условия, которые должны одновременно быть верными:
- пользователь должен быть зарегистрирован;
- количество покупок должно быть больше одной.
Если одно из условий, или оба сразу неверны, то цену показывать не нужно.
Именно по такому принципу работает оператор логическое И, пишется &&. Если соединить с его помощью два выражения, то результат будет равен истине только тогда, когда оба выражения истинны:
if (isRegistered === true && orders > 1) { // показываем цены}
if (isRegistered === true && orders > 1) {
// показываем цены
}
Обычно для того, чтобы понять, как работают логические операторы, рисуют таблицу истинности. В ячейках — итоговое значение операции при соответствующих операндах:
&& | true | false |
|---|---|---|
true | true | false |
false | false | false |
ИЛИ, ||
СкопированоПредставь, что мы проверяем билеты на концерт. Пропускать нужно людей с билетами, а также тех, кто находится в списке приглашённых. Выполнение любого из этих условий гарантирует попадание на концерт.
Чтобы написать такое составное условие, воспользуйся оператором логического ИЛИ, обозначается как две вертикальные черты ||. Логическое или вернёт true, если хотя бы одно из условий true.
Генерируйте гостей в демо и смотрите, как отрабатывает условие, которое записано так:
if (hasTicket || isInvited) { ... }
if (hasTicket || isInvited) { ... }
|| | true | false |
|---|---|---|
true | true | true |
false | true | false |
НЕ !
СкопированоОператор «логическое НЕ» превращает true в false и наоборот.
Он записывается в виде восклицательного знака ! перед операндом: !операнд . Чаще всего это переменная. Например, !my . Операторы, которые производят операцию над одним операндом называются унарными.
Например, мы можем предлагать купить билет посетителю без билета:
if (!hasTicket) { // купи билет, дорогой!}
if (!hasTicket) {
// купи билет, дорогой!
}
На практике
Скопированосоветует
Скопировано🛠 Оператор «ИЛИ» (||) можно использовать для установки значения по умолчанию, для этого следует воспользоваться следующей конструкцией:
value = value || 'Значение по умолчанию'
value = value || 'Значение по умолчанию'
Или можно использовать сокращённый вариант:
value ||= 'Значение по умолчанию'
value ||= 'Значение по умолчанию'
В следующем примере пользователю предлагается выбрать поисковой движок и записать его в переменную, но он может отказаться, и тогда мы по умолчанию установим ему Google.
let searchEngine1 = 'Яндекс'let searchEngine2searchEngine1 = 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)// 0console.log(0 || null)// nullconsole.log('Собака' || 'Кошка')// Собака
console.log(null || 0)
// 0
console.log(0 || null)
// null
console.log('Собака' || 'Кошка')
// Собака
В последнем примере JavaScript приводит левое значение к типу Boolean и получает true, из-за чего решает вернуть именно его ('Собака'), а правое – даже не смотрит.
🛠 Оператор «И» (&&) можно использовать в React компонентах, когда мы хотим что-то показать или спрятать в зависимости от определённого условия, для этого нужно воспользоваться следующей jsx конструкцией:
<> { condition && <p> Если condition == true, то показываем этот текст. </p> }</>
<>
{
condition &&
<p>
Если condition == true,
то показываем этот текст.
</p>
}
</>
Давайте напишем небольшой компонент, который будет выводить секретное сообщение только тем пользователям, которые ввели правильный пароль:
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> } </> )}
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)// nullconsole.log(0 && null)// 0console.log('Лево' && 'Право')// Право
console.log(null && 0)
// null
console.log(0 && null)
// 0
console.log('Лево' && 'Право')
// Право
JavaScript приводит левое значение к типу Boolean и получает true, из-за чего решает вернуть правое значение ('Право').
🛠 Двойное отрицание (!!) можно использовать, если мы хотим привести значение к логическому типу данных. Такой же результат получится, если использовать функцию Boolean.
const value = 'Непустая строка'console.log(Boolean(value))// trueconsole.log(!!value)// true
const value = 'Непустая строка'
console.log(Boolean(value))
// true
console.log(!!value)
// true