18 фрагментов кода JavaScript для обработки null, NaN и undefined

В JavaScript null, NaN и undefined — это специальные значения, которые обозначают отсутствие или недопустимость значения. Правильная обработка этих значений имеет решающее значение для написания надежного кода. В этой статье мы представляем 18 готовых к интервью фрагментов кода, которые демонстрируют различные методы работы с null, NaN и undefined. Каждый фрагмент кода подробно объясняется, и для облегчения понимания предоставляется пример вывода.

Фрагмент 1: Проверка, является ли значение нулевым

const value = null;
console.log(value === null);

Вывод: правда

Объяснение. Фрагмент кода проверяет, установлено ли явное значение null с помощью оператора строгого равенства (===).

Фрагмент 2: Проверка того, не определено ли значение

let value;
console.log(value === undefined);

Вывод: правда

Объяснение. Фрагмент кода проверяет, установлено ли явное значение undefined с помощью оператора строгого равенства (===).

Фрагмент 3: Проверка, является ли значение NaN

const value = NaN;
console.log(Number.isNaN(value));

Вывод: правда

Объяснение. Фрагмент кода использует метод Number.isNaN(), чтобы проверить, является ли значение NaN.

Фрагмент 4: Проверка, является ли значение нулевым или неопределенным

let value;
console.log(value == null);

Вывод: правда

Объяснение. Фрагмент кода использует нестрогий оператор равенства (==), чтобы проверить, является ли значение нулевым или неопределенным.

Фрагмент 5: Оператор объединения для предоставления значения по умолчанию для null или undefined

const value = null;
console.log(value ?? 'Default Value');

Вывод: значение по умолчанию

Объяснение.В этом фрагменте кода используется нулевой оператор объединения (??) для предоставления значения по умолчанию, когда исходное значение равно null или не определено.

Фрагмент 6: преобразование неопределенного значения в значение по умолчанию

let value;
console.log(value || 'Default Value');

Вывод: значение по умолчанию

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

Фрагмент 7: Преобразование null или undefined в пустую строку

let value;
console.log(value ?? '');

Вывод: ‘’

Объяснение. Фрагмент кода использует оператор объединения с нулевым значением (??) для преобразования значений null или undefined в пустую строку.

Фрагмент 8: Преобразование NaN в ноль

const value = NaN;
console.log(Number.isNaN(value) ? 0 : value);

Вывод: 0

Объяснение. Фрагмент кода использует условный (тернарный) оператор для преобразования NaN в ноль.

Фрагмент 9: Проверка, объявлена ​​ли переменная

console.log(typeof variable !== 'undefined');

Вывод: ложь

Объяснение.Фрагмент кода проверяет, объявлена ​​ли переменная, сравнивая ее тип с «неопределенным» с помощью оператора typeof.

Фрагмент 10: Проверка определения свойства объекта

const obj = {};
console.log(obj.hasOwnProperty('property'));

Вывод: ложь

Объяснение. Фрагмент кода проверяет наличие у объекта obj определенного свойства с именем "свойство" с помощью метода hasOwnProperty().

Фрагмент 11. Безопасный доступ к вложенным свойствам

const obj = { nested: { property: 'value' } };
console.log(obj?.nested?.property);

Вывод: «значение»

Объяснение. Фрагмент кода использует необязательный оператор цепочки (?.) для безопасного доступа к вложенным свойствам без возникновения ошибки, если какое-либо промежуточное свойство имеет значение null или не определено.

Фрагмент 12: установка значения по умолчанию для отсутствующего свойства объекта

const obj = {};
console.log(obj.property ?? 'Default Value');

Вывод: «Значение по умолчанию»

Объяснение. Фрагмент кода использует нулевой оператор объединения (??) для предоставления значения по умолчанию, если свойство отсутствует.

Фрагмент 13: Возврат значения по умолчанию для аргумента функции

function greet(name) {
  name = name ?? 'Guest';
  console.log(`Hello, ${name}!`);
}

greet();

Вывод: "Здравствуйте, Гость!"

Объяснение. Фрагмент кода использует нулевой оператор объединения (??) для установки значения по умолчанию для параметра name функции greet().

Фрагмент 14: Проверка истинности значения

const value = null;
console.log(!!value);

Вывод: ложь

Объяснение. Фрагмент кода использует двойное отрицание (!!) для преобразования значения в логическое значение и определения его достоверности.

Фрагмент 15: Проверка ложности значения

const value = null;
console.log(!value);

Вывод: правда

Объяснение. Фрагмент кода использует оператор отрицания (!) для преобразования значения в логическое значение и определения его ложности.

Фрагмент 16: Короткое замыкание для предотвращения доступа к неопределенным свойствам

const obj = null;
console.log(obj?.property?.nested);

Вывод: не определено

Объяснение. Фрагмент кода использует необязательный оператор цепочки (?.) для сокращения выражения, если какое-либо промежуточное свойство имеет значение null или не определено.

Фрагмент 17: Преобразование нуля в пустой массив

const value = null;
console.log(value || []);

Вывод: []

Объяснение.В этом фрагменте кода используется логический оператор ИЛИ (||) для преобразования нулевого значения в пустой массив.

Фрагмент 18: Удаление нулевых и неопределенных значений из массива

const arr = [1, null, 2, undefined, 3];
console.log(arr.filter(Boolean));

Вывод: [1, 2, 3]

Объяснение. Фрагмент кода использует метод filter() с конструктором Boolean в качестве функции обратного вызова для удаления нулевых и неопределенных значений из массива.

Заключение:

Понимание того, как обрабатывать значения null, NaN и undefined в JavaScript, необходимо для написания надежного кода без ошибок. Предоставленные 18 фрагментов кода охватывают ряд сценариев, демонстрируя такие методы, как нулевое объединение, необязательные цепочки, логические операторы и проверки типов. Ознакомившись с этими фрагментами, вы будете хорошо подготовлены к собеседованиям по JavaScript и сможете писать чистый, устойчивый к ошибкам код.

Надеюсь, что приведенная выше статья дала лучшее понимание. Если у вас есть какие-либо вопросы относительно областей, которые я обсуждал в этой статье, области улучшения, не стесняйтесь комментировать ниже.

[Раскрытие информации: эта статья является совместным творением, в котором мои собственные идеи сочетаются с помощью ChatGPT для оптимальной артикуляции.]