Вы когда-нибудь проклинали свой код, когда вам нужно было убедиться, что вложенное свойство в глубоком объекте существует? Не ругайся больше!

Всякий раз, когда вы имеете дело с объектом в JavaScript, вы часто хотите получить от него данные. И когда вы хотите получить что-то из объекта, вложенного в несколько слоев, вы уже боитесь ошибки «Невозможно прочитать имя свойства undefined», верно? Звучит знакомо?

Вы тоже ругались, когда эта ошибка выскакивала в рабочем приложении?

Что ж, к счастью, есть необязательная цепочка. Позволь мне объяснить

Предыстория

Итак, вы получили этот объект, который может иметь или не иметь определенное свойство данных, скажем, мы имеем дело с пользователем. Данные могут выглядеть так

Он может иметь или не иметь имя, а также может иметь или не иметь свойства имени. Итак, когда вы хотите получить это свойство, вы не можете доверять существованию цепочки, так что же вы делаете? Верно… проверяйте каждый уровень вот так

А затем, как только вы обнаружите, что свойство name внутри пользовательского объекта существует, вы можете что-то сделать с содержимым. А потом еще точно не знаешь, есть имя или нет.

Но вы бы предпочли сделать вот что, верно?

Решение

Что ж, вам повезло, это именно то, для чего существует необязательная цепочка. Он проверит для вас, может ли он достичь желаемого вложенного свойства без необходимости поиска по всем им.

Видите этот вопросительный знак? Это делает проверку для вас! Таким образом, строка выше проверяет каждую цепочку внутри объекта, как мы сделали с нашей проверкой if &&.

Теперь в нашем примере firstName на самом деле вернет «Foo», но мы также можем сделать следующее:

Это выведет undefined undefined как и ожидалось, а не выдаст ошибку.

И да, это также будет работать с такими функциями.

Это снова вернет undefined и не вызовет несуществующую функцию. Хотя одно замечание, если combinedBirthday будет установлено, но не будет функцией, это все равно приведет к ошибке, поэтому не смешивайте эти данные!

Улов

Так в чем подвох? Что ж… если вы работаете с современным стеком, у вас не будет проблем. Необязательная цепочка уже поддерживается во всех современных браузерах и добавлена ​​в NodeJS 14.

Однако вы должны знать, что это было относительно недавнее дополнение, например, Chrome 80 был выпущен только в феврале 2020 года, поэтому, если вы используете необязательную цепочку в веб-среде, убедитесь, что вы правильно настроили свой потенциальный полифилл с помощью babel. .

И это все, что вам нужно знать, считайте, что вы хорошо разбираетесь в теме, и начните использовать эту сладкую необязательную цепочку!