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

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

постоянный авантюрист = {

имя: «Алиса»,

кот: {

имя: Дина

}

};

const dogName = искатель приключений.собака?.имя;

console.log(имя собаки);

// ожидаемый результат: не определено

console.log(авантюрист.someNonExistentMethod?.());

// ожидаемый результат: не определено

const foo = {someFooProp: «привет» };

console.log(foo.someFooProp?.toUpperCase()); // ПРИВЕТ

console.log(foo.someBarProp?.toUpperCase()); // неопределенный

Нулевой оператор объединения (??)

1) Нулевой оператор объединения (??) является логическим оператором

Синтаксис

выражение1 ?? выражение2

Если выражение1 равно null или не определено, возвращает выражение2

В противном случае возвращает выражение2

неопределенный ?? «фу»; // возвращает «foo»

нулевой ?? «фу»; // возвращает «foo»

"привет" ?? «фу»; // возвращает «привет»

2) Возвращает свой правый операнд, если левый операнд равен нулю или не определен, и в противном случае возвращает свой левый операнд.

константа foo = null ?? «строка по умолчанию»;

console.log(foo);

// ожидаемый результат: «строка по умолчанию»

константа баз = 0 ?? 42;

console.log(баз);

// ожидаемый результат: 0 (поскольку 0 не является нулевым или неопределенным)

Нулевой оператор объединения (??) можно рассматривать как частный случай логического оператора ИЛИ (||).

|| возвращает правый операнд, если левый операнд является любым ложным значением, а не только нулевым или неопределенным.

Ниже приведены дополнительные примеры.

пусть фу;

// foo никогда не присваивается никакого значения, поэтому оно все еще не определено

const someDummyText = foo || 'Привет!';

console.log(некоторыйDummyText); // Привет!

Значение falsy (включая 0, ‘’, NaN, false и т. д.)

постоянный счетчик = 0;

постоянный текст = "";

константное количество = количество || 42;

постоянное сообщение = текст || "привет!";

console.log(кол-во); // 42 а не 0

console.log(сообщение); // "привет!" и не ""

Интересный пример

константный текст = ""; // Пустая строка (которая также является ложным значением)

const notFalsyText = мой текст || "Привет, мир";

console.log (не ложный текст); // Привет, мир

константное сохранениеFalsy = myText ?? «Привет, соседи»;

console.log(сохранение ложности); // '' (поскольку myText не является ни неопределенным, ни нулевым)

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

1) Нулевой оператор объединения (??) рассматривает undefined и null как конкретные значения.

2) Как и необязательный оператор цепочки (?.), который полезен для доступа к свойству объекта, которое может быть нулевым или неопределенным.

3) Комбинируя их, вы можете безопасно получить доступ к свойству объекта, которое может быть нулевым, и указать значение по умолчанию, если оно есть.

const foo = {someFooProp: «привет» };

console.log(foo.someFooProp?.toUpperCase() ?? «недоступно»); // "ПРИВЕТ"

console.log(foo.someBarProp?.toUpperCase() ?? «недоступно»); // "нет в наличии"

ПРИМЕЧАНИЕ

Нулевой оператор объединения имеет пятый низший приоритет оператора, непосредственно ниже, чем || и непосредственно выше, чем условный (тернарный) оператор.

Невозможно напрямую объединить операторы И (&&) и ИЛИ (||) с ??

ноль || неопределенный ?? «фу»; // вызывает SyntaxError

правда && не определено ?? «фу»; // вызывает SyntaxError

Вместо этого укажите круглые скобки, чтобы явно указать приоритет:

(нуль || не определено) ?? «фу»; // возвращает «foo»

Вы также можете посмотреть это на: https://www.youtube.com/watch?v=Q-hE-w3uF88