Введение

JavaScript, будучи одним из самых популярных языков программирования, предоставляет разработчикам ряд операторов для выполнения различных логических операций. Среди них операторы логического ИЛИ (||) и нулевого объединения (??) являются фундаментальными инструментами для управления значениями по умолчанию и обработки нулевых значений. В этой статье будут рассмотрены различия между этими двумя операторами, варианты их использования, а также практические и сложные примеры, иллюстрирующие их использование.

Понимание оператора логического ИЛИ (||)

Оператор логического ИЛИ (||) в JavaScript широко используется для возврата первого истинного значения среди своих операндов или последнего значения, если ни одно из них не является истинным. В основном он используется для установки значений по умолчанию.

Синтаксис

result = operand1 || operand2;

Как это работает

|| оператор оценивает слева направо, возвращая первый операнд, если он правдив; в противном случае он оценивает и возвращает второй операнд.

Пример 1: Установка значений по умолчанию

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput || defaultText;
console.log(message); // Output: 'Hello, World!'

В этом примере userInput представляет собой пустую строку (ложь), поэтому возвращается defaultText.

Пример 2. Обработка нескольких значений

let firstName = null;
let lastName = 'Doe';

let name = firstName || lastName || 'Anonymous';
console.log(name); // Output: 'Doe'

Здесь firstName имеет значение null (ложное), поэтому LastName возвращается в том виде, в каком оно истинно.

Ограничения оператора логического ИЛИ (||)

Основное ограничение || заключается в том, что он рассматривает несколько значений как ложные, например 0, NaN, '', false, null и undefined. Это может привести к неожиданным результатам, если эти значения должны быть действительными.

Знакомство с нулевым оператором объединения (??)

Оператор нулевого объединения (??) — это более позднее дополнение к JavaScript, представленное в ES2020. Он предназначен для обработки случаев, когда null или undefined явно считаются единственными рассматриваемыми нулевыми значениями.

Синтаксис

result = operand1 ?? operand2;

Как это работает

?? Оператор возвращает правый операнд, если левый операнд имеет значение NULL или не определен. В противном случае возвращается левый операнд.

Пример 1: Установка значений по умолчанию

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput ?? defaultText;
console.log(message); // Output: ''

В этом примере userInput представляет собой пустую строку, которая не равна нулю или неопределена, поэтому она возвращается.

Пример 2: Обработка нулевых значений

let firstName = null;
let lastName = 'Doe';

let name = firstName ?? lastName ?? 'Anonymous';
console.log(name); // Output: 'Doe'

Здесь firstName имеет значение NULL, поэтому возвращается LastName, поскольку оно не является ни нулевым, ни неопределенным.

Сравнение операторов логического ИЛИ (||) и нулевого объединения (??)

Пример 1: Сравнение ложных значений

let value1 = 0;
let value2 = '';

let resultOR = value1 || 'default';
let resultNullish = value1 ?? 'default';

console.log(resultOR); // Output: 'default'
console.log(resultNullish); // Output: 0

В этом примере 0 считается ложным по || оператор, но является допустимым значением для ?? оператор.

Пример 2: совместное использование обоих операторов

let userInput = null;
let fallbackText = 'Default Text';

let message = (userInput ?? fallbackText) || 'Fallback Message';
console.log(message); // Output: 'Default Text'

Здесь userInput имеет значение null, поэтому FallbackText используется оператором ?? оператор. Затем результат проверяется оператором || оператор, но поскольку FallbackText правдив, он возвращается.

Сложные примеры логических операторов ИЛИ (||) и нулевого объединения (??)

Пример 3: Вложенные операции с объектами

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

let userSettings = {
  theme: {
    color: '',
    font: null
  }
};

let defaultSettings = {
  theme: {
    color: 'blue',
    font: 'Arial'
  }
};

let themeColor = userSettings.theme.color || defaultSettings.theme.color;
let themeFont = userSettings.theme.font ?? defaultSettings.theme.font;

console.log(themeColor); // Output: 'blue'
console.log(themeFont); // Output: 'Arial'

В этом примере userSettings.theme.color — пустая строка, поэтому используется defaultSettings.theme.color. userSettings.theme.font имеет значение null, поэтому используется defaultSettings.theme.font.

Пример 4: Параметры функции со значениями по умолчанию

При работе с параметрами функции вам может потребоваться указать значения по умолчанию для отсутствующих аргументов.

function greet(name, greeting) {
  name = name ?? 'Guest';
  greeting = greeting || 'Hello';

  console.log(`${greeting}, ${name}!`);
}

greet(); // Output: 'Hello, Guest!'
greet('Alice'); // Output: 'Hello, Alice!'
greet('Bob', 'Hi'); // Output: 'Hi, Bob!'
greet(null, 'Hey'); // Output: 'Hey, Guest!'

В этом примере параметр name использует знак ?? оператор для установки значения по умолчанию «Гость», если имя имеет значение NULL или неопределенное. Параметр приветствия использует || оператор для установки значения по умолчанию «Привет», если приветствие имеет любое ложное значение, отличное от нуля или неопределенности.

Пример 5: Объединение с необязательной цепочкой

Необязательное связывание (?.) можно комбинировать с || и ?? для безопасной обработки глубоко вложенных свойств объекта.

let user = {
  profile: {
    name: 'John Doe'
  }
};

let userName = user?.profile?.name || 'Anonymous';
let userEmail = user?.contact?.email ?? 'No Email Provided';

console.log(userName); // Output: 'John Doe'
console.log(userEmail); // Output: 'No Email Provided'

В этом примере необязательная цепочка гарантирует, что, если какая-либо часть пути к свойству не существует, возвращается неопределенное значение, что предотвращает ошибки. || и ?? затем операторы предоставляют соответствующие значения по умолчанию.

Лучшие практики и варианты использования

1. Используйте || для широкого дефолта:

   • Когда вам нужно указать значения по умолчанию для диапазона ложных условий (например, пустые строки, 0, NaN).

2. Использовать ?? для точных проверок на нулевое значение:

   • Когда вы специально хотите обработать значение null или неопределенное, не затрагивая другие ложные значения.

3. Объединение обоих:

   • Используйте комбинацию || и ?? для сложных сценариев, где вам необходимо отдельно обрабатывать как истинные/ложные значения, так и нулевые значения.

Часто задаваемые вопросы

Что делает оператор логического ИЛИ (||)?
Оператор логического ИЛИ (||) возвращает первое истинное значение среди своих операндов или последний операнд, если ни один из них не является истинным.

Когда следует использовать оператор нулевого объединения (??)?
Используйте оператор Nullish Coalescing (??), когда вам нужно специально обработать значение null или неопределенное значение, не рассматривая другие ложные значения, такие как 0 или пустые строки, как нулевые.

Могу ли я использовать оба оператора вместе?
Да, вы можете использовать оба || и ?? вместе, чтобы обрабатывать различные типы значений и гарантировать, что логика вашего кода эффективно охватывает различные случаи.

Как || обрабатывать пустые строки?
|| Оператор рассматривает пустые строки как ложные, поэтому он возвращает следующий операнд, если первый является пустой строкой.

Поддерживается ли оператор нулевого объединения (??) во всех браузерах?
?? поддерживается в современных браузерах и средах, поддерживающих ES2020. Для более старых сред вам может потребоваться использовать транспилятор, такой как Babel.

Каковы различия между || и ?? операторы?
Основное отличие состоит в том, что || считает несколько значений ложными (например, 0, '', false), а ?? рассматривает null и undef только как нулевые значения.

Заключение

Понимание различий между операторами логического ИЛИ (||) и нулевым объединением (??) в JavaScript имеет решающее значение для написания надежного и безошибочного кода. || Оператор отлично подходит для широких сценариев дефолта, а ?? идеально подходит для точной обработки нулевых значений. Правильно используя эти операторы, вы можете гарантировать, что ваш код эффективно обрабатывает различные состояния данных, обеспечивая удобство работы с пользователем.