Необязательные вызовы и доступ по индексу
Используйте необязательную цепочку с вызовами и квадратными скобками.
«Необязательные вызовы и доступ по индексу» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Не только чтение свойств
Опциональная цепочка также позволяет безопасно вызывать функции и обращаться к элементам массива или свойствам по динамическому ключу.
const obj = { greet: () => "hi" };
console.log(obj.greet?.()); // "hi"Опциональные вызовы методов
Форма ?.() вызывает функцию только в том случае, если она существует. Если метод равен null или undefined, возвращается undefined вместо возникновения исключения.
const obj = {};
console.log(obj.greet?.()); // undefined, no errorПочему это важно
Без этого вызов отсутствующего метода вызывает исключение. Форма опционального вызова аккуратно защищает необязательные обратные вызовы.
function run(onDone) {
onDone?.(); // safe whether or not onDone is provided
}
run();
run(() => console.log("done"));Вызов пропускается только для null и undefined
?.() пропускает вызов только тогда, когда значение равно null или undefined. Если это значение другого типа, не являющееся функцией, при вызове всё равно возникает TypeError.
const obj = { greet: 42 };
try {
obj.greet?.();
} catch (e) {
console.log("not a function");
}Опциональный доступ по индексу
Форма ?.[ ] читает элемент только тогда, когда исходное значение не равно null или undefined; это удобно для массивов и вычисляемых ключей.
const arr = ["a", "b"];
console.log(arr?.[1]); // "b"
const none = null;
console.log(none?.[0]); // undefinedДинамические ключи
Доступ через квадратные скобки с ?. безопасно обрабатывает динамические имена свойств.
const data = { user: { name: "Mia" } };
const key = "name";
console.log(data.user?.[key]); // "Mia"Вложенные массивы
Можно последовательно использовать опциональный доступ по индексу для вложенных массивов или объектов.
const grid = [[1, 2], [3, 4]];
console.log(grid?.[1]?.[0]); // 3
console.log(grid?.[5]?.[0]); // undefinedОпциональный вызов возвращённого значения
Формы можно сочетать: сначала опционально прочитать значение, а затем опционально вызвать его.
const handlers = { click: () => "clicked" };
console.log(handlers.click?.()); // "clicked"
console.log(handlers.hover?.()); // undefinedСочетание со значениями по умолчанию
Сочетайте эти формы с ??, чтобы задать результату резервное значение.
const config = {};
const port = config.get?.() ?? 3000;
console.log(port); // 3000Безопасный вызов методов массива
Опциональная цепочка позволяет вызвать метод у массива, который может отсутствовать, без отдельной проверки его существования.
const state = { tags: null };
console.log(state.tags?.join(", ") ?? "none"); // "none"Используйте там, где необязательность реальна
Эти формы особенно полезны для необязательных обратных вызовов и данных с неопределённой структурой. Не используйте их там, где значение должно существовать всегда, чтобы настоящие ошибки по-прежнему обнаруживались.
const events = { onSave: null };
events.onSave?.("payload"); // silently does nothing
console.log("continued");Быстрая проверка
Выберите безопасную форму вызова.
Итоги
Опциональная цепочка включает ?.() для безопасных вызовов методов и ?.[ ] для безопасного доступа по индексу или динамическому ключу. Обе формы возвращают undefined, если исходное значение равно null или undefined, но по-прежнему вызывают исключение при вызове значения, не являющегося функцией. Сочетайте их с ?? для задания значений по умолчанию и используйте только для действительно необязательных значений.
Часто задаваемые вопросы
Урок «Необязательные вызовы и доступ по индексу» бесплатный?
Да — полный текст урока «Необязательные вызовы и доступ по индексу» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Необязательные вызовы и доступ по индексу»?
Используйте необязательную цепочку с вызовами и квадратными скобками. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Необязательные вызовы и доступ по индексу»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Необязательная цепочка с оператором ?.
- Оператор объединения с null ??
- Совместное использование ?. и ??
- Необязательные вызовы и доступ по индексу