В версии JavaScript ES2020 впервые была введена необязательная цепочка (?.), чтобы помочь прочитать значение свойств вложенных свойств объектов.
Давайте рассмотрим следующий пример, чтобы понять, почему необязательная цепочка важна и как ее использовать.
В приведенном выше фрагменте у нас есть объект movieTheatre, у которого разные часы открытия и закрытия в разные дни недели. Предполагая, что мы хотим получить часы работы во вторник (вт), вывод будет следующим:
Предположим, у нас есть данные из веб-API с несколькими кинотеатрами, и не все из них открываются в один и тот же день, и нет никакого способа узнать, откроется ли кинотеатр, объявленный выше, в понедельник или нет, и мы хотели бы чтобы узнать, во сколько кинотеатр выше открывается в понедельник. Ниже показано, как мы обычно выполняем эту операцию.
Мы получили указанную выше ошибку, потому что movieTheatre.openingHours.mon не определено.
Без необязательных цепочек мы могли бы избежать этой ошибки, запустив оператор if следующим образом:
Поскольку условие оператора if ложно, блок кода оператора if не будет выполнен.
В дополнение к дням недели, если бы часы работы также были необязательными, нам пришлось бы проверять как часы работы, так и день недели следующим образом, используя оператор if следующим образом:
Поскольку условие оператора if ложно, его кодовый блок не будет выполнен.
Как вы могли заметить, это может довольно быстро запутаться, если у нас есть глубоко вложенные объекты с рядом необязательных свойств, что и происходит в большинстве случаев.
С необязательной цепочкой мы можем легко избавиться от беспорядочных решений, которые мы видели выше, используя необязательную цепочку следующим образом:
Вывод с использованием необязательной цепочки не определен, а не ошибка, как мы видели в примере выше, где мы получили сообщение об ошибке. Фрагмент кода выше проверяет, существует ли свойство слева от необязательного оператора цепочки (?)свойство (мон).
Если бы мы хотели проверить, существуют ли часы работы и день недели, когда кинотеатр открыт, мы бы использовали необязательную цепочку следующим образом:
Если свойство не существует, немедленно возвращается undefined, и остальная часть вашего кода может выполняться без возврата ошибки, как мы видели в предыдущем примере. Важно отметить, что свойство существует, если оно не является нулевым и не неопределенным.
Давайте посмотрим на пример из реального мира. Рассмотрим следующее:
Предположим, мы хотим перебрать массив days и определить, в какие дни кинотеатр открыт и закрыт. Мы можем использовать цикл for of следующим образом:
Обратите внимание, что мы не объявили movieTheatre.openingHours.day, поскольку day не является именем свойства movieTheatre. объект. Если мы хотим использовать имя переменной в качестве имени свойства, которого нет в объекте movieTheatre, мы используем [] обозначение, как показано во фрагменте выше.
В заключение, необязательная цепочка помогает нам предотвратить ошибки, которых мы могли бы не ожидать. Важно отметить, что, поскольку это новая функция, браузеры, не поддерживающие синтаксис ES2020, могут не работать с дополнительной цепочкой.
