Дополнительная цепочка (?)

Дополнительная цепочка оператор ( ? ) разрешает чтение значения свойства, расположенного глубоко в цепочке подключенных объектов, без необходимости прямо проверить, что каждая ссылка в цепочке действительна. ? Оператор функционирует аналогично Анкет Оператор цепочки, за исключением того, что вместо того, чтобы вызывать ошибку, если ссылка является Nullish ( null или неопределенное ), выражение коротких замыканий с возвращающимся значением неопределенное Анкет При использовании с вызовами функций он возвращает неопределенный Если данная функция не существует.

Содержание

1. Проблема
2. Почему дополнительная цепочка
3. Дополнительные цепочки не действительны в левой части назначения
4. Отношения с необязательным оператором цепочки (?)
5. Другие случаи:? (), ?. []
6. Используйте ? с удалением:
7. Резюме
8. Ссылка

Проблема

Объект может иметь совершенно другую вложенную структуру объектов.

• Получение удаленных данных 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 являются нулевыми или неопределенными, выражение автоматически короткие замыкания, возвращая не определенные.

const highTemperature = response.data?.temperature?.current;

С помощью ? оператор вместо просто Анкет , JavaScript знает неявно проверить, чтобы быть уверенным response.data && response.data.temperature не являются нулевыми или неопределенными, прежде чем пытаться получить доступ к ответу.data.temperature.current

Дополнительные цепочки не действительны в левой части назначения

let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

Отношения с необязательным оператором цепочки (?)

Оператор Nullish Coalescing обрабатывает неопределенное и нулевой как конкретные значения и как и Необязательный оператор цепочки ( ? ) что полезно для доступа к свойству объекта, который может быть нулевой или неопределенное Анкет

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. Переменная раньше? должен быть объявлен

Если нет переменной пользователя вообще, то пользователь?. Все запускает ошибку:

// 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"

Резюме

? Синтаксис имеет три формы:

1. obj? .prop – возвращает obj.prop Если obj существует, иначе неопределенное Анкет
2. obj?. [prop] – возвращает obj [rop] Если obj существует, иначе неопределенное Анкет
3. obj? .method () – звонки obj.method () Если obj существует, иначе возвращает неопределенное Анкет

Ссылка:

MDN Необязательная цепочка

Дополнительная цепочка из JavaScript info

Спасибо, что прочитали статью ❤ ️

Я надеюсь, что вы узнаете что -то новое из этой статьи. Если у вас есть вопрос, пожалуйста, обратитесь ко мне в @suprabhasupi 😋

Оригинал: “https://dev.to/suprabhasupi/optional-chaining-400m”