Логические операторы
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/logical-operators.
Для операций над логическими значениями в JavaScript есть || (ИЛИ), && (И) и ! (НЕ).
Хоть они и называются «логическими», но в JavaScript могут применяться к значениям любого типа и возвращают также значения любого типа.
|| (ИЛИ)
Оператор ИЛИ выглядит как двойной символ вертикальной черты:
result = a || b;Логическое ИЛИ в классическом программировании работает следующим образом: «если хотя бы один из аргументов true , то возвращает true , иначе – false «. В JavaScript, как мы увидим далее, это не совсем так, но для начала рассмотрим только логические значения.
Получается следующая «таблица результатов»:
alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // falseЕсли значение не логического типа – то оно к нему приводится в целях вычислений. Например, число 1 будет воспринято как true , а 0 – как false :
if (1 || 0) < // сработает как if( true || false ) alert( 'верно' ); >Обычно оператор ИЛИ используется в if , чтобы проверить, выполняется ли хотя бы одно из условий, например:
var hour = 9; if (hour < 10 || hour >18)
Можно передать и больше условий:
var hour = 12, isWeekend = true; if (hour < 10 || hour >18 || isWeekend)
Короткий цикл вычислений
JavaScript вычисляет несколько ИЛИ слева направо. При этом, чтобы экономить ресурсы, используется так называемый «короткий цикл вычисления».
Допустим, вычисляются несколько ИЛИ подряд: a || b || c || . . Если первый аргумент – true , то результат заведомо будет true (хотя бы одно из значений – true ), и остальные значения игнорируются.
Это особенно заметно, когда выражение, переданное в качестве второго аргумента, имеет сторонний эффект – например, присваивает переменную.
При запуске примера ниже присвоение x не произойдёт:
var x; true || (x = 1); alert(x); // undefined, x не присвоен…А в примере ниже первый аргумент – false , так что ИЛИ попытается вычислить второй, запустив тем самым присваивание:
var x; false || (x = 1); alert(x); // 15 популярных JavaScript-хаков
Существует несколько , которыми постоянно пользуются опытные программисты. Они не совсем очевидны, особенно для новичков. Эти хаки используют возможности языка, имеющие некоторые побочные эффекты. В этой статье я объясню, как работают 5 таких распространённых хаков.
Использование оператора !! для конвертации в логическое значение
Всё в JavaScript может быть интерпретировано как истинное или ложное. Это означает, что если вы поместите объект в условный оператор if , то он выполнит либо true -ветку кода (когда объект имеет значение true ), либо выполнит false -ветку (соответственно, когда объект имеет значение false ).
0, false, «», null, undefined, NaN — это ложные значения. Все остальные значения возвращают true . Иногда вам может потребоваться конвертировать переменную в логическое значение. Это можно сделать с помощью оператора !! :
var something = 'variable'; !!something // returns true С другой стороны, вместо if (x == «test») можно просто написать if (x) . Если же x будет пустой переменной, то просто выполнится код из блока else .
Конвертация строки в число с помощью оператора +
В JavaScript + — это унарный оператор, который возвращает числовое представление операнда или NaN , если операнд не имеет такового. Например, с помощью этого оператора можно проверить, является ли переменная x числом (такой код можно увидеть в библиотеке underscore): x === +x .
Такой способ не очевиден. Скорее всего, вы бы применили методы parseFloat и parseInt .
Определение значения по умолчанию с оператором ||
В JavaScript || является примером выполнения короткого замыкания. Этот оператор сперва анализирует выражение слева от него, и, если оно ложно, анализирует выражение справа. В любом случае, он возвращает первое истинное выражение. Рассмотрим следующий пример:
function setAge(age) < this.age = age || 10 >setAge(); В этом примере мы вызываем функцию setAge() без аргументов, таким образом age || 10 вернет 10 ( !!age == false ). Такой способ весьма хорош для того, чтобы задавать значения переменных по умолчанию. На самом деле, такой подход эквивалентен следующему примеру:
var x; if (age) < this.age = age; >else
Первый пример с оператором || более лаконичен, поэтому именно такой способ используется во всем мире.
Лично я часто использую этот способ. Мне нравится его лаконичность и простота. Однако стоит заметить, что с таким способом вам не удастся задать переменной значение 0, так как 0 является ложным выражением. Поэтому я советую при необходимости использовать такой способ:
this.age = (typeof age !== "undefined") ? age : 10; Использование void 0 вместо undefined
Ключевое слово void принимает один аргумент и всегда возвращает undefined . Почему просто не использовать undefined ? Потому что в некоторых браузерах undefined — это просто переменная, которая может быть переопределена. Поэтому void 0 даёт нам больше уверенности в том, что ничего не будет случайно сломано. Хотя вы можете найти этот хак в исходниках многих библиотек, я бы не рекомендовал использовать его регулярно, так как все браузеры не позволяют перезаписывать значение undefined .
Инкапсуляция с помощью паттерна (function() )()
В ES5 есть только 2 типа областей видимости: глобальная область видимости и область видимости функции. Всё, что вы пишите, принадлежит к глобальной области, которая доступна из любого места кода. Она включает в себя объявление переменных и функций. Однако, что если вы захотите инкапсулировать большинство кода, а в глобальной области видимости оставить только интерфейс? Тогда вам следует использовать анонимную функцию. Рассмотрим следующий пример:
(function() < function div(a, b) < return a / b; >function divBy5(x) < return div(x, 5); >window.divBy5 = divBy5; >)() div // => undefined divBy5(10); // => 2 Из всех перечисленных в статье хаков этот хак является самым безвредным; вы можете и должны использовать его в своих проектах, чтобы предотвратить взаимодействие внутренней логики с глобальной областью видимости.
В заключение я хотел бы напомнить вам, что любой написанный вами код должен быть прост и понятен для других программистов. И любые стандартные конструкции, предоставляемые языком, следует использовать в первую очередь.
Некоторые из хаков, рассмотренных в статье, могут быть решены элегантнее с помощью ES6 (следующая версия JavaScript). Например, в ES6 вместо age = age || 10 можно написать следующее:
function(age = 10) < // . >Другой пример — паттерн (function() <. >)() , который вы уже вряд ли станете использовать после того, как модули ES6 станут поддерживаться современными браузерами.
Дополнительные материалы
Если вы хотите погрузиться в тему ещё глубже, вам могут пригодиться следующие ресурсы:
- Byte Saving Techniques
- JavaScript Idiosyncrasies (kinda)
- JavaScript language advanced Tips & Tricks
null
Значение null представляет отсутствие какого-либо объектного значения. В JavaScript, null является примитивом, и в контексте логических операций, рассматривается как ложное (falsy).
Интерактивный пример
Синтаксис
null
Описание
Значение null записывается литералом null . Оно является самостоятельным, а не свойством глобального объекта (как undefined ). В API, null часто присутствует в местах где ожидается объект, но подходящего объекта нет.
// переменная foo не существует - она не была определена и никогда не инициализировалась: > foo 'ReferenceError: foo is not defined' // переменная foo существует, но она не имеет ни типа, ни значения: > var foo = null; foo 'null'
Отличия между null и undefined
null является определённым значением отсутствия объекта, тогда как undefined обозначает неопределённость. Например:
var element; // значение переменной element до её инициализации не определённо: undefined element = document.getElementById("not-exists"); // здесь при попытке получения несуществующего элемента, метод getElementById возвращает null // переменная element теперь инициализирована значением null, её значение определено
При проверке на null или undefined , помните о различии между операторами равенства (==) и идентичности (===): с первым, выполняется преобразование типов.
typeof null; // object (не "null" из соображений обратной совместимости) typeof undefined; // undefined null === undefined; // false null == undefined; // true
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-null-value |
Совместимость с браузерами
BCD tables only load in the browser
Логические операторы
Здесь мы рассмотрим первые пять, операторы ?? и ??= будут в следующей статье.
Несмотря на своё название, данные операторы могут применяться к значениям любых типов. Полученные результаты также могут иметь различный тип.
Давайте рассмотрим их подробнее.
|| (ИЛИ)
Оператор «ИЛИ» выглядит как двойной символ вертикальной черты:
result = a || b;Традиционно в программировании ИЛИ предназначено только для манипулирования булевыми значениями: в случае, если какой-либо из аргументов 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 (1 || 0) < // работает как if( true || false ) alert( 'истинно!' ); >Обычно оператор || используется в if для проверки истинности любого из заданных условий.
let hour = 9; if (hour < 10 || hour >18)
Можно передать и больше условий:
let hour = 12; let isWeekend = true; if (hour < 10 || hour >18 || isWeekend) < alert( 'Офис закрыт.' ); // это выходной >ИЛИ «||» находит первое истинное значение
Описанная выше логика соответствует традиционной. Теперь давайте поработаем с «дополнительными» возможностями JavaScript.
Расширенный алгоритм работает следующим образом.
При выполнении ИЛИ || с несколькими значениями:
result = value1 || value2 || value3;Оператор || выполняет следующие действия:
- Вычисляет операнды слева направо.
- Каждый операнд конвертирует в логическое значение. Если результат true , останавливается и возвращает исходное значение этого операнда.
- Если все операнды являются ложными ( false ), возвращает последний из них.
Значение возвращается в исходном виде, без преобразования.
Другими словами, цепочка ИЛИ || возвращает первое истинное значение или последнее, если такое значение не найдено.
alert( 1 || 0 ); // 1 (1 - истинное значение) alert( true || 'какая-то строка' ); // true alert( null || 1 ); // 1 (первое истинное значение) alert( null || 0 || 1 ); // 1 (первое истинное значение) alert( undefined || null || 0 ); // 0 (поскольку все ложно, возвращается последнее значение)Это делает возможным более интересное применение оператора по сравнению с «чистым, традиционным, только булевым ИЛИ».
-
Получение первого истинного значения из списка переменных или выражений. Например, у нас есть переменные firstName , lastName и nickName , все они необязательные (т.е. они могут быть неопределенными или иметь ложные значения). Давайте воспользуемся оператором ИЛИ || , чтобы выбрать ту переменную, в которой есть данные, и показать её (или «Аноним», если ни в одной переменной данных нет):
let firstName = ""; let lastName = ""; let nickName = "Суперкодер"; alert( firstName || lastName || nickName || "Аноним"); // Суперкодер