Использование Optional Chaining с массивами и функциями в JS
Быстрый ответ
Для обеспечения безопасного доступа к элементам массива или при вызове функций используйте ?.
.
Обращение к элементам массива:
const element = arr?.[index]; // Если индекс выходит за границы массива, ошибка не возникнет, результатом будет undefined.
Вызов функции:
const result = obj.method?.(...args); // Функция вернёт undefined, если указанный метод не найден.
Оператор условного цепочного обращения (?.
) обеспечивает безопасное обращение к свойствам и методам объектов, исключая получение undefined
или null
в середине цепи вызовов.
Основные сценарии использования
Безопасное обращение к свойствам объекта
Оператор ?.
позволяет надёжно исследовать структуру объектов, отсекая возможность возникновения исключений в процессе выполнения:
let name = user?.profile?.name; // Если 'profile' не существует, переменной 'name' будет присвоено значение undefined.
Безопасный вызов функций
Для вызова методов объектов, существование которых неподтверждённо, используйте условное цепочное обращение, чтобы предотвратить возникновение ошибок выполнения:
obj.questionableMethod?.(); // Если метод отсутствует, ошибки не возникнет.
Извлечение элементов из массива
Безопасно извлекайте элементы из массивов, особенно после применения таких методов как filter
, которые всегда возвращают массив:
const awaitedMatch = myArray?.filter(x => x === soughtValue)?.[0]; // Безопасно возвращает undefined, если совпадений не найдено.
Работа с компонентами и хуками в React
Проверку состояния хуков React и обработку неустойчивых пропсов теперь можно проводить с большей надёжностью:
const isOnline = useStatusHook?.('userID_123')?.isOnline; // Защищает от отсутствия хука и ошибок выполнения.
const displayName = props?.user?.name; // Безопасно, если пользователь не определён.
Рекомендации по использованию
Стоит памятовать о проверенных практиках и ошибках, которые следует избегать при работе с оператором ?.
:
- Не следует злоупотреблять его использованием: это может снизить читаемость кода и скрыть структурные проблемы.
- Исключения, связанные с выходом за границы массива: JavaScript не предупредит о таких ошибках. Они могут быть обнаружены лишь при дальнейшем использовании полученного объекта.
- Будьте предельно внимательны при вызове функций с побочными эффектами через
?.
. - Всегда проверяйте совместимость: убедитесь, что ваша целевая среда исполнения поддерживает условное цепочное обращение.
Визуализация
Если проводить аналогию, то условное цепочное обращение можно представить как сетку безопасности для акробатов:
const circusPerformers = [
{ performer: { name: 'Жонглёр', act: () => '🤹♂️ Жонглирование' } },
{ performer: { name: 'Акробат', act: () => '🤸♀️ Акробатика' } },
// Третий артист ещё осваивает учебник...
];
Номер без сетки безопасности:
const firstAct = circusPerformers[0].performer.act(); // 🤹♂️ Жонглирование
const thirdAct = circusPerformers[2].performer.act(); // 💥 Ошибка: Третий артист ещё готовится!
Установка сетки безопасности (или применение оператора ?.
):
const safeFirstAct = circusPerformers[0]?.performer?.act?.(); // 🤹♂️ Жонглирование
const safeThirdAct = circusPerformers[2]?.performer?.act?.(); // 🎪 Без акции – словно новогодние обещания...
Таким образом, благодаря оператору выполнение номера проходит без сбоев.
Закрепите свои навыки применения условного цепочного обращения
Для более сложных сценариев использования рассмотрим несколько примеров:
Комбинация с оператором объединения с null
Условное цепочное обращение в сочетании с оператором объединения с null (??
) позволяет присваивать значения по умолчанию:
let name = user?.name ?? 'Аноним'; // 'Аноним', если 'name' не определён или равен null.
Проверяем наличие метода перед его вызовом
С помощью оператора ?.
вы можете упростить проверку существования метода перед его вызовом:
if (typeof obj.method === 'function') {
obj.method(args);
}
// Теперь всё значительно проще:
obj.method?.(args);
Работа с многомерными массивами
Уклонитесь от ошибок при обращении к несуществующим элементам многомерных массивов:
const nestedValue = matrix?.[x]?.[y]; // Не вызовет ошибку, даже если 'matrix[x]' не существует или не имеет ключа 'y'.
Динамический доступ к свойствам объектов
Оператор ?.
также поддерживает динамический доступ к свойствам объектов:
const property = 'name';
const value = obj?.[property]; // Вернёт undefined, если свойства 'name' нет в объекте.
Полезные материалы
- Optional chaining (?.) – JavaScript | MDN — подробное руководство по использованию оператора условного цепочного обращения в JavaScript.
- Optional chaining · V8 — детали реализации оператора в движке JavaScript V8.
- ES2020: optional chaining — анализ возможностей оператора в стандарте ES2020.
- JavaScript operator: Optional chaining operator (
?.
) | Can I use... Support tables for HTML5, CSS3, etc — проверка поддержки оператора?.
в различных браузерах, как специализированный инструмент. - Optional chaining '?.'" — полезный учебник с практическими примерами использования оператора.
- – YouTube — обучающее видео по использованию условного цепочного обращения и оператора объединения с null в JavaScript.
- Вопросы с тегом 'optional-chaining' — вопросы и ответы по теме условного цепочного обращения на платформе Stack Overflow.