Можно ли объединить дополнительные цепочки с массивами и картой (в Javascript)?

Question

Недавно я узнал о необязательном сцеплении в Javascript и уже использовал его в проекте React / NodeJS. Прекрасно работает.

Я заметил, что использовал его с массивами map, даже не задумываясь об этом - это казалось естественным использованием (здесь items - это массив, или, возможно, undefined)

        {items?.map(postListItem => ....

То есть он будет отображаться, если существует items, но не, если items равен undefined, но позволит избежать любых ошибок во время выполнения, если я вызову map on undefined

Тем не менее я не знаю, является ли это приемлемым использованием или я неправильно использую необязательную цепочку. Я искал ответ, но пока не смог найти, что заставляет меня подозревать, что я его неправильно использую. Любая информация высоко ценится!

Answer 1

Если цепочка завершится неудачно, выражение оценивается как undefined.

Когда дочерний элемент оценивается как undefined, он просто не будет отображаться .

Условный рендеринг - это уже довольно распространенная стратегия. Ранее, когда у вас есть что-то, что может быть массивом или может быть undefined, и вы хотите отобразить , если есть массив, вы должны были бы сделать что-то вроде:

{ items && items.map( ...

Это работает, потому что, если items равно undefined, все выражение будет оценено как undefined, и рендеринг не произойдет, и не будет выдано никаких ошибок.

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

Необязательная цепочка stage 4 , так что вы можете рассчитывать на ее надежную работу.

Массивы являются объекты . Но необязательное сцепление не только для объектов - оно может работать для всего, что может иметь свойство или метод. Например, const bar = foo?.toFixed(2) будет работать нормально, если foo - это null, undefined или число (числа имеют метод toFixed).

Answer 2

Необязательный способ создания цепочки для вашей проблемы:

{items?.map?.(postListItem => ....)

Подробнее читайте здесь: MDN Web Docs: Необязательная цепочка