Нулевой оператор объединения ( ?? )
Это логический оператор, который возвращает свой правый операнд, когда его левый операнд равен null или undefined, а в противном случае возвращает свой левый операнд.
давайте рассмотрим некоторые варианты использования, с которыми вы можете часто сталкиваться, когда оператор ( ?? ) может облегчить вашу жизнь :)
Наиболее распространенный вариант использования — доступ к значению из вложенного Object в javascript.
Во фрагменте кода 1.1 видно, что мы пытаемся получить доступ к ключу «name» из объекта данных, который является вложенным объектом, и это дает нам ожидаемый результат.
Во фрагменте кода 1.2 видно, что теперь вложенный объект данных не содержит ключа 'name'.И когда мы пытаемся получить доступ к 'name ' из него мы получаем undefined.
Получение неопределенного значения часто нежелательно. Возможно, вы захотите установить значение по умолчанию, если ключ, к которому вы пытаетесь получить доступ, иногда не определен.
Это можно решить с помощью логического оператора «ИЛИ» ( || ), например:
console.log(data.profile.name || 'Джон Доу')
Это гарантирует, что если data.profile.name не определено, то отображается John Doe. Но это все еще не идеально,давайте посмотрим почему,
Что, если начальное значение keyage’ равно 0 (что на самом деле является допустимым возрастом). В этом случае на выходе мы получим 21. Что снова не является желаемым поведением.
Это происходит потому, что 0 в javascript считается значением falsy.
Итак, до сих пор нам приходилось делать следующее:
if(data.profile.name == undefined || data.profile.name == null )
{ оставьте значение имени как «Джон Доу»}
else{сохранить предоставленное значение имени}
Это делает ваш код излишне длинным, и многие неопытные программисты (включая меня, когда я только начинал! 🤓) неосознанно добавляют ошибки.
#Совет. Неполные знания опаснее, чем их отсутствие.
Но теперь, с введением нулевого оператора объединения ( ?? )вES2020, мы можем сэкономить много время и ошибки!
Все, что нам нужно сделать, это использовать оператор ( ?? ) вместо ( || ), вот и все! И это все, что вам нужно сделать.
Теперь это будет регистрировать 21 только в том случае, если значение age равно nullили undefined. Что мы и ожидаем.
Необязательный оператор цепочки ( ?. )
Оператор дополнительной цепочки ?. позволяет считывать значение свойства, расположенного глубоко в цепочке связанных объектов, без необходимости проверки правильности каждой ссылки в цепочке.
давайте разберемся с этим на примере,
Из нашего предыдущего опыта мы знаем, что если мы попытаемся получить доступ к ключу, который не существует внутри объекта, мы получим неопределенность. (см. фрагмент кода – 2.1)
Мы пытаемся получить доступ к age (который отсутствует) из объекта data. Следовательно, мы получаем undefined.
А что, если мы попытаемся получить доступ к несуществующему вложенному ключу?
Как вы можете видеть в фрагменте кода — 2.2, мы получим ошибку.
Итак, если у нас есть два уровня неопределенности, то мы получаем ошибку.
Эту проблему можно решить с помощью логического оператора И(&&), например:
console.log(data && data.profile && data.profile.age);
В переводе на слова это означает — если данные существуют — извлеките data.profile — и если data.profile существует — извлеките данные. .profile.age
И теперь мы бы не получили ошибку. Итак, проблема решена? ну подождите секунду!
⚠️ Теперь это хороший обходной путь для решения этой проблемы, но это становится очень неприятным, очень быстро. Только представьте, если у вас есть глубоко вложенный объект и вы хотите получить доступ к ключу, который находится очень глубоко в этом объекте, сколько раз вам придется использовать оператор &&!
Таким образом, чтобы упростить это, теперь мы можем использовать необязательный оператор цепочки ES2020.
Во фрагменте кода 2.3 вы можете увидеть, насколько лаконичен и легко читается наш код, который в противном случае занял бы несколько строк.
Еще одно замечание, которое следует сделать, заключается в том, что мы получаем вывод как undefined. Что по-прежнему намного лучше, чем получение ошибки, и теперь мы также можем справиться с этим, объединив наши знания о Nullish Coalescing ( ?? ) и Необязательная цепочка ( ?. )оператор!
Прокомментируйте ответ на проблему ниже! или твитнуть меня🐦любые вопросы, которые у вас есть!
Спасибо за чтение, и если вам понравился этот блог, пожалуйста, рассмотрите возможность подписки на другие публикации, подобные этой!
