Необязательная цепочка (?.)
Оператор необязательного связывания (?.
) позволяет считывать значение свойства, расположенного глубоко в цепочке связанных объектов, без необходимости явно подтверждать, что каждая ссылка в цепочке действительна. Оператор ?.
действует аналогично оператору цепочки .
, за исключением того, что вместо того, чтобы вызывать ошибку, если ссылка пуста (null
или undefined
), выражение замыкается с возвращаемым значением undefined
. При использовании с вызовами функций возвращает undefined
, если данная функция не существует.
Содержание
- Эта проблема
- Почему необязательная цепочка
- Необязательная цепочка недопустима в левой части присваивания
- Связь с необязательным оператором цепочки (?.)
- Другие случаи:?. (),?. []
- Используйте
?.
с удалением: - Резюме
- Ссылка
Эта проблема
У объекта может быть очень разная вложенная структура объектов.
- Получение удаленных данных JSON
- Использование объектов конфигурации
- Имея необязательные свойства
Работа с данными в JavaScript часто связана с ситуациями, когда вы не уверены, что что-то существует. Например, представьте, что вы получаете ответ в формате JSON от API погоды.
{
"data": {
"temperature": {
"current": 68,
"high": 79,
"low": 45
},
"averageWindSpeed": 8
}
}
Вы можете пройти каждый уровень объекта, чтобы получить высокую температуру.
Значение response.data
, response.data.temperature
подтверждается как ненулевое перед доступом к значению response.data.temperature.current
. Это предотвращает ошибку, которая может возникнуть, если вы просто обращаетесь к response.data.temperature.current
напрямую без тестирования response.data && response.data.temperature
const highTemperature = response.data && response.data.temperature && response.data.temperature.current;
С помощью необязательного оператора цепочки (?.) вам не нужно явно тестировать и выполнять короткое замыкание на основе состояния response.data && response.data.temperature
перед попыткой доступа к response.data.temperature.current
.
Если response.data && response.data.temperature
имеют значение null или undefined, выражение автоматически замыкается, возвращая undefined.
const highTemperature = response.data?.temperature?.current;
Используя оператор ?.
вместо просто .
, JavaScript знает, что нужно неявно проверять, чтобы убедиться, что response.data && response.data.temperature
не являются пустыми или неопределенными, прежде чем пытаться получить доступ к response.data.temperature.current
Необязательная цепочка недопустима в левой части присваивания
let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
Связь с необязательным оператором цепочки (?.
)
Оператор объединения с нулевым значением обрабатывает undefined
и null
как определенные значения, как и необязательный оператор сцепления (?.
), который полезен для доступа к свойству объекта, которое может быть null
или undefined
.
let foo = { someFooProp: "hi" };
console.log(foo.someFooProp?.toUpperCase()); // "HI" console.log(foo.someBarProp?.toUpperCase()); // undefined
Другие случаи:?. (),?. []
Необязательная цепочка ?.
- это не оператор, а специальная синтаксическая конструкция, которая также работает с функциями и квадратными скобками.
let user1 = { admin() { alert("I am admin"); } }
let user2 = {};
user1.admin?.(); // I am admin user2.admin?.();
Используйте ?.
с удалением
delete user?.name; // delete user.name if user exists
Несколько сценариев, о которых нужно позаботиться:
1. Переменная перед?. должны быть заявлены
Если переменной user вообще нет, тогда user? .Anything вызывает ошибку:
// ReferenceError: user is not defined
user?.address;
Должен быть пользователь let / const / var. Необязательная цепочка работает только для объявленных переменных.
2. Использовать ?. для безопасного чтения и удаления, но не для записи
Необязательная цепочка? не используется в левой части задания:
// the idea of the code below is to write user.name, if user exists
user?.name = "John"; // Error, doesn't work // because it evaluates to undefined = "John"
Резюме
Синтаксис ?.
имеет три формы:
obj?.prop
- возвращаетobj.prop
, еслиobj
существует, иначеundefined
.obj?.[prop]
- возвращаетobj[prop]
, еслиobj
существует, иначеundefined
.obj?.method()
- вызываетobj.method()
, еслиobj
существует, иначе возвращаетundefined
.
Ссылка:
Необязательная цепочка из Javascript Info
Спасибо, что прочитали статью ❤️
Надеюсь, из этой статьи вы узнаете что-то новое. Если у вас есть вопросы, напишите мне на @suprabhasupi 😋
🌟 Twitter | 👩🏻💻 suprabha.me | 🌟 Instagram