Логические операторы JavaScript (&&, ||, !)
Логические операторы играют ключевую роль в управлении потоком выполнения и принятием решений в JavaScript. Это руководство создано, чтобы помочь новичкам понять и эффективно использовать логические операторы JavaScript — &&, ||, ! и !! — с подробными и полностью объяснёнными примерами.
Обзор логических операторов JavaScript
Логические операторы в JavaScript используются для проверки условий и возврата значения на основе операндов; их часто применяют для получения булевого результата. К ним относятся:
&&(логическое И)||(логическое ИЛИ)??(оператор нулевого слияния, технически отличается, но часто объединяется с логическими операторами)!(логическое НЕ)!!(двойное НЕ)
Логическое И (&&)
Оператор && возвращает true только если оба операнда истинны. В JavaScript он фактически возвращает значение первого ложноподобного операнда или последнего операнда, если все значения истинны (короткое замыкание). Он используется, когда одновременно должны выполняться несколько условий.
В этом примере и isLoggedin, и hasPermissions должны быть истинными, чтобы доступ был предоставлен. Если хотя бы одно из них ложно, доступ будет запрещён.
Логическое ИЛИ (||)
Оператор || возвращает true, если хотя бы один из операндов истинен. В JavaScript он возвращает значение первого истинного операнда или последнего операнда, если все значения ложноподобны (короткое замыкание). Он позволяет задавать запасные или альтернативные условия.
Здесь выполнение может продолжиться, если либо networkStatus равно 'good', либо savedOffline равно true, что даёт запасной вариант, если состояние сети плохое.
INFO
Используйте оператор нулевого слияния ??, чтобы задавать значения по умолчанию только тогда, когда переменные равны null или undefined. Это более чистая альтернатива ||, особенно при работе с ложноподобными значениями вроде 0 или '', для которых значение по умолчанию не должно подставляться.
Оператор нулевого слияния
Этот оператор особенно полезен по сравнению с || в случаях, когда ложноподобные значения вроде 0 или '' являются допустимыми и не должны вызывать подстановку значений по умолчанию. Например:
В этом примере itemCount равно 0. При использовании ?? значение defaultCount остаётся 0, потому что ?? реагирует только на null или undefined, а не на другие ложноподобные значения. Это предотвращает нежелательную подстановку значений по умолчанию и делает ваш замысел понятным.
Логическое НЕ (!)
Оператор ! инвертирует истинность своего операнда. Он полезен для переключения состояний или проверки отсутствия условий.
Этот пример проверяет, является ли isActive ложным, и если да, сообщает, что требуется активация.
Двойное НЕ (!!)
Оператор !! преобразует значение в Boolean, гарантируя, что оно строго представляет либо true, либо false.
!!0 вычисляется как false, потому что 0 в JavaScript является ложноподобным значением. Двойное НЕ наглядно показывает преобразование в Boolean.
Использование !! для проверки булевого состояния свойства объекта
Иногда нужно проверить, что свойство объекта не только присутствует, но и является истинным. Оператор !! отлично подходит для преобразования любого значения в строго булев контекст, делая очевидным, соответствует ли свойство условиям.
Представьте ситуацию, когда у вас есть объект пользователя, у которого может быть свойство isActive. Вы хотите выполнить действие только если isActive не просто присутствует, но и истинно.
В этом примере:
- У объекта пользователя есть свойство
isActive, которое равноundefined. - Использование
!!user.isActiveпреобразуетundefinedвfalse. - Поскольку
isActiveравноundefined(а это ложноподобное значение),!!undefinedдаётfalse, и вывод будет таким: "John is not active."
Практические сценарии использования
Условный рендеринг
Этот фрагмент демонстрирует использование && для условного рендеринга, показывая 'UserDashboard' только когда isLoggedIn равно true.
Управление значениями по умолчанию с помощью логического ИЛИ
Если currentUser равно null, для userName по умолчанию используется 'Guest'. Это гарантирует, что приветствие всегда будет персонализированным.
Упрощение сложных условий
Этот код предоставляет полный доступ только проверенным пользователям, которые являются либо администраторами, либо редакторами, эффективно используя и &&, и ||.
Лучшие практики
- Избегайте сложности: Делайте логические выражения простыми. Если они становятся слишком сложными, разбивайте их на более мелкие и удобные части.
- Используйте короткое замыкание: Применяйте природу короткого замыкания у
&&и||, чтобы оптимизировать производительность, избегая ненужных вычислений. - Явное преобразование в Boolean: Используйте
!!, чтобы наглядно преобразовывать значения вtrueилиfalse, повышая читаемость и предсказуемость кода. - Последовательные сравнения: Следите за согласованностью типов данных в сравнениях, чтобы избежать неожиданного поведения из-за приведения типов в JavaScript.
Заключение
Понимание и использование логических операторов в JavaScript необходимо для написания эффективного и производительного кода. Благодаря хорошо объяснённым примерам и лучшим практикам вы сможете освоить эти операторы, улучшив как функциональность, так и надёжность ваших приложений на JavaScript. Экспериментируйте с этими операторами, чтобы полностью понять их потенциал в различных сценариях.
Practice
What is the behavior of the logical operators in JavaScript?