Необязательная цепочка (?.)

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

Содержание

  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 имеют значение 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"

Резюме

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

  1. obj?.prop - возвращает obj.prop, если obj существует, иначе undefined.
  2. obj?.[prop] - возвращает obj[prop], если obj существует, иначе undefined.
  3. obj?.method() - вызывает obj.method(), если obj существует, иначе возвращает undefined.

Ссылка:

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

Необязательная цепочка из Javascript Info

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

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

🌟 Twitter | 👩🏻‍💻 suprabha.me | 🌟 Instagram